mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update CSS tests to revision 4e1aa4f3dcbff1abd654c63d0f677379c1e2775f
This commit is contained in:
Ms2ger
parent
0f72049363
commit
6bb495338b
1321 changed files with 34875 additions and 7209 deletions
|
|
@ -13,7 +13,10 @@
|
|||
<meta content="This test checks that block-level boxes in a 'horizontal-tb' writing mode are laid out one after the other, vertically, with the first beginning at the top of a containing block; they are ordered from top to bottom meaning that the 1st block box is the topmost one, then the 2nd block is juxtaposed at its bottom, then the 3rd block is juxtaposed to the 2nd block at its bottom, etc..." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
html { writing-mode: horizontal-tb; }
|
||||
html
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
/*
|
||||
"
|
||||
The principal writing mode of the document is determined by the writing-mode
|
||||
|
|
@ -22,22 +25,28 @@
|
|||
*/
|
||||
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
width: 21em;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
width: 21em;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border-left: blue solid 1em;
|
||||
border-right: blue solid 1em;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border-left: blue solid 1em;
|
||||
border-right: blue solid 1em;
|
||||
}
|
||||
|
||||
div#top-border { border-top: blue solid 1em; }
|
||||
div#top-border
|
||||
{
|
||||
border-top: blue solid 1em;
|
||||
}
|
||||
|
||||
div#bottom-border { border-bottom: blue solid 1em; }
|
||||
div#bottom-border
|
||||
{
|
||||
border-bottom: blue solid 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Inline Direction and Bidirectionality (173 tests)</h2>
|
||||
<h2>Inline Direction and Bidirectionality (177 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -1102,7 +1102,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css-writing-modes-3/#direction">2.1 Specifying Directionality: the direction property</a></th></tr>
|
||||
<!-- 30 tests -->
|
||||
<!-- 34 tests -->
|
||||
<tr id="direction-001-2.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="direction-001.htm">direction-001</a></strong></td>
|
||||
|
|
@ -1345,6 +1345,50 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="table-progression-slr-001-2.1" class="">
|
||||
<td>
|
||||
<a href="table-progression-slr-001.htm">table-progression-slr-001</a></td>
|
||||
<td><a href="reference/table-progression-slr-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>sideways-lr Table Row/Rowgroup/Cell Ordering
|
||||
<ul class="assert">
|
||||
<li>This test checks that sideways-lr tables order rows/rowgroups left to right and cells bottom-to-top (LTR) or top-to-bottom (RTL) per 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table rows and row groups.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="table-progression-slr-002-2.1" class="">
|
||||
<td>
|
||||
<a href="table-progression-slr-002.htm">table-progression-slr-002</a></td>
|
||||
<td><a href="reference/table-progression-002-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>sideways-lr Table Column/Colgroup Ordering
|
||||
<ul class="assert">
|
||||
<li>This test checks that sideways-lr tables order columns bottom-to-top (LTR) or top-to-bottom (RTL) per the table's 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table columns and column groups.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="table-progression-srl-001-2.1" class="">
|
||||
<td>
|
||||
<a href="table-progression-srl-001.htm">table-progression-srl-001</a></td>
|
||||
<td><a href="reference/table-progression-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>sideways-rl Table Row/Rowgroup/Cell Ordering
|
||||
<ul class="assert">
|
||||
<li>This test checks that sideways-rl tables order rows/rowgroups right to left and cells top-to-bottom (LTR) or bottom-to-top (RTL) per 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table rows and row groups.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="table-progression-srl-002-2.1" class="">
|
||||
<td>
|
||||
<a href="table-progression-srl-002.htm">table-progression-srl-002</a></td>
|
||||
<td><a href="reference/table-progression-002-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>sideways-rl Table Column/Colgroup Ordering
|
||||
<ul class="assert">
|
||||
<li>This test checks that sideways-rl tables order columns top-to-bottom (LTR) or bottom-to-top (RTL) per the table's 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table columns and column groups.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="table-progression-vlr-001-2.1" class="">
|
||||
<td>
|
||||
<a href="table-progression-vlr-001.htm">table-progression-vlr-001</a></td>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Inline-level Alignment (30 tests)</h2>
|
||||
<h2>Inline-level Alignment (36 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines">4.2 Text Baselines</a></th></tr>
|
||||
<!-- 8 tests -->
|
||||
<!-- 14 tests -->
|
||||
<tr id="central-baseline-alignment-002-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="central-baseline-alignment-002.htm">central-baseline-alignment-002</a></strong></td>
|
||||
|
|
@ -72,21 +72,76 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-002-4.2" class="primary ahem">
|
||||
<tr id="text-baseline-slr-009-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-002.htm">text-baseline-002</a></strong></td>
|
||||
<td><a href="reference/text-baseline-002-ref.htm">=</a> </td>
|
||||
<a href="text-baseline-slr-009.htm">text-baseline-slr-009</a></strong></td>
|
||||
<td><a href="reference/text-baseline-slr-009-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - central alignment with vertical layout
|
||||
<td>text baseline alignment - alphabetical alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'mixed', then the central baseline is used as the dominant baseline.</li>
|
||||
<li>This test checks the generation of text baseline. When 'writing-mode' is 'sideways-lr' and when 'text-orientation' is 'mixed', then the alphabetical baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-003-4.2" class="primary ahem">
|
||||
<tr id="text-baseline-slr-011-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-003.htm">text-baseline-003</a></strong></td>
|
||||
<td><a href="reference/text-baseline-002-ref.htm">=</a> </td>
|
||||
<a href="text-baseline-slr-011.htm">text-baseline-slr-011</a></strong></td>
|
||||
<td><a href="reference/text-baseline-slr-009-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - alphabetical alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline. When 'writing-mode' is 'sideways-lr' and when 'text-orientation' is 'upright', then the alphabetical baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-slr-013-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-slr-013.htm">text-baseline-slr-013</a></strong></td>
|
||||
<td><a href="reference/text-baseline-slr-009-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - alphabetical alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline. When 'writing-mode' is 'sideways-lr' and when 'text-orientation' is 'sideways', then the alphabetical baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-srl-008-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-srl-008.htm">text-baseline-srl-008</a></strong></td>
|
||||
<td><a href="reference/text-baseline-vrl-006-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - alphabetical alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline. When 'writing-mode' is 'sideways-rl' and when 'text-orientation' is 'mixed', then the alphabetical baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-srl-010-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-srl-010.htm">text-baseline-srl-010</a></strong></td>
|
||||
<td><a href="reference/text-baseline-vrl-006-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - alphabetical alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline. When 'writing-mode' is 'sideways-rl' and when 'text-orientation' is 'upright', then the alphabetical baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-srl-012-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-srl-012.htm">text-baseline-srl-012</a></strong></td>
|
||||
<td><a href="reference/text-baseline-vrl-006-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - alphabetical alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline. When 'writing-mode' is 'sideways-rl' and when 'text-orientation' is 'sideways', then the alphabetical baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-vlr-003-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-vlr-003.htm">text-baseline-vlr-003</a></strong></td>
|
||||
<td><a href="reference/text-baseline-vrl-002-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - central alignment with vertical layout
|
||||
<ul class="assert">
|
||||
|
|
@ -94,21 +149,10 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-004-4.2" class="primary ahem">
|
||||
<tr id="text-baseline-vlr-005-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-004.htm">text-baseline-004</a></strong></td>
|
||||
<td><a href="reference/text-baseline-002-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - central alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'upright', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-005-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-005.htm">text-baseline-005</a></strong></td>
|
||||
<td><a href="reference/text-baseline-002-ref.htm">=</a> </td>
|
||||
<a href="text-baseline-vlr-005.htm">text-baseline-vlr-005</a></strong></td>
|
||||
<td><a href="reference/text-baseline-vrl-002-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - central alignment with vertical layout
|
||||
<ul class="assert">
|
||||
|
|
@ -116,21 +160,10 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-006-4.2" class="primary ahem">
|
||||
<tr id="text-baseline-vlr-007-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-006.htm">text-baseline-006</a></strong></td>
|
||||
<td><a href="reference/text-baseline-006-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - alphabetical alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'sideways', then the alphabetical baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-007-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-007.htm">text-baseline-007</a></strong></td>
|
||||
<td><a href="reference/text-baseline-006-ref.htm">=</a> </td>
|
||||
<a href="text-baseline-vlr-007.htm">text-baseline-vlr-007</a></strong></td>
|
||||
<td><a href="reference/text-baseline-vrl-006-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - alphabetical alignment with vertical layout
|
||||
<ul class="assert">
|
||||
|
|
@ -138,6 +171,39 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-vrl-002-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-vrl-002.htm">text-baseline-vrl-002</a></strong></td>
|
||||
<td><a href="reference/text-baseline-vrl-002-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - central alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'mixed', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-vrl-004-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-vrl-004.htm">text-baseline-vrl-004</a></strong></td>
|
||||
<td><a href="reference/text-baseline-vrl-002-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - central alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'upright', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-vrl-006-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-baseline-vrl-006.htm">text-baseline-vrl-006</a></strong></td>
|
||||
<td><a href="reference/text-baseline-vrl-006-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text baseline alignment - alphabetical alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'sideways', then the alphabetical baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s4.2.#alphabetic-baseline">
|
||||
<!-- 0 tests -->
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: writing-mode vertical-lr and vertical-rl</title>
|
||||
<title>CSS Test: Flexbox align-items: stretch with writing-mode vertical-lr and vertical-rl</title>
|
||||
<link href="mailto:mitsuteru.s@gmail.com" rel="author" title="Mitsuteru Sawa">
|
||||
<link href="mailto:jackalmage@gmail.com" rel="reviewer" title="Tab Atkins Jr.">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-align-items" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" rel="help">
|
||||
<link href="reference/writing-mode-stretch-001-ref.htm" rel="match">
|
||||
<link href="reference/flexbox_align-items-stretch-writing-modes-ref.htm" rel="match">
|
||||
<meta content="vertical-writing-mode flex items should stretch" name="assert">
|
||||
<style>
|
||||
.container {
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: order, orientation and layout of form controls in 'sideways-lr' writing-mode</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
|
||||
<meta content="image should" name="flags">
|
||||
<meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'sideways-lr'." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
form
|
||||
{
|
||||
font-size: 18px;
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
select
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<form action="">
|
||||
<p><label>姓名　<input value="艾俐俐" size="10"></label></p>
|
||||
|
||||
<p><label>语言　<select size="1"><option>English</option>
|
||||
<option>français</option>
|
||||
<option>فارسی</option>
|
||||
<option>中文</option>
|
||||
<option>日本語</option></select></label></p>
|
||||
</form>
|
||||
|
||||
<p>Test passes if the characters and form controls of the form above have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong> as the ones of the form below:</p>
|
||||
|
||||
<p><img src="support/form-controls-slr.png" width="180" height="185" alt="Image download support must be enabled">
|
||||
<!--
|
||||
Long description of image:
|
||||
Screenshot of vertical layout: the input element is laid lengthwise
|
||||
from bottom to top and its content rendered in a vertical writing mode,
|
||||
matching the label outside it. The drop-down selection control (located on
|
||||
the input element's righthand side) slides out to the side (towards the
|
||||
after edge of the block) rather than downward as it would in horizontal writing mode.
|
||||
The Asian glyphs in the input element and in the drop-down selection
|
||||
control are rotated 90 degrees counter-clockwise.
|
||||
-->
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: form controls in 'sideways-lr' writing-mode</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
|
||||
<meta content="should" name="flags">
|
||||
<meta content="This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'sideways-lr' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from bottom to top, b) the glyphs must be rotated 90° counter-clockwise and c) the block flow direction must be from left to right." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
form
|
||||
{
|
||||
font-size: 1.25em;
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if a) the form controls are appearing with Text sample1 on the left of the page and with Text sample10 on the right and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° counter-clockwise</strong>.</p>
|
||||
|
||||
<form action="">
|
||||
|
||||
<p><input value="Text sample1" size="12"></p>
|
||||
|
||||
<p>
|
||||
<select size="3">
|
||||
<optgroup label="Text sample2">
|
||||
<option>Text sample3</option>
|
||||
<option>Text sample4</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p><textarea cols="12" rows="2">Text sample5</textarea></p>
|
||||
|
||||
<p><input type="button" value="Text sample6"></p>
|
||||
|
||||
<p><input type="submit" value="Text sample7"></p>
|
||||
|
||||
<p><input type="reset" value="Text sample8"></p>
|
||||
|
||||
<p><button type="button">Text sample9</button></p>
|
||||
|
||||
<p><button type="submit">Text sample10</button></p>
|
||||
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: order, orientation and layout of form controls in 'sideways-rl' writing-mode</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
|
||||
<meta content="image should" name="flags">
|
||||
<meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'sideways-rl'." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
form
|
||||
{
|
||||
font-size: 18px;
|
||||
margin-left: 5em;
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
select
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<form action="">
|
||||
<p><label>姓名　<input value="艾俐俐" size="10"></label></p>
|
||||
|
||||
<p><label>语言　<select size="1"><option>English</option>
|
||||
<option>français</option>
|
||||
<option>فارسی</option>
|
||||
<option>中文</option>
|
||||
<option>日本語</option></select></label></p>
|
||||
</form>
|
||||
|
||||
<p>Test passes if the characters and form controls of the form above have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong> as the ones of the form below:</p>
|
||||
|
||||
<p><img src="support/form-controls-srl.png" width="180" height="185" alt="Image download support must be enabled">
|
||||
<!--
|
||||
Long description of image:
|
||||
Screenshot of vertical layout: the input element is laid lengthwise
|
||||
from top to bottom and its content rendered in a vertical writing mode,
|
||||
matching the label outside it. The drop-down selection control (located on
|
||||
the input element's lefthand side) slides out to the side (towards the
|
||||
after edge of the block) rather than downward as it would in horizontal writing mode.
|
||||
The Asian glyphs in the input element and in the drop-down selection
|
||||
control are rotated 90 degrees clockwise.
|
||||
-->
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: form controls in 'sideways-rl' writing-mode</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
|
||||
<meta content="should" name="flags">
|
||||
<meta content="This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'sideways-rl' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from top to bottom, b) the glyphs must be rotated 90° clockwise and c) the block flow direction must be from right to left." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
form
|
||||
{
|
||||
font-size: 1.25em;
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if a) the form controls are appearing with Text sample1 on the right of the page and with Text sample10 on the left and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° clockwise</strong>.</p>
|
||||
|
||||
<form action="">
|
||||
|
||||
<p><input value="Text sample1" size="12"></p>
|
||||
|
||||
<p>
|
||||
<select size="3">
|
||||
<optgroup label="Text sample2">
|
||||
<option>Text sample3</option>
|
||||
<option>Text sample4</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p><textarea cols="12" rows="2">Text sample5</textarea></p>
|
||||
|
||||
<p><input type="button" value="Text sample6"></p>
|
||||
|
||||
<p><input type="submit" value="Text sample7"></p>
|
||||
|
||||
<p><input type="reset" value="Text sample8"></p>
|
||||
|
||||
<p><button type="button">Text sample9</button></p>
|
||||
|
||||
<p><button type="submit">Text sample10</button></p>
|
||||
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: order, orientation and layout of form controls in 'vertical-lr' writing-mode</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
|
||||
<meta content="image should" name="flags">
|
||||
<meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'vertical-lr'." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
form
|
||||
{
|
||||
font-size: 18px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
select
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<form action="">
|
||||
<p><label>姓名　<input value="艾俐俐" size="10"></label></p>
|
||||
|
||||
<p><label>语言　<select size="1"><option>English</option>
|
||||
<option>français</option>
|
||||
<option>فارسی</option>
|
||||
<option>中文</option>
|
||||
<option>日本語</option></select></label></p>
|
||||
</form>
|
||||
|
||||
<p>Test passes if the characters and form controls of the form above have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong> as the ones of the form below:</p>
|
||||
|
||||
<p><img src="support/form-controls-vlr.png" width="188" height="228" alt="Image download support must be enabled">
|
||||
<!--
|
||||
Long description of image:
|
||||
Screenshot of vertical layout: the input element is laid lengthwise
|
||||
from top to bottom and its content rendered in a vertical writing mode,
|
||||
matching the label outside it. The drop-down selection control (located on
|
||||
the input element's righthand side) slides out to the side (towards the
|
||||
after edge of the block) rather than downward as it would in horizontal writing mode.
|
||||
The Asian glyphs in the input element and in the drop-down selection
|
||||
control are translated upright.
|
||||
-->
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: form controls in 'vertical-lr' writing-mode</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
|
||||
<meta content="should" name="flags">
|
||||
<meta content="This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'vertical-lr' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from top to bottom, b) the glyphs must be rotated 90° clockwise and c) the block flow direction must be from left to right." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
form
|
||||
{
|
||||
font-size: 1.25em;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if a) the form controls are appearing with Text sample1 on the left of the page and with Text sample10 on the right and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° clockwise</strong>.</p>
|
||||
|
||||
<form action="">
|
||||
|
||||
<p><input value="Text sample1" size="12"></p>
|
||||
|
||||
<p>
|
||||
<select size="3">
|
||||
<optgroup label="Text sample2">
|
||||
<option>Text sample3</option>
|
||||
<option>Text sample4</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p><textarea cols="12" rows="2">Text sample5</textarea></p>
|
||||
|
||||
<p><input type="button" value="Text sample6"></p>
|
||||
|
||||
<p><input type="submit" value="Text sample7"></p>
|
||||
|
||||
<p><input type="reset" value="Text sample8"></p>
|
||||
|
||||
<p><button type="button">Text sample9</button></p>
|
||||
|
||||
<p><button type="submit">Text sample10</button></p>
|
||||
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
|
||||
<meta content="image should" name="flags">
|
||||
<meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1." name="assert">
|
||||
<meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'vertical-rl'." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
form
|
||||
|
|
@ -45,11 +45,14 @@
|
|||
<!--
|
||||
original source of the image is:
|
||||
http://www.w3.org/TR/css-writing-modes-3/vertical-form.png
|
||||
longdesc="Screenshot of vertical layout: the input element is laid lengthwise
|
||||
from top to botom and its contents rendered in a vertical writing mode,
|
||||
matching the lbels outside it. The drop-down selection control after it slides
|
||||
out to the sid (towards the after edge of the block) rather than downward as
|
||||
it would in hoizontal writing modes."
|
||||
Long description of image:
|
||||
Screenshot of vertical layout: the input element is laid lengthwise
|
||||
from top to bottom and its content rendered in a vertical writing mode,
|
||||
matching the label outside it. The drop-down selection control (located on
|
||||
the input element's lefthand side) slides out to the side (towards the
|
||||
after edge of the block) rather than downward as it would in horizontal writing mode.
|
||||
The Asian glyphs in the input element and in the drop-down selection
|
||||
control are translated upright.
|
||||
-->
|
||||
</p>
|
||||
|
||||
|
|
@ -14,44 +14,42 @@
|
|||
|
||||
<style type="text/css">
|
||||
form
|
||||
{
|
||||
font-size: 1.25em;
|
||||
height: auto;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
form > p { margin-right: 1em; }
|
||||
{
|
||||
font-size: 1.25em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if a) the form controls are appearing with Text sample1 on the left of the page and with Text sample10 on the right and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° clockwise</strong>.</p>
|
||||
<p>Test passes if a) the form controls are appearing with Text sample1 on the right of the page and with Text sample10 on the left and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° clockwise</strong>.</p>
|
||||
|
||||
<form action="">
|
||||
|
||||
<p><button type="submit">Text sample10</button></p>
|
||||
|
||||
<p><button type="button">Text sample9</button></p>
|
||||
|
||||
<p><input type="reset" value="Text sample8"></p>
|
||||
|
||||
<p><input type="submit" value="Text sample7"></p>
|
||||
|
||||
<p><input type="button" value="Text sample6"></p>
|
||||
|
||||
<p><textarea cols="12" rows="2">Text sample5</textarea></p>
|
||||
<p><input value="Text sample1" size="12"></p>
|
||||
|
||||
<p>
|
||||
<select size="3">
|
||||
<optgroup label="Text sample4">
|
||||
<optgroup label="Text sample2">
|
||||
<option>Text sample3</option>
|
||||
<option>Text sample2</option>
|
||||
<option>Text sample4</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p><input value="Text sample1" size="12"></p>
|
||||
<p><textarea cols="12" rows="2">Text sample5</textarea></p>
|
||||
|
||||
<p><input type="button" value="Text sample6"></p>
|
||||
|
||||
<p><input type="submit" value="Text sample7"></p>
|
||||
|
||||
<p><input type="reset" value="Text sample8"></p>
|
||||
|
||||
<p><button type="button">Text sample9</button></p>
|
||||
|
||||
<p><button type="submit">Text sample10</button></p>
|
||||
|
||||
</form>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: sideways-lr - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that line boxes in a block box with 'writing-mode' set to 'sideways-lr' are laid out one after the other with the first beginning at the left-hand side of the block box; they are ordered from left to right meaning that the 1st line box is the leftmost one and then the 2nd line box is juxtaposed to the right-hand side of 1st line box, the 3rd line box is juxtaposed to the 2nd line box on its right-hand side, etc... " name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>AAAAAAA B C D E FFFF GGGGGGG H J K L MMMMMMM N QQQQ R S T U V W XXXX Y a bbbb c d e f g h jjjj k</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'float: right' and 'sideways-lr' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-002-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that the line boxes of a right-floated box with its 'writing-mode' set to 'sideways-lr' will be ordered from left to right." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
float: right;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>AAAAAAA B C D E FFFF GGGGGGG H J K L MMMMMMM N QQQQ R S T U V W XXXX Y a bbbb c d e f g h jjjj k</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'float: right' and 'sideways-lr' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-002-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that the line boxes of right-floated boxes with 'writing-mode' set to 'sideways-lr' will be ordered from left to right." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div.floated-right
|
||||
{
|
||||
background-color: blue;
|
||||
border-bottom: blue solid 1em;
|
||||
border-right: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
float: right;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
div#left-border
|
||||
{
|
||||
border-left: blue solid 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="floated-right">
|
||||
|
||||
<!-- The right-most "S" --> a bbbb c d e f g h jjjj k
|
||||
|
||||
</div>
|
||||
|
||||
<div class="floated-right">
|
||||
|
||||
<!-- The left-most "S" --> N QQQQ R S T U V W XXXX Y
|
||||
|
||||
</div>
|
||||
|
||||
<div class="floated-right">
|
||||
|
||||
<!-- The "A" --> GGGGGGG H J K L MMMMMMM
|
||||
|
||||
</div>
|
||||
|
||||
<div class="floated-right" id="left-border">
|
||||
|
||||
<!-- The "P" --> AAAAAAA B C D E FFFF
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: position absolute and 'sideways-lr' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that line boxes of an absolutely positioned box with its 'writing-mode' set to 'sideways-lr' will be ordered from left to right." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
left: auto;
|
||||
position: absolute;
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>AAAAAAA B C D E FFFF GGGGGGG H J K L MMMMMMM N QQQQ R S T U V W XXXX Y a bbbb c d e f g h jjjj k</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: inline-block and 'sideways-lr' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that lines boxes of descendant block boxes of an inline-block with its 'writing-mode' set to 'sideways-lr' are ordered from left to right." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div#inline-block
|
||||
{
|
||||
background-color: blue;
|
||||
border-bottom: blue solid 1em;
|
||||
border-right: blue solid 1em;
|
||||
display: inline-block;
|
||||
height: 8em; /* Each line box has an inline-size of 8em */
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
border-left: blue solid 1em;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
|
||||
<div id="inline-block">
|
||||
|
||||
<!-- The "P" --> <span>AAAAAAA B C D E FFFF </span>
|
||||
|
||||
<!-- The "A" --> <span>GGGGGGG H J K L MMMMMMM</span>
|
||||
|
||||
<!-- The left-most "S" --> <span>N QQQQ R S T U V W XXXX Y</span>
|
||||
|
||||
<!-- The right-most "S" --> <span>a bbbb c d e f g h jjjj k</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: inline-block and 'sideways-lr' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that lines boxes of descendant block boxes of inline-blocks with 'writing-mode' set to 'sideways-lr' are ordered from left to right." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div.inline-block
|
||||
{
|
||||
background-color: blue;
|
||||
border-bottom: blue solid 1em;
|
||||
border-left: blue solid 1em;
|
||||
display: inline-block;
|
||||
height: 8em;
|
||||
vertical-align: top;
|
||||
/*
|
||||
Why 'vertical-align: top' ?
|
||||
See
|
||||
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
|
||||
for explanations
|
||||
*/
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
span#right-border
|
||||
{
|
||||
border-right: blue solid 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
|
||||
<div class="inline-block">
|
||||
|
||||
<!-- The 1st left-most line of "P" --> <span>AAAAAAA</span>
|
||||
|
||||
<!-- The 2nd left-most line of "P" --> <span> B C</span>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <span> D E</span>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <span> FFFF</span>
|
||||
|
||||
</div><div class="inline-block">
|
||||
|
||||
<!-- The left-most line of "A" --> <span>GGGGGGG</span>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <span> H J</span>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <span> K L</span>
|
||||
|
||||
<!-- The 4th left-most line of "A" --> <span>MMMMMMM</span>
|
||||
|
||||
</div><div class="inline-block">
|
||||
|
||||
<!-- The 1st left-most line of left-most "S" --> <span>N QQQQ</span>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <span>R S T</span>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <span>U V W</span>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <span>XXXX Y</span>
|
||||
|
||||
</div><div class="inline-block">
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <span>a bbbb</span>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <span>c d e</span>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <span>f g h</span>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <span id="right-border">jjjj k</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: table-cell and 'sideways-lr' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that the lines boxes of a table-cell with its 'writing-mode' set to 'sideways-lr' are ordered from left to right." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
display: table-cell;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>AAAAAAA B C D E FFFF GGGGGGG H J K L MMMMMMM N QQQQ R S T U V W XXXX Y a bbbb c d e f g h jjjj k</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: table-caption and 'sideways-lr' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that the lines boxes of a table-caption with its 'writing-mode' set to 'sideways-lr' are ordered from left to right." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
display: table-caption;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>AAAAAAA B C D E FFFF GGGGGGG H J K L MMMMMMM N QQQQ R S T U V W XXXX Y a bbbb c d e f g h jjjj k</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: list and 'sideways-lr' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that line boxes in a block box with 'writing-mode' set to 'sideways-lr' are laid out one after the other with the first beginning at the left-hand side of the block box; they are ordered from left to right meaning that the 1st line box is the leftmost one and then the 2nd line box is juxtaposed to the right-hand side of 1st line box, the 3rd line box is juxtaposed to the 2nd line box on its right-hand side, etc... " name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
ul
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
list-style: none outside none;
|
||||
margin: 0em;
|
||||
padding-bottom: 0em; /* overriding default padding-end: 40px in several browsers */
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul><li>AAAAAAA B C D E FFFF GGGGGGG H J K L MMMMMMM N QQQQ R S T U V W XXXX Y a bbbb c d e f g h jjjj k</li></ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: sideways-rl - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that line boxes of a block box in a 'sideways-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost line of the block box; they are ordered from right to left meaning that the 1st line box is the rightmost one and then the 2nd line box is juxtaposed to its left-hand side, the 3rd block is juxtaposed to the 2nd line box on its left-hand side, etc..." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>A BBBB C D E F G H JJJJ K L MMMM Q R S T U V WWWW X YYYYYYY Z a b c ddddddd eeee f g h j kkkkkkk</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'float: left' and 'sideways-rl' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that the line boxes of a left-floated box with its 'writing-mode' set to 'sideways-rl' will be ordered from right to left." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
float: left;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>A BBBB C D E F G H JJJJ K L MMMM Q R S T U V WWWW X YYYYYYY Z a b c ddddddd eeee f g h j kkkkkkk</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'float: left' and 'sideways-rl' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that the line boxes of left-floated boxes with 'writing-mode' set to 'sideways-rl' will be ordered from right to left." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div.floated-left
|
||||
{
|
||||
background-color: blue;
|
||||
border-bottom: blue solid 1em;
|
||||
border-left: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
float: left;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
div#right-border
|
||||
{
|
||||
border-right: blue solid 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="floated-left">
|
||||
|
||||
<!-- The "P" --> eeee f g h j kkkkkkk
|
||||
|
||||
</div>
|
||||
|
||||
<div class="floated-left">
|
||||
|
||||
<!-- The "A" --> YYYYYYY Z a b c ddddddd
|
||||
|
||||
</div>
|
||||
|
||||
<div class="floated-left">
|
||||
|
||||
<!-- The left-most "S" --> L MMMM Q R S T U V WWWW X
|
||||
|
||||
</div>
|
||||
|
||||
<div class="floated-left" id="right-border">
|
||||
|
||||
<!-- The right-most "S" --> A BBBB C D E F G H JJJJ K
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: position absolute and 'sideways-rl' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that line boxes of an absolutely positioned box with its 'writing-mode' set to 'sideways-rl' will be ordered from right to left." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
left: auto;
|
||||
position: absolute;
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>A BBBB C D E F G H JJJJ K L MMMM Q R S T U V WWWW X YYYYYYY Z a b c ddddddd eeee f g h j kkkkkkk</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: inline-block and 'sideways-rl' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that lines boxes of descendant block boxes of an inline-block with its 'writing-mode' set to 'sideways-rl' are ordered from right to left." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div#inline-block
|
||||
{
|
||||
background-color: blue;
|
||||
border-right: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
display: inline-block;
|
||||
height: 8em; /* Each line box has an inline-size of 8em */
|
||||
vertical-align: top;
|
||||
/*
|
||||
Why 'vertical-align: top' ?
|
||||
See
|
||||
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
|
||||
for explanations
|
||||
*/
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
border-left: blue solid 1em;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
|
||||
<div id="inline-block">
|
||||
|
||||
<!-- The right-most "S" --> <span>A BBBB C D E F G H JJJJ K</span>
|
||||
|
||||
<!-- The left-most "S" --> <span>L MMMM Q R S T U V WWWW X</span>
|
||||
|
||||
<!-- The "A" --> <span>YYYYYYY Z a b c ddddddd</span>
|
||||
|
||||
<!-- The "P" --> <span>eeee f g h j kkkkkkk</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: inline-block and 'sideways-rl' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that lines boxes of descendant block boxes of inline-blocks with 'writing-mode' set to 'sideways-rl' are ordered from right to left." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div.inline-block
|
||||
{
|
||||
background-color: blue;
|
||||
border-right: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
display: inline-block;
|
||||
height: 8em;
|
||||
vertical-align: top;
|
||||
/*
|
||||
Why 'vertical-align: top' ?
|
||||
See
|
||||
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
|
||||
for explanations
|
||||
*/
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
span#left-border
|
||||
{
|
||||
border-left: blue solid 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
|
||||
<div class="inline-block">
|
||||
|
||||
<!-- The right-most line of "P" --> <span>eeee </span>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <span>f g </span>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <span>h j </span>
|
||||
|
||||
<!-- The 4th right-most line of "P" --> <span id="left-border">kkkkkkk</span>
|
||||
|
||||
</div><div class="inline-block">
|
||||
|
||||
<!-- The right-most line of "A" --> <span>YYYYYYY</span>
|
||||
|
||||
<!-- The 2nd right-most line of "A" --> <span>Z a </span>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <span>b c </span>
|
||||
|
||||
<!-- The 4th right-most line of "A" --> <span>ddddddd</span>
|
||||
|
||||
</div><div class="inline-block">
|
||||
|
||||
<!-- The right-most line of left-most "S" --> <span>L MMMM</span>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <span>Q R S</span>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <span>T U V</span>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <span>WWWW X</span>
|
||||
|
||||
</div><div class="inline-block">
|
||||
|
||||
<!-- The right-most line of right-most "S" --> <span>A BBBB</span>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <span>C D E</span>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <span>F G H</span>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <span>JJJJ K</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: table-cell and 'sideways-rl' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that the lines boxes of a table-cell with its 'writing-mode' set to 'sideways-rl' are ordered from right to left." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
display: table-cell;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>A BBBB C D E F G H JJJJ K L MMMM Q R S T U V WWWW X YYYYYYY Z a b c ddddddd eeee f g h j kkkkkkk</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: table-caption and 'sideways-rl' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that the lines boxes of a table-caption with its 'writing-mode' set to 'sideways-rl' are ordered from right to left." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
display: table-caption;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>A BBBB C D E F G H JJJJ K L MMMM Q R S T U V WWWW X YYYYYYY Z a b c ddddddd eeee f g h j kkkkkkk</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: list and 'sideways-rl' - ordering direction of line boxes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that line boxes of a block box in a 'sideways-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost line of the block box; they are ordered from right to left meaning that the 1st line box is the rightmost one and then the 2nd line box is juxtaposed to its left-hand side, the 3rd block is juxtaposed to the 2nd line box on its left-hand side, etc..." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
ul
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
list-style: none outside none;
|
||||
margin: 0em;
|
||||
padding-top: 0em; /* overriding default padding-start: 40px in several browsers */
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul><li>A BBBB C D E F G H JJJJ K L MMMM Q R S T U V WWWW X YYYYYYY Z a b c ddddddd eeee f g h j kkkkkkk</li></ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -14,24 +14,24 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>AAAAAAA B C D E FFFF GGGGGGG H J K L MMMMMMM NNNN Q R S T U V W X YYYY aaaa b c d e f g h j kkkk</div>
|
||||
<div>AAAAAAA B C D E FFFF GGGGGGG H J K L MMMMMMM NNNN Q R S T U V W X YYYY aaaa b c d e f g h j kkkk</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -14,19 +14,19 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
float: right;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
float: right;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,23 +14,26 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div.floated-right
|
||||
{
|
||||
background-color: blue;
|
||||
border-bottom: blue solid 1em;
|
||||
border-right: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
float: right;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border-bottom: blue solid 1em;
|
||||
border-right: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
float: right;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#left-border { border-left: blue solid 1em; }
|
||||
div#left-border
|
||||
{
|
||||
border-left: blue solid 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,20 +14,20 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
left: auto;
|
||||
position: absolute;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
left: auto;
|
||||
position: absolute;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,26 +14,26 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div#inline-block
|
||||
{
|
||||
background-color: blue;
|
||||
border-right: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
display: inline-block;
|
||||
height: 8em; /* Each line box has an inline-size of 8em */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border-right: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
display: inline-block;
|
||||
height: 8em; /* Each line box has an inline-size of 8em */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
border-left: blue solid 1em;
|
||||
display: block;
|
||||
}
|
||||
{
|
||||
border-left: blue solid 1em;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,31 +14,37 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div.inline-block
|
||||
{
|
||||
background-color: blue;
|
||||
border-left: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
display: inline-block;
|
||||
height: 8em;
|
||||
vertical-align: top;
|
||||
{
|
||||
background-color: blue;
|
||||
border-left: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
display: inline-block;
|
||||
height: 8em;
|
||||
vertical-align: top;
|
||||
/*
|
||||
Why 'vertical-align: top' ?
|
||||
See
|
||||
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
|
||||
for explanations
|
||||
*/
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
span { display: block; }
|
||||
span
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
span#right-border { border-right: blue solid 1em; }
|
||||
span#right-border
|
||||
{
|
||||
border-right: blue solid 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,19 +14,19 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
display: table-cell;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
display: table-cell;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,19 +14,19 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
display: table-caption;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
display: table-caption;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,21 +14,21 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
ul
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
list-style: none outside none;
|
||||
margin: 0em;
|
||||
padding-top: 0em; /* overriding default padding-start: 40px in several browsers */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
list-style: none outside none;
|
||||
margin: 0em;
|
||||
padding-top: 0em; /* overriding default padding-start: 40px in several browsers */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,18 +14,18 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,19 +14,19 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
float: left;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
float: left;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -10,27 +10,30 @@
|
|||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that the line boxes of left-floated boxes with 'writing-mode' set to 'vertical-lr' will be ordered from right to left." name="assert">
|
||||
<meta content="This test checks that the line boxes of left-floated boxes with 'writing-mode' set to 'vertical-rl' will be ordered from right to left." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div.floated-left
|
||||
{
|
||||
background-color: blue;
|
||||
border-bottom: blue solid 1em;
|
||||
border-left: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
float: left;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border-bottom: blue solid 1em;
|
||||
border-left: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
float: left;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#right-border { border-right: blue solid 1em; }
|
||||
div#right-border
|
||||
{
|
||||
border-right: blue solid 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,20 +14,20 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
left: auto;
|
||||
position: absolute;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
left: auto;
|
||||
position: absolute;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,33 +14,33 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div#inline-block
|
||||
{
|
||||
background-color: blue;
|
||||
border-right: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
display: inline-block;
|
||||
height: 8em; /* Each line box has an inline-size of 8em */
|
||||
vertical-align: top;
|
||||
{
|
||||
background-color: blue;
|
||||
border-right: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
display: inline-block;
|
||||
height: 8em; /* Each line box has an inline-size of 8em */
|
||||
vertical-align: top;
|
||||
/*
|
||||
Why 'vertical-align: top' ?
|
||||
See
|
||||
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
|
||||
for explanations
|
||||
*/
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
border-left: blue solid 1em;
|
||||
display: block;
|
||||
}
|
||||
{
|
||||
border-left: blue solid 1em;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,31 +14,37 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div.inline-block
|
||||
{
|
||||
background-color: blue;
|
||||
border-right: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
display: inline-block;
|
||||
height: 8em;
|
||||
vertical-align: top;
|
||||
{
|
||||
background-color: blue;
|
||||
border-right: blue solid 1em;
|
||||
border-top: blue solid 1em;
|
||||
display: inline-block;
|
||||
height: 8em;
|
||||
vertical-align: top;
|
||||
/*
|
||||
Why 'vertical-align: top' ?
|
||||
See
|
||||
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
|
||||
for explanations
|
||||
*/
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
span { display: block; }
|
||||
span
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
span#left-border { border-left: blue solid 1em; }
|
||||
span#left-border
|
||||
{
|
||||
border-left: blue solid 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,19 +14,19 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
display: table-cell;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
display: table-cell;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,19 +14,19 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
display: table-caption;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
display: table-caption;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -14,21 +14,21 @@
|
|||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
ul
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
list-style: none outside none;
|
||||
margin: 0em;
|
||||
padding-top: 0em; /* overriding default padding-start: 40px in several browsers */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
{
|
||||
background-color: blue;
|
||||
border: blue solid 1em;
|
||||
height: 7em; /* Each line box has an inline-size of 7em */
|
||||
list-style: none outside none;
|
||||
margin: 0em;
|
||||
padding-top: 0em; /* overriding default padding-start: 40px in several browsers */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -13,15 +13,15 @@
|
|||
|
||||
<style type="text/css" media="print">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
body, div
|
||||
{
|
||||
width: 100%;
|
||||
{
|
||||
width: 100%;
|
||||
/* width: 100% will force a page-break in vertical-rl writing-mode */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,15 +13,15 @@
|
|||
|
||||
<style type="text/css" media="print">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
body, div
|
||||
{
|
||||
width: 100%;
|
||||
{
|
||||
width: 100%;
|
||||
/* width: 100% will force a page-break in vertical-lr writing-mode */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' - default page flow (progression) direction</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property">
|
||||
|
||||
<meta content="image paged" name="flags">
|
||||
<meta content="This test checks that when 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is left-to-right." name="assert">
|
||||
|
||||
<style type="text/css" media="print">
|
||||
html
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
body, div
|
||||
{
|
||||
width: 100%;
|
||||
/* width: 100% will force a page-break in sideways-lr writing-mode */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div><img src="support/page-flow-direction-002p1.png" alt="Image download support must be enabled"></div>
|
||||
|
||||
<div><img src="support/page-flow-direction-002p2.png" alt="Image download support must be enabled"></div>
|
||||
|
||||
<div><img src="support/page-flow-direction-002p3.png" alt="Image download support must be enabled"></div>
|
||||
|
||||
<div><img src="support/page-flow-direction-002p4.png" alt="Image download support must be enabled"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue