mirror of
https://github.com/servo/servo.git
synced 2025-08-05 21:50:18 +01:00
Update CSS tests to revision 0698c2aa9ead844b6d7d10eafb096cb1118e13ef
This commit is contained in:
Ms2ger
parent
9aa1b1e408
commit
35c74aecc2
11290 changed files with 92400 additions and 49214 deletions
|
|
@ -20,11 +20,11 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<p>The three lines below should be <strong>identical</strong>.</p>
|
||||
|
||||
|
||||
<p>Three lines of <img src="" alt="readable" width="0"> text</p>
|
||||
<p>Three lines of <span class="rtol"><img src="" alt="elbadaer" width="0"></span> text</p>
|
||||
<p>Three lines of <img src="" alt="elbadaer" class="rtol" width="0"> text</p>
|
||||
|
|
|
|||
|
|
@ -12,19 +12,19 @@
|
|||
<meta name="assert" content="Border sides should be unaffected by directionality">
|
||||
<style type="text/css">
|
||||
span {
|
||||
border: 5px solid gray;
|
||||
border: 5px solid gray;
|
||||
border-color: orange purple teal yellow;
|
||||
}
|
||||
|
||||
|
||||
.rtol {
|
||||
direction: rtl;
|
||||
unicode-bidi: normal;
|
||||
}
|
||||
|
||||
|
||||
p {text-align: left;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 lines are <strong>identical</strong>.</p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -12,15 +12,15 @@
|
|||
<meta name="assert" content="Border sides should be unaffected by directionality">
|
||||
<style type="text/css">
|
||||
span {
|
||||
border: 5px solid gray;
|
||||
border: 5px solid gray;
|
||||
border-color: orange purple teal yellow;
|
||||
}
|
||||
|
||||
|
||||
.rtol {
|
||||
direction: rtl;
|
||||
unicode-bidi: embed;
|
||||
}
|
||||
|
||||
|
||||
p {text-align: left;}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -12,19 +12,19 @@
|
|||
<meta name="assert" content="Border sides should be unaffected by directionality">
|
||||
<style type="text/css">
|
||||
span {
|
||||
border: 5px solid gray;
|
||||
border: 5px solid gray;
|
||||
border-color: orange purple teal yellow;
|
||||
}
|
||||
|
||||
|
||||
.rtol {
|
||||
direction: rtl;
|
||||
unicode-bidi: bidi-override;
|
||||
}
|
||||
|
||||
|
||||
p {text-align: left;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 lines are <strong>identical</strong>.</p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -12,19 +12,19 @@
|
|||
<meta name="assert" content="Border sides should be unaffected by directionality">
|
||||
<style type="text/css">
|
||||
span {
|
||||
border: 5px solid gray;
|
||||
border: 5px solid gray;
|
||||
border-color: orange purple teal yellow;
|
||||
}
|
||||
|
||||
|
||||
.rtol {
|
||||
direction: rtl;
|
||||
unicode-bidi: normal;
|
||||
}
|
||||
|
||||
|
||||
p {text-align: left;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 lines are <strong>identical</strong>.</p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -12,15 +12,15 @@
|
|||
<meta name="assert" content="Border sides should be unaffected by directionality">
|
||||
<style type="text/css">
|
||||
span {
|
||||
border: 5px solid gray;
|
||||
border: 5px solid gray;
|
||||
border-color: orange purple teal yellow;
|
||||
}
|
||||
|
||||
|
||||
.rtol {
|
||||
direction: rtl;
|
||||
unicode-bidi: embed;
|
||||
}
|
||||
|
||||
|
||||
p {text-align: left;}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -12,19 +12,19 @@
|
|||
<meta name="assert" content="Border sides should be unaffected by directionality">
|
||||
<style type="text/css">
|
||||
span {
|
||||
border: 5px solid gray;
|
||||
border: 5px solid gray;
|
||||
border-color: orange purple teal yellow;
|
||||
}
|
||||
|
||||
|
||||
.rtol {
|
||||
direction: rtl;
|
||||
unicode-bidi: bidi-override;
|
||||
}
|
||||
|
||||
|
||||
p {text-align: left;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 lines are <strong>identical</strong>.</p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -12,22 +12,22 @@
|
|||
<meta name="assert" content="Border sides should be unaffected by directionality">
|
||||
<style type="text/css">
|
||||
div {
|
||||
border: 5px solid gray;
|
||||
border: 5px solid gray;
|
||||
border-color: orange purple teal yellow;
|
||||
text-align: left;
|
||||
width: 10em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
.rtol {
|
||||
direction: rtl;
|
||||
unicode-bidi: normal;
|
||||
}
|
||||
|
||||
|
||||
p {text-align: left;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 lines are <strong>identical</strong>.</p>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -12,22 +12,22 @@
|
|||
<meta name="assert" content="Border sides should be unaffected by directionality">
|
||||
<style type="text/css">
|
||||
div {
|
||||
border: 5px solid gray;
|
||||
border: 5px solid gray;
|
||||
border-color: orange purple teal yellow;
|
||||
text-align: left;
|
||||
width: 10em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
.rtol {
|
||||
direction: rtl;
|
||||
unicode-bidi: embed;
|
||||
}
|
||||
|
||||
|
||||
p {text-align: left;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 lines are <strong>identical</strong>.</p>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -12,22 +12,22 @@
|
|||
<meta name="assert" content="Border sides should be unaffected by directionality">
|
||||
<style type="text/css">
|
||||
div {
|
||||
border: 5px solid gray;
|
||||
border: 5px solid gray;
|
||||
border-color: orange purple teal yellow;
|
||||
text-align: left;
|
||||
width: 10em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
.rtol {
|
||||
direction: rtl;
|
||||
unicode-bidi: bidi-override;
|
||||
}
|
||||
|
||||
|
||||
p {text-align: left;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 lines are <strong>identical</strong>.</p>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@
|
|||
direction: rtl;
|
||||
unicode-bidi: bidi-override;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 bicolored stripes are <strong>identical</strong>.</p>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -20,14 +20,14 @@
|
|||
margin-bottom: 1em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
|
||||
.rtol {
|
||||
direction: rtl;
|
||||
unicode-bidi: normal;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 bicolored stripes are <strong>identical</strong>.</p>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -20,14 +20,14 @@
|
|||
margin-bottom: 1em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
|
||||
.rtol {
|
||||
direction: rtl;
|
||||
unicode-bidi: embed;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 bicolored stripes are <strong>identical</strong>.</p>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@
|
|||
direction: rtl;
|
||||
unicode-bidi: bidi-override;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 bicolored stripes are <strong>identical</strong>.</p>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -20,14 +20,14 @@
|
|||
margin-bottom: 1em;
|
||||
padding-right: 5em;
|
||||
}
|
||||
|
||||
|
||||
.rtol {
|
||||
direction: rtl;
|
||||
unicode-bidi: normal;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 bicolored stripes are <strong>identical</strong>.</p>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -20,14 +20,14 @@
|
|||
margin-bottom: 1em;
|
||||
padding-right: 5em;
|
||||
}
|
||||
|
||||
|
||||
.rtol {
|
||||
direction: rtl;
|
||||
unicode-bidi: embed;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 bicolored stripes are <strong>identical</strong>.</p>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<body>
|
||||
<p>In each pair of silver boxes below, the two patterns must be identical.</p>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
א א is hebrew letter alef
|
||||
ת ת is hebrew letter tav
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
<body>
|
||||
<p>In each pair of silver boxes below, the two patterns must be identical.</p>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
א א is hebrew letter alef
|
||||
ת ת is hebrew letter tav
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
<body>
|
||||
<p>In each pair of silver boxes below, the two patterns must be identical.</p>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
א א is hebrew letter alef
|
||||
ת ת is hebrew letter tav
|
||||
-->
|
||||
|
|
@ -73,16 +73,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- line separator does not break bidi paragraph -->
|
||||
<!-- line separator does not break bidi paragraph -->
|
||||
<div class="set">
|
||||
<div class="test">
|
||||
<div class="pre">א + - × ÷ 
 + - × ÷ ת</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div><bdo dir="ltr"> ÷ × - + א</bdo></div>
|
||||
<div><bdo dir="ltr">ת ÷ × - + </bdo></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div><bdo dir="ltr"> ÷ × - + א</bdo></div>
|
||||
<div><bdo dir="ltr">ת ÷ × - + </bdo></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
PS 
 Paragraph separator
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>Test passes if the 2 lines are <strong>identical</strong>.</p>
|
||||
<p class="control">a b (c d).</p>
|
||||
|
||||
|
||||
<div>
|
||||
.(d c) b a
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -19,13 +19,13 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>Test passes if the 2 lines are <strong>identical</strong>.</p>
|
||||
<p>(a b א) c d</p>
|
||||
|
||||
|
||||
<div>
|
||||
c d (א a b)
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<p>Test passes if the 2 lines are <strong>identical</strong>.</p>
|
||||
<p>Readable</p>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Inline Direction and Bidirectionality (177 tests)</h2>
|
||||
<h2>Inline Direction and Bidirectionality (179 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>
|
||||
<!-- 34 tests -->
|
||||
<!-- 36 tests -->
|
||||
<tr id="direction-001-2.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="direction-001.htm">direction-001</a></strong></td>
|
||||
|
|
@ -1345,6 +1345,28 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="table-column-order-slr-007-2.1" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="table-column-order-slr-007.htm">table-column-order-slr-007</a></strong></td>
|
||||
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>'direction: rtl' - table columns order and sideways-lr
|
||||
<ul class="assert">
|
||||
<li>This test checks that a table with 'writing-mode' set to 'sideways-lr' and with 'direction' set to 'rtl' will have its column displayed from bottom (1st column) to top (last column). The inline base direction is still from top to bottom.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="table-column-order-srl-006-2.1" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="table-column-order-srl-006.htm">table-column-order-srl-006</a></strong></td>
|
||||
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>'direction: rtl' - table columns order and sideways-rl
|
||||
<ul class="assert">
|
||||
<li>This test checks that a table with 'writing-mode' set to 'sideways-rl' and with 'direction' set to 'rtl' will have its column displayed from bottom (1st column) to top (last column). The inline base direction is still from top to bottom.</li>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Inline-level Alignment (36 tests)</h2>
|
||||
<h2>Inline-level Alignment (34 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>
|
||||
<!-- 14 tests -->
|
||||
<!-- 10 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>
|
||||
|
|
@ -79,29 +79,7 @@
|
|||
<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 'mixed', then the alphabetical baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-baseline-slr-011-4.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<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>
|
||||
<li>When 'writing-mode' is 'sideways-lr', then the alphabetic baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -112,29 +90,7 @@
|
|||
<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>
|
||||
<li>When 'writing-mode' is 'sideways-rl', then the alphabetic baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -215,7 +171,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines">4.3 Atomic Inline Baselines</a></th></tr>
|
||||
<!-- 22 tests -->
|
||||
<!-- 24 tests -->
|
||||
<tr id="baseline-inline-non-replaced-002-4.3" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="baseline-inline-non-replaced-002.htm">baseline-inline-non-replaced-002</a></strong></td>
|
||||
|
|
@ -392,6 +348,28 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="inline-block-alignment-slr-009-4.3" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="inline-block-alignment-slr-009.htm">inline-block-alignment-slr-009</a></strong></td>
|
||||
<td><a href="reference/inline-block-alignment-slr-009-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>inline block alignment - alphabetical alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of inline-block baseline. When 'writing-mode' is 'sideways-lr', then the alphabetic baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="inline-block-alignment-srl-008-4.3" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="inline-block-alignment-srl-008.htm">inline-block-alignment-srl-008</a></strong></td>
|
||||
<td><a href="reference/inline-block-alignment-006-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>inline block alignment - alphabetical alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of inline-block baseline. When 'writing-mode' is 'sideways-rl', then the alphabetic baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="inline-replaced-vlr-005-4.3" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="inline-replaced-vlr-005.htm">inline-replaced-vlr-005</a></strong></td>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Abstract Box Layout (522 tests)</h2>
|
||||
<h2>Abstract Box Layout (538 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout">7.1 Principles of Layout in Vertical Writing Modes</a></th></tr>
|
||||
<!-- 358 tests -->
|
||||
<!-- 360 tests -->
|
||||
<tr id="abs-pos-non-replaced-icb-vlr-003-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="abs-pos-non-replaced-icb-vlr-003.htm">abs-pos-non-replaced-icb-vlr-003</a></strong></td>
|
||||
|
|
@ -3745,6 +3745,28 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="table-column-order-slr-007-7.1" class="ahem">
|
||||
<td>
|
||||
<a href="table-column-order-slr-007.htm">table-column-order-slr-007</a></td>
|
||||
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>'direction: rtl' - table columns order and sideways-lr
|
||||
<ul class="assert">
|
||||
<li>This test checks that a table with 'writing-mode' set to 'sideways-lr' and with 'direction' set to 'rtl' will have its column displayed from bottom (1st column) to top (last column). The inline base direction is still from top to bottom.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="table-column-order-srl-006-7.1" class="ahem">
|
||||
<td>
|
||||
<a href="table-column-order-srl-006.htm">table-column-order-srl-006</a></td>
|
||||
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>'direction: rtl' - table columns order and sideways-rl
|
||||
<ul class="assert">
|
||||
<li>This test checks that a table with 'writing-mode' set to 'sideways-rl' and with 'direction' set to 'rtl' will have its column displayed from bottom (1st column) to top (last column). The inline base direction is still from top to bottom.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-align-vlr-003-7.1" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="text-align-vlr-003.htm">text-align-vlr-003</a></strong></td>
|
||||
|
|
@ -4869,7 +4891,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.5">+</a>
|
||||
<a href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">7.5 Line-Relative Mappings</a></th></tr>
|
||||
<!-- 44 tests -->
|
||||
<!-- 58 tests -->
|
||||
<tr id="text-decoration-sideways-vlr-003-7.5" class="primary">
|
||||
<td><strong>
|
||||
<a href="text-decoration-sideways-vlr-003.htm">text-decoration-sideways-vlr-003</a></strong></td>
|
||||
|
|
@ -5156,6 +5178,160 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-slr-029-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-slr-029.htm">vertical-alignment-slr-029</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-008-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'top' and sideways-lr writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'vertical-align' is 'top', the physical left (logical top) edge of an inline non-replaced box is aligned with the physical left (logical top) edge of its line box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-slr-031-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-slr-031.htm">vertical-alignment-slr-031</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-006-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'text-top' and sideways-lr writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'vertical-align' is 'text-top', the physical left (logical top) edge of an inline non-replaced box is aligned with the left side (logical top) of parent's content area.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-slr-033-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-slr-033.htm">vertical-alignment-slr-033</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-004-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'text-bottom' and sideways-lr writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'vertical-align' is 'text-bottom', the physical right (logical bottom) edge of an inline non-replaced box is aligned with the right side (logical bottom) of parent's content area.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-slr-035-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-slr-035.htm">vertical-alignment-slr-035</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-002-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'bottom' and sideways-lr writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'vertical-align' is 'bottom', the physical right (logical bottom) edge of an inline non-replaced box is aligned with the physical right (logical bottom) edge of its line box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-slr-037-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-slr-037.htm">vertical-alignment-slr-037</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'super' and sideways-lr writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr' and 'vertical-align' is 'super', the baseline of the box is shifted to the left.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-slr-039-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-slr-039.htm">vertical-alignment-slr-039</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'sub' and sideways-lr writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr' and 'vertical-align' is 'sub', the baseline of the box is shifted to the right.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-slr-041-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-slr-041.htm">vertical-alignment-slr-041</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-slr-049-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'middle' and sideways-lr writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'text-orientation' is 'mixed', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the alphabetic baseline of the parent box plus half the x-height of the parent.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-srl-028-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-srl-028.htm">vertical-alignment-srl-028</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-002-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'top' and sideways-rl writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl', 'vertical-align' is 'top', the physical right (logical top) edge of an inline non-replaced box is aligned with the physical right (logical top) edge of its line box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-srl-030-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-srl-030.htm">vertical-alignment-srl-030</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-004-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'text-top' and sideways-rl writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl', 'vertical-align' is 'text-top', the physical right (logical top) edge of an inline non-replaced box is aligned with the right side (logical top) of parent's content area.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-srl-032-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-srl-032.htm">vertical-alignment-srl-032</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-006-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'text-bottom' and sideways-rl writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the left side (logical bottom) of parent's content area.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-srl-034-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-srl-034.htm">vertical-alignment-srl-034</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-008-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'bottom' and sideways-rl writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl', 'vertical-align' is 'bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the physical left (logical bottom) edge of its line box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-srl-036-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-srl-036.htm">vertical-alignment-srl-036</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'super' and sideways-rl writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl' and 'vertical-align' is 'super', the baseline of the box is shifted to the right.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-srl-038-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-srl-038.htm">vertical-alignment-srl-038</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'sub' and sideways-rl writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl' and 'vertical-align' is 'sub', the baseline of the box is shifted to the left.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-srl-040-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-srl-040.htm">vertical-alignment-srl-040</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-vrl-026-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'middle' and sideways-rl writing-mode
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl' and 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the alphabetic baseline of the parent box plus half the x-height of the parent.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-vlr-011-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-vlr-011.htm">vertical-alignment-vlr-011</a></strong></td>
|
||||
|
|
|
|||
|
|
@ -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 alignment - alphabetical alignment with vertical layout</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines">
|
||||
<link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes">
|
||||
<link rel="match" href="reference/inline-block-alignment-slr-009-ref.htm">
|
||||
<meta name="assert" content="This test checks the generation of inline-block baseline. When 'writing-mode' is 'sideways-lr', then the alphabetic baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#slr
|
||||
{
|
||||
color: teal;
|
||||
font: 60px/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
div#inline-block
|
||||
{
|
||||
display: inline-block;
|
||||
padding-left: 0.5em; /* computes to 60px */
|
||||
font-size: 2em; /* computes to 120px */
|
||||
/*
|
||||
such padding-left declaration is arbitrary and only serve to make the
|
||||
test a bit more challenging.
|
||||
*/
|
||||
}
|
||||
|
||||
span.block-descendant
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
span#fuchsia30
|
||||
{
|
||||
padding-right: 4em; /* computes to 120px */
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
/*
|
||||
such padding-right declaration is arbitrary and only serve to make the
|
||||
test a bit more challenging.
|
||||
*/
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="slr">p<div id="inline-block">
|
||||
<span class="block-descendant">B</span>
|
||||
<span class="block-descendant last-line-box">p</span>
|
||||
</div><span id="fuchsia30">p</span></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 alignment - alphabetical alignment with vertical layout</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-06 -->
|
||||
<link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines">
|
||||
<link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes">
|
||||
<link rel="match" href="reference/inline-block-alignment-006-ref.htm">
|
||||
<meta name="assert" content="This test checks the generation of inline-block baseline. When 'writing-mode' is 'sideways-rl', then the alphabetic baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#srl
|
||||
{
|
||||
color: fuchsia;
|
||||
font: 60px/1 Ahem; /* computes to 60px/60px */
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
div#inline-block
|
||||
{
|
||||
display: inline-block;
|
||||
padding-left: 0.5em; /* computes to 60px */
|
||||
font-size: 2em; /* computes to 120px */
|
||||
/*
|
||||
such padding-left declaration is arbitrary and only serve to make the
|
||||
test a bit more challenging.
|
||||
*/
|
||||
}
|
||||
|
||||
span.block-descendant
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
span#fuchsia30
|
||||
{
|
||||
padding-right: 4em; /* computes to 120px */
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
/*
|
||||
such padding-right declaration is arbitrary and only serve to make the
|
||||
test a bit more challenging.
|
||||
*/
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="srl">É<div id="inline-block">
|
||||
<span class="block-descendant">B</span>
|
||||
<span class="block-descendant last-line-box">É</span>
|
||||
</div><span id="fuchsia30">É</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,17 +8,17 @@
|
|||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style type="text/css">
|
||||
div > p
|
||||
div > p
|
||||
{
|
||||
background-color: #FFC;
|
||||
border: solid;
|
||||
color: black;
|
||||
margin: 1em;
|
||||
padding: 0.5em;
|
||||
padding: 0.5em;
|
||||
width: 17em;
|
||||
}
|
||||
|
||||
span
|
||||
|
||||
span
|
||||
{
|
||||
color: navy;
|
||||
line-height: 3em;
|
||||
|
|
|
|||
|
|
@ -8,15 +8,15 @@
|
|||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style type="text/css">
|
||||
div > p
|
||||
div > p
|
||||
{
|
||||
background-color: #FFC;
|
||||
border: solid;
|
||||
margin: 1em;
|
||||
padding: 0.5em;
|
||||
padding: 0.5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
span {line-height: 3em;}
|
||||
|
||||
span.top-left-bottom
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
|
||||
.navy {color: navy;}
|
||||
|
||||
|
||||
.orange {color: orange;}
|
||||
|
||||
span.top-right-bottom
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
<div>TEST<span>TEST</span></div>
|
||||
|
||||
<div>TEST<span>TEST</span></div>
|
||||
<div>TEST<span>TEST</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
{
|
||||
border-color: orange purple teal yellow;
|
||||
border-style: solid;
|
||||
border-width: 5px;
|
||||
border-width: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
{
|
||||
line-height: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
img {vertical-align: top;}
|
||||
img {vertical-align: top;}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@
|
|||
padding-right: 6.25em;
|
||||
text-align: right;
|
||||
width: 25em;
|
||||
}
|
||||
}
|
||||
|
||||
img {vertical-align: top;}
|
||||
img {vertical-align: top;}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<p>In each pair of silver boxes below, the two patterns must be identical.</p>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
א א is hebrew letter alef
|
||||
ת ת is hebrew letter tav
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<p>In each pair of silver boxes below, the two patterns must be identical.</p>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
א א is hebrew letter alef
|
||||
ת ת is hebrew letter tav
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<p>In each pair of silver boxes below, the two patterns must be identical.</p>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
א א is hebrew letter alef
|
||||
ת ת is hebrew letter tav
|
||||
-->
|
||||
|
|
@ -70,17 +70,17 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- line separator does not break bidi paragraph -->
|
||||
<!-- line separator does not break bidi paragraph -->
|
||||
<div class="set">
|
||||
<div class="control">
|
||||
<div><bdo dir="ltr"> ÷ × - + א</bdo></div>
|
||||
<div><bdo dir="ltr">ת ÷ × - + </bdo></div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div><bdo dir="ltr"> ÷ × - + א</bdo></div>
|
||||
<div><bdo dir="ltr">ת ÷ × - + </bdo></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div><bdo dir="ltr"> ÷ × - + א</bdo></div>
|
||||
<div><bdo dir="ltr">ת ÷ × - + </bdo></div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div><bdo dir="ltr"> ÷ × - + א</bdo></div>
|
||||
<div><bdo dir="ltr">ת ÷ × - + </bdo></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
img {vertical-align: top;}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
text-align: right;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
img {vertical-align: top;}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
img
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
padding-left: 156px; /* 60 px (padding-left) + 48px (the position difference of box) + 48px (ascent width) */
|
||||
}
|
||||
|
||||
img + br + img
|
||||
{
|
||||
padding-left: 156px; /* 60 px (padding-left) + 96px (ascent width)*/
|
||||
}
|
||||
|
||||
img + br + img + br + img
|
||||
{
|
||||
padding-left: 156px; /* 60 px (padding-left) + 72px (the position difference of box) + 24px (ascent width) */
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
|
||||
|
||||
<div>
|
||||
<img src="support/swatch-teal.png" width="12" height="60" alt="Image download support must be enabled"><br><!--
|
||||
--><img src="support/swatch-teal.png" width="144" height="120" alt="Image download support must be enabled"><br><!--
|
||||
--><img src="support/swatch-teal.png" width="6" height="30" alt="Image download support must be enabled">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,7 +3,7 @@ CSS Orientation Test
|
|||
|
||||
Overview
|
||||
----
|
||||
CSS Orientation Test are special-purpose OpenType fonts. This open source project provides all of the source files
|
||||
CSS Orientation Test are special-purpose OpenType fonts. This open source project provides all of the source files
|
||||
that were used to build these OpenType fonts by using the AFDKO *makeotf* tool.
|
||||
|
||||
Getting Involved
|
||||
|
|
@ -15,7 +15,7 @@ Building
|
|||
|
||||
Pre-built font binaries
|
||||
----
|
||||
The installable font resources (font binaries) are not part of the source files.
|
||||
The installable font resources (font binaries) are not part of the source files.
|
||||
They are available at https://github.com/adobe-fonts/css-orientation-test/
|
||||
The latest version of the font binaries is 1.005 (October 2015).
|
||||
|
||||
|
|
@ -23,17 +23,17 @@ The latest version of the font binaries is 1.005 (October 2015).
|
|||
Requirements
|
||||
----
|
||||
|
||||
For building binary font files from source, installation of the
|
||||
[Adobe Font Development Kit for OpenType](http://www.adobe.com/devnet/opentype/afdko.html) (AFDKO)
|
||||
For building binary font files from source, installation of the
|
||||
[Adobe Font Development Kit for OpenType](http://www.adobe.com/devnet/opentype/afdko.html) (AFDKO)
|
||||
is necessary. The AFDKO tools are widely used for font development today, and are part of most font editor applications.
|
||||
|
||||
Building the fonts
|
||||
----
|
||||
|
||||
The key to building OpenType fonts is *makeotf*, which is part of AFDKO. Information and usage instructions can be found
|
||||
The key to building OpenType fonts is *makeotf*, which is part of AFDKO. Information and usage instructions can be found
|
||||
by executing *makeotf -h*.
|
||||
|
||||
In this repository, all necessary files are in place for building the OpenType fonts. For example, build a binary OTF font
|
||||
In this repository, all necessary files are in place for building the OpenType fonts. For example, build a binary OTF font
|
||||
for the full-width version like this, which also includes a post-process for inserting a "stub" 'DSIG' table:
|
||||
|
||||
% makeotf -f cidfont.ps -r -ch UnicodeAll-UTF32-H
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>CSS Reftest Reference</title>
|
||||
<!-- reftest for text-orientation-014.xht -->
|
||||
<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com">
|
||||
<meta http-equiv="content-language" content="en">
|
||||
<meta http-equiv="content-language" content="en">
|
||||
<style type="text/css">
|
||||
.view_ahem
|
||||
{
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
color: blue;
|
||||
font: 20px/1 "Ahem";
|
||||
height: 3em;
|
||||
margin: 10px;
|
||||
margin: 10px;
|
||||
width: 3em;
|
||||
white-space: pre;
|
||||
}
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.view
|
||||
.view
|
||||
{
|
||||
border: 1px solid gray;
|
||||
font-size: 1.5em;
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
width: 3em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.control
|
||||
.control
|
||||
{
|
||||
text-combine-upright: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<body>
|
||||
|
||||
<p>Test passes if the letters below are in alphabetic order.</p>
|
||||
|
||||
|
||||
<div>AB C DEF GH IJ K</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
img
|
||||
{
|
||||
padding-left: 100px;
|
||||
vertical-align: top;
|
||||
}
|
||||
img + br + img
|
||||
{
|
||||
padding-left: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
|
||||
|
||||
<div>
|
||||
<img class="blue" src="support/swatch-blue.png" width="80" height="80" alt="Image download support must be enabled"><br><img class="blue" src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -20,13 +20,13 @@
|
|||
<p>The upper block is identical to the lower block including each character positions.</p>
|
||||
<div>adhjns
|
||||
i t
|
||||
be ko
|
||||
be ko
|
||||
c lqu
|
||||
f m v
|
||||
g r</div>
|
||||
<div>adhjns
|
||||
i t
|
||||
be ko
|
||||
be ko
|
||||
c lqu
|
||||
f m v
|
||||
g r</div>
|
||||
|
|
|
|||
|
|
@ -20,13 +20,13 @@
|
|||
<p>The upper block is identical to the lower block including each character positions.</p>
|
||||
<div>tomiea
|
||||
n b
|
||||
uq jf
|
||||
uq jf
|
||||
v kgc
|
||||
r l d
|
||||
s h</div>
|
||||
<div>tomiea
|
||||
n b
|
||||
uq jf
|
||||
uq jf
|
||||
v kgc
|
||||
r l d
|
||||
s h</div>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<p>Upper three blocks are identical to the lower three blocks including each character positions.</p>
|
||||
|
||||
<div>
|
||||
<p>ab cd
|
||||
<p>ab cd
|
||||
e fg h
|
||||
i jkl
|
||||
mn
|
||||
|
|
@ -38,7 +38,7 @@ cgk v
|
|||
fj qu
|
||||
b n
|
||||
aeimot</p>
|
||||
<p>ab cd
|
||||
<p>ab cd
|
||||
e fg h
|
||||
i jkl
|
||||
mn
|
||||
|
|
@ -47,7 +47,7 @@ t uv</p>
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<p>ab cd
|
||||
<p>ab cd
|
||||
e fg h
|
||||
i jkl
|
||||
mn
|
||||
|
|
@ -59,7 +59,7 @@ cgk v
|
|||
fj qu
|
||||
b n
|
||||
aeimot</p>
|
||||
<p>ab cd
|
||||
<p>ab cd
|
||||
e fg h
|
||||
i jkl
|
||||
mn
|
||||
|
|
|
|||
|
|
@ -4664,6 +4664,22 @@
|
|||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="inline-block-alignment-slr-009" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="inline block alignment - alphabetical alignment with vertical layout">
|
||||
<a href="inline-block-alignment-slr-009.htm">inline-block-alignment-slr-009</a></td>
|
||||
<td><a href="reference/inline-block-alignment-slr-009-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="inline-block-alignment-srl-008" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="inline block alignment - alphabetical alignment with vertical layout">
|
||||
<a href="inline-block-alignment-srl-008.htm">inline-block-alignment-srl-008</a></td>
|
||||
<td><a href="reference/inline-block-alignment-006-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="inline-replaced-vlr-003" class="image">
|
||||
<tr>
|
||||
<td rowspan="1" title="inline replaced element and 'vertical-lr'">
|
||||
|
|
@ -5544,6 +5560,22 @@
|
|||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="table-column-order-slr-007" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="'direction: rtl' - table columns order and sideways-lr">
|
||||
<a href="table-column-order-slr-007.htm">table-column-order-slr-007</a></td>
|
||||
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="table-column-order-srl-006" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="'direction: rtl' - table columns order and sideways-rl">
|
||||
<a href="table-column-order-srl-006.htm">table-column-order-srl-006</a></td>
|
||||
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="table-progression-slr-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="sideways-lr Table Row/Rowgroup/Cell Ordering">
|
||||
|
|
@ -5792,22 +5824,6 @@
|
|||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="text-baseline-slr-011" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="text baseline alignment - alphabetical alignment with vertical layout">
|
||||
<a href="text-baseline-slr-011.htm">text-baseline-slr-011</a></td>
|
||||
<td><a href="reference/text-baseline-slr-009-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="text-baseline-slr-013" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="text baseline alignment - alphabetical alignment with vertical layout">
|
||||
<a href="text-baseline-slr-013.htm">text-baseline-slr-013</a></td>
|
||||
<td><a href="reference/text-baseline-slr-009-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="text-baseline-srl-008" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="text baseline alignment - alphabetical alignment with vertical layout">
|
||||
|
|
@ -5816,22 +5832,6 @@
|
|||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="text-baseline-srl-010" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="text baseline alignment - alphabetical alignment with vertical layout">
|
||||
<a href="text-baseline-srl-010.htm">text-baseline-srl-010</a></td>
|
||||
<td><a href="reference/text-baseline-vrl-006-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="text-baseline-srl-012" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="text baseline alignment - alphabetical alignment with vertical layout">
|
||||
<a href="text-baseline-srl-012.htm">text-baseline-srl-012</a></td>
|
||||
<td><a href="reference/text-baseline-vrl-006-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="text-baseline-vlr-003" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="text baseline alignment - central alignment with vertical layout">
|
||||
|
|
@ -6360,6 +6360,86 @@
|
|||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-slr-029" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'top' and sideways-lr writing-mode">
|
||||
<a href="vertical-alignment-slr-029.htm">vertical-alignment-slr-029</a></td>
|
||||
<td><a href="reference/vertical-alignment-008-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-slr-031" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'text-top' and sideways-lr writing-mode">
|
||||
<a href="vertical-alignment-slr-031.htm">vertical-alignment-slr-031</a></td>
|
||||
<td><a href="reference/vertical-alignment-006-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-slr-033" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'text-bottom' and sideways-lr writing-mode">
|
||||
<a href="vertical-alignment-slr-033.htm">vertical-alignment-slr-033</a></td>
|
||||
<td><a href="reference/vertical-alignment-004-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-slr-035" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'bottom' and sideways-lr writing-mode">
|
||||
<a href="vertical-alignment-slr-035.htm">vertical-alignment-slr-035</a></td>
|
||||
<td><a href="reference/vertical-alignment-002-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-slr-041" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'middle' and sideways-lr writing-mode">
|
||||
<a href="vertical-alignment-slr-041.htm">vertical-alignment-slr-041</a></td>
|
||||
<td><a href="reference/vertical-alignment-slr-049-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-srl-028" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'top' and sideways-rl writing-mode">
|
||||
<a href="vertical-alignment-srl-028.htm">vertical-alignment-srl-028</a></td>
|
||||
<td><a href="reference/vertical-alignment-002-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-srl-030" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'text-top' and sideways-rl writing-mode">
|
||||
<a href="vertical-alignment-srl-030.htm">vertical-alignment-srl-030</a></td>
|
||||
<td><a href="reference/vertical-alignment-004-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-srl-032" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'text-bottom' and sideways-rl writing-mode">
|
||||
<a href="vertical-alignment-srl-032.htm">vertical-alignment-srl-032</a></td>
|
||||
<td><a href="reference/vertical-alignment-006-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-srl-034" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'bottom' and sideways-rl writing-mode">
|
||||
<a href="vertical-alignment-srl-034.htm">vertical-alignment-srl-034</a></td>
|
||||
<td><a href="reference/vertical-alignment-008-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-srl-040" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'middle' and sideways-rl writing-mode">
|
||||
<a href="vertical-alignment-srl-040.htm">vertical-alignment-srl-040</a></td>
|
||||
<td><a href="reference/vertical-alignment-vrl-026-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-vlr-023" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'middle' and vertical-lr writing-mode">
|
||||
|
|
|
|||
|
|
@ -579,6 +579,8 @@ inline-block-alignment-orthogonal-vlr-003.htm == reference/inline-block-alignmen
|
|||
inline-block-alignment-orthogonal-vlr-005.htm == reference/inline-block-alignment-orthogonal-vrl-002-ref.htm
|
||||
inline-block-alignment-orthogonal-vrl-002.htm == reference/inline-block-alignment-orthogonal-vrl-002-ref.htm
|
||||
inline-block-alignment-orthogonal-vrl-004.htm == reference/inline-block-alignment-orthogonal-vrl-002-ref.htm
|
||||
inline-block-alignment-slr-009.htm == reference/inline-block-alignment-slr-009-ref.htm
|
||||
inline-block-alignment-srl-008.htm == reference/inline-block-alignment-006-ref.htm
|
||||
inline-replaced-vlr-003.htm == reference/inline-replaced-vrl-002-ref.htm
|
||||
inline-replaced-vlr-005.htm == reference/inline-replaced-vrl-004-ref.htm
|
||||
inline-replaced-vrl-002.htm == reference/inline-replaced-vrl-002-ref.htm
|
||||
|
|
@ -689,6 +691,8 @@ table-column-order-002.htm == reference/block-flow-direction-001-ref.htm
|
|||
table-column-order-003.htm == reference/block-flow-direction-001-ref.htm
|
||||
table-column-order-004.htm == reference/block-flow-direction-001-ref.htm
|
||||
table-column-order-005.htm == reference/block-flow-direction-001-ref.htm
|
||||
table-column-order-slr-007.htm == reference/block-flow-direction-001-ref.htm
|
||||
table-column-order-srl-006.htm == reference/block-flow-direction-001-ref.htm
|
||||
table-progression-slr-001.htm == reference/table-progression-slr-001-ref.htm
|
||||
table-progression-slr-002.htm == reference/table-progression-002-ref.htm
|
||||
table-progression-srl-001.htm == reference/table-progression-001-ref.htm
|
||||
|
|
@ -720,11 +724,7 @@ text-align-vrl-014.htm == reference/direction-vrl-002-ref.htm
|
|||
text-align-vrl-016.htm == reference/direction-vrl-002-ref.htm
|
||||
text-align-vrl-018.htm == reference/direction-vrl-002-ref.htm
|
||||
text-baseline-slr-009.htm == reference/text-baseline-slr-009-ref.htm
|
||||
text-baseline-slr-011.htm == reference/text-baseline-slr-009-ref.htm
|
||||
text-baseline-slr-013.htm == reference/text-baseline-slr-009-ref.htm
|
||||
text-baseline-srl-008.htm == reference/text-baseline-vrl-006-ref.htm
|
||||
text-baseline-srl-010.htm == reference/text-baseline-vrl-006-ref.htm
|
||||
text-baseline-srl-012.htm == reference/text-baseline-vrl-006-ref.htm
|
||||
text-baseline-vlr-003.htm == reference/text-baseline-vrl-002-ref.htm
|
||||
text-baseline-vlr-005.htm == reference/text-baseline-vrl-002-ref.htm
|
||||
text-baseline-vlr-007.htm == reference/text-baseline-vrl-006-ref.htm
|
||||
|
|
@ -791,6 +791,16 @@ vertical-alignment-006.htm == reference/vertical-alignment-006-ref.htm
|
|||
vertical-alignment-007.htm == reference/vertical-alignment-006-ref.htm
|
||||
vertical-alignment-008.htm == reference/vertical-alignment-008-ref.htm
|
||||
vertical-alignment-009.htm == reference/vertical-alignment-008-ref.htm
|
||||
vertical-alignment-slr-029.htm == reference/vertical-alignment-008-ref.htm
|
||||
vertical-alignment-slr-031.htm == reference/vertical-alignment-006-ref.htm
|
||||
vertical-alignment-slr-033.htm == reference/vertical-alignment-004-ref.htm
|
||||
vertical-alignment-slr-035.htm == reference/vertical-alignment-002-ref.htm
|
||||
vertical-alignment-slr-041.htm == reference/vertical-alignment-slr-049-ref.htm
|
||||
vertical-alignment-srl-028.htm == reference/vertical-alignment-002-ref.htm
|
||||
vertical-alignment-srl-030.htm == reference/vertical-alignment-004-ref.htm
|
||||
vertical-alignment-srl-032.htm == reference/vertical-alignment-006-ref.htm
|
||||
vertical-alignment-srl-034.htm == reference/vertical-alignment-008-ref.htm
|
||||
vertical-alignment-srl-040.htm == reference/vertical-alignment-vrl-026-ref.htm
|
||||
vertical-alignment-vlr-023.htm == reference/vertical-alignment-vrl-022-ref.htm
|
||||
vertical-alignment-vlr-025.htm == reference/vertical-alignment-vrl-022-ref.htm
|
||||
vertical-alignment-vlr-027.htm == reference/vertical-alignment-vrl-026-ref.htm
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ CSS Orientation Test
|
|||
|
||||
Overview
|
||||
----
|
||||
CSS Orientation Test are special-purpose OpenType fonts. This open source project provides all of the source files
|
||||
CSS Orientation Test are special-purpose OpenType fonts. This open source project provides all of the source files
|
||||
that were used to build these OpenType fonts by using the AFDKO *makeotf* tool.
|
||||
|
||||
Getting Involved
|
||||
|
|
@ -15,7 +15,7 @@ Building
|
|||
|
||||
Pre-built font binaries
|
||||
----
|
||||
The installable font resources (font binaries) are not part of the source files.
|
||||
The installable font resources (font binaries) are not part of the source files.
|
||||
They are available at https://github.com/adobe-fonts/css-orientation-test/
|
||||
The latest version of the font binaries is 1.005 (October 2015).
|
||||
|
||||
|
|
@ -23,17 +23,17 @@ The latest version of the font binaries is 1.005 (October 2015).
|
|||
Requirements
|
||||
----
|
||||
|
||||
For building binary font files from source, installation of the
|
||||
[Adobe Font Development Kit for OpenType](http://www.adobe.com/devnet/opentype/afdko.html) (AFDKO)
|
||||
For building binary font files from source, installation of the
|
||||
[Adobe Font Development Kit for OpenType](http://www.adobe.com/devnet/opentype/afdko.html) (AFDKO)
|
||||
is necessary. The AFDKO tools are widely used for font development today, and are part of most font editor applications.
|
||||
|
||||
Building the fonts
|
||||
----
|
||||
|
||||
The key to building OpenType fonts is *makeotf*, which is part of AFDKO. Information and usage instructions can be found
|
||||
The key to building OpenType fonts is *makeotf*, which is part of AFDKO. Information and usage instructions can be found
|
||||
by executing *makeotf -h*.
|
||||
|
||||
In this repository, all necessary files are in place for building the OpenType fonts. For example, build a binary OTF font
|
||||
In this repository, all necessary files are in place for building the OpenType fonts. For example, build a binary OTF font
|
||||
for the full-width version like this, which also includes a post-process for inserting a "stub" 'DSIG' table:
|
||||
|
||||
% makeotf -f cidfont.ps -r -ch UnicodeAll-UTF32-H
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'direction: rtl' - table columns order and sideways-lr</title>
|
||||
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-01-25 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction" title="2.1 Specifying Directionality: the direction property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that a table with 'writing-mode' set to 'sideways-lr' and with 'direction' set to 'rtl' will have its column displayed from bottom (1st column) to top (last column). The inline base direction is still from top to bottom." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
table
|
||||
{
|
||||
background-color: blue;
|
||||
border-spacing: 0em;
|
||||
border: blue solid 1em;
|
||||
height: 7em;
|
||||
direction: rtl;
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
padding-bottom: 0em;
|
||||
padding-left: 1em;
|
||||
padding-right: 0em;
|
||||
padding-top: 0em;
|
||||
}
|
||||
|
||||
td.left-most-cell { padding-left: 0em; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table>
|
||||
<!-- The "P" -->
|
||||
<tr><td class="left-most-cell"><!-- bottommost column -->AA </td><td class="left-most-cell">BB C D E </td><td class="left-most-cell"><!-- topmost column -->FFF G H III</td></tr>
|
||||
|
||||
<!-- The "A" -->
|
||||
<tr><td><!-- bottommost column -->JJ KK</td><td>LL M N OO</td><td><!-- topmost column -->PPP Q R SSS</td></tr>
|
||||
|
||||
<!-- The left-most "S" -->
|
||||
<tr><td><!-- bottommost column --> T U V WW</td><td>X Y Z aa</td><td><!-- topmost column -->bbb c d e </td></tr>
|
||||
|
||||
<!-- The right-most "S" -->
|
||||
<tr><td><!-- bottommost column --> f g h ii</td><td>j k l mm</td><td><!-- topmost column -->nnn o q r </td></tr>
|
||||
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'direction: rtl' - table columns order and sideways-rl</title>
|
||||
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction" title="2.1 Specifying Directionality: the direction property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
|
||||
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that a table with 'writing-mode' set to 'sideways-rl' and with 'direction' set to 'rtl' will have its column displayed from bottom (1st column) to top (last column). The inline base direction is still from top to bottom." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
table
|
||||
{
|
||||
background-color: blue;
|
||||
border-spacing: 0em;
|
||||
border: blue solid 1em;
|
||||
height: 7em;
|
||||
direction: rtl;
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
padding-bottom: 0em;
|
||||
padding-left: 1em;
|
||||
padding-right: 0em;
|
||||
padding-top: 0em;
|
||||
}
|
||||
|
||||
td.left-most-cell { padding-left: 0em; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table>
|
||||
|
||||
<!-- The right-most "S" -->
|
||||
<tr><td><!-- bottommost column -->AA B C D</td><td>EE F G H </td><td><!-- topmost column -->J K L MMM</td></tr>
|
||||
|
||||
<!-- The left-most "S" -->
|
||||
<tr><td><!-- bottommost column -->NN O Q R</td><td>SS T U V </td><td><!-- topmost column -->W X Y ZZZ</td></tr>
|
||||
|
||||
<!-- The "A" -->
|
||||
<tr><td><!-- bottommost column -->aa bb</td><td>ee f g hh</td><td><!-- topmost column -->jjj k l mmm</td></tr>
|
||||
|
||||
<!-- The "P" -->
|
||||
<tr><td class="left-most-cell"><!-- bottommost column --> nn</td><td class="left-most-cell">r s t uu</td><td class="left-most-cell"><!-- topmost column -->vvv w x yyy</td></tr>
|
||||
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,17 +3,17 @@
|
|||
<head>
|
||||
<title>CSS Writing Modes Test: text baseline alignment - alphabetical alignment with vertical layout</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-05 -->
|
||||
<link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines">
|
||||
<link rel="match" href="reference/text-baseline-slr-009-ref.htm">
|
||||
<meta name="assert" content="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.">
|
||||
<meta name="assert" content="When 'writing-mode' is 'sideways-lr', then the alphabetic baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#slr-mixed
|
||||
div#slr
|
||||
{
|
||||
color: fuchsia;
|
||||
font: 60px/1.5 Ahem; /* computes to 60px/90px */
|
||||
writing-mode: sideways-lr;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
span#fuchsia120
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
<p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="slr-mixed"><span id="fuchsia30">É</span><span id="fuchsia120">É</span>É</div>
|
||||
<div id="slr"><span id="fuchsia30">É</span><span id="fuchsia120">É</span>É</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: text baseline alignment - alphabetical alignment with vertical layout</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines">
|
||||
<link rel="match" href="reference/text-baseline-slr-009-ref.htm">
|
||||
<meta name="assert" content="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.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#slr-upright
|
||||
{
|
||||
color: fuchsia;
|
||||
font: 60px/1.5 Ahem; /* computes to 60px/90px */
|
||||
writing-mode: sideways-lr;
|
||||
text-orientation: upright;
|
||||
}
|
||||
|
||||
span#fuchsia120
|
||||
{
|
||||
font-size: 2em; /* computes to 120px */
|
||||
}
|
||||
|
||||
span#fuchsia30
|
||||
{
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="slr-upright"><span id="fuchsia30">É</span><span id="fuchsia120">É</span>É</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: text baseline alignment - alphabetical alignment with vertical layout</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines">
|
||||
<link rel="match" href="reference/text-baseline-slr-009-ref.htm">
|
||||
<meta name="assert" content="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.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#slr-sideways
|
||||
{
|
||||
color: fuchsia;
|
||||
font: 60px/1.5 Ahem; /* computes to 60px/90px */
|
||||
writing-mode: sideways-lr;
|
||||
text-orientation: sideways;
|
||||
}
|
||||
|
||||
span#fuchsia120
|
||||
{
|
||||
font-size: 2em; /* computes to 120px */
|
||||
}
|
||||
|
||||
span#fuchsia30
|
||||
{
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="slr-sideways"><span id="fuchsia30">É</span><span id="fuchsia120">É</span>É</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,17 +3,17 @@
|
|||
<head>
|
||||
<title>CSS Writing Modes Test: text baseline alignment - alphabetical alignment with vertical layout</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-05 -->
|
||||
<link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines">
|
||||
<link rel="match" href="reference/text-baseline-vrl-006-ref.htm">
|
||||
<meta name="assert" content="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.">
|
||||
<meta name="assert" content="When 'writing-mode' is 'sideways-rl', then the alphabetic baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#srl-mixed
|
||||
div#srl
|
||||
{
|
||||
color: fuchsia;
|
||||
font: 60px/1.5 Ahem; /* computes to 60px/90px */
|
||||
writing-mode: sideways-rl;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
span#fuchsia120
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="srl-mixed">É<span id="fuchsia120">É</span><span id="fuchsia30">É</span></div>
|
||||
<div id="srl">É<span id="fuchsia120">É</span><span id="fuchsia30">É</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: text baseline alignment - alphabetical alignment with vertical layout</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines">
|
||||
<link rel="match" href="reference/text-baseline-vrl-006-ref.htm">
|
||||
<meta name="assert" content="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.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#srl-upright
|
||||
{
|
||||
color: fuchsia;
|
||||
font: 60px/1.5 Ahem; /* computes to 60px/90px */
|
||||
writing-mode: sideways-rl;
|
||||
text-orientation: upright;
|
||||
}
|
||||
|
||||
span#fuchsia120
|
||||
{
|
||||
font-size: 2em; /* computes to 120px */
|
||||
}
|
||||
|
||||
span#fuchsia30
|
||||
{
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="srl-upright">É<span id="fuchsia120">É</span><span id="fuchsia30">É</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: text baseline alignment - alphabetical alignment with vertical layout</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#text-baselines">
|
||||
<link rel="match" href="reference/text-baseline-vrl-006-ref.htm">
|
||||
<meta name="assert" content="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.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#srl-sideways
|
||||
{
|
||||
color: fuchsia;
|
||||
font: 60px/1.5 Ahem; /* computes to 60px/90px */
|
||||
writing-mode: sideways-rl;
|
||||
text-orientation: sideways;
|
||||
}
|
||||
|
||||
span#fuchsia120
|
||||
{
|
||||
font-size: 2em; /* computes to 120px */
|
||||
}
|
||||
|
||||
span#fuchsia30
|
||||
{
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="srl-sideways">É<span id="fuchsia120">É</span><span id="fuchsia30">É</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<tbody id="s2">
|
||||
<tr><th><a href="chapter-2.htm">Chapter 2 -
|
||||
Inline Direction and Bidirectionality</a></th>
|
||||
<td>(177 Tests)</td></tr>
|
||||
<td>(179 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s3">
|
||||
<tr><th><a href="chapter-3.htm">Chapter 3 -
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<tbody id="s4">
|
||||
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
||||
Inline-level Alignment</a></th>
|
||||
<td>(36 Tests)</td></tr>
|
||||
<td>(34 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s5">
|
||||
<tr><th><a href="chapter-5.htm">Chapter 5 -
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<tbody id="s7">
|
||||
<tr><th><a href="chapter-7.htm">Chapter 7 -
|
||||
Abstract Box Layout</a></th>
|
||||
<td>(522 Tests)</td></tr>
|
||||
<td>(538 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s8">
|
||||
<tr><th><a href="chapter-8.htm">Chapter 8 -
|
||||
|
|
|
|||
|
|
@ -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: vertical-align - 'top' and sideways-lr writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'vertical-align' is 'top', the physical left (logical top) edge of an inline non-replaced box is aligned with the physical left (logical top) edge of its line box.">
|
||||
<link rel="match" href="reference/vertical-alignment-008-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#slr
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
font: 60px/3 Ahem; /* computes to 60px/180px */
|
||||
color: blue;
|
||||
}
|
||||
|
||||
span#orange
|
||||
{
|
||||
font-size: 0.5em;
|
||||
color: orange;
|
||||
vertical-align: top;
|
||||
margin-top: -1em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the left edge of an blue square is aligned with the right edge of a orange square.</p>
|
||||
|
||||
<div id="slr">A<span id="orange">O</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'text-top' and sideways-lr writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'vertical-align' is 'text-top', the physical left (logical top) edge of an inline non-replaced box is aligned with the left side (logical top) of parent's content area.">
|
||||
<link rel="match" href="reference/vertical-alignment-006-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#slr
|
||||
{
|
||||
color: orange;
|
||||
font: 60px/3 Ahem; /* computes to 60px/180px */
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
span#orange30
|
||||
{
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>right edge</strong> of an irregular orange polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="slr">A<span id="orange30">O</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'text-bottom' and sideways-lr writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'vertical-align' is 'text-bottom', the physical right (logical bottom) edge of an inline non-replaced box is aligned with the right side (logical bottom) of parent's content area.">
|
||||
<link rel="match" href="reference/vertical-alignment-004-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#slr
|
||||
{
|
||||
color: orange;
|
||||
font: 60px/3 Ahem; /* computes to 60px/180px */
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
span#orange30
|
||||
{
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular orange polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="slr">A<span id="orange30">O</span></div>
|
||||
|
||||
</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: vertical-align - 'bottom' and sideways-lr writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'vertical-align' is 'bottom', the physical right (logical bottom) edge of an inline non-replaced box is aligned with the physical right (logical bottom) edge of its line box.">
|
||||
<link rel="match" href="reference/vertical-alignment-002-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#slr
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
font: 60px/3 Ahem; /* computes to 60px/180px */
|
||||
color: blue;
|
||||
}
|
||||
|
||||
span#orange
|
||||
{
|
||||
font-size: 0.5em;
|
||||
color: orange;
|
||||
vertical-align: bottom;
|
||||
margin-top: -1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the right edge of an blue square is aligned with the left edge of a orange square.</p>
|
||||
|
||||
<div id="slr">A<span id="orange">O</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'super' and sideways-lr writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr' and 'vertical-align' is 'super', the baseline of the box is shifted to the left.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#slr
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
font: 60px/3 Ahem; /* computes to 60px/180px */
|
||||
color: orange;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
vertical-align: super;
|
||||
color: blue;
|
||||
margin-top: -1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
|
||||
|
||||
<div id="slr">X<span>2</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'sub' and sideways-lr writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr' and 'vertical-align' is 'sub', the baseline of the box is shifted to the right.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#slr
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
font: 60px/3 Ahem; /* computes to 60px/180px */
|
||||
color: orange;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
vertical-align: sub;
|
||||
color: blue;
|
||||
margin-top: -1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
|
||||
|
||||
<div id="slr">O<span>2</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'middle' and sideways-lr writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-lr', 'text-orientation' is 'mixed', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the alphabetic baseline of the parent box plus half the x-height of the parent.">
|
||||
<link rel="match" href="reference/vertical-alignment-slr-049-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#slr
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
font: 100px/3 Ahem; /* computes to 100px/300px */
|
||||
color: blue;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
font-size: 0.8em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="slr-mixed">X<span>X</span></div>
|
||||
|
||||
</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: vertical-align - 'top' and sideways-rl writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl', 'vertical-align' is 'top', the physical right (logical top) edge of an inline non-replaced box is aligned with the physical right (logical top) edge of its line box.">
|
||||
<link rel="match" href="reference/vertical-alignment-002-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#srl
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
font: 60px/3 Ahem; /* computes to 60px/180px */
|
||||
color: blue;
|
||||
}
|
||||
|
||||
span#orange
|
||||
{
|
||||
font-size: 0.5em;
|
||||
color: orange;
|
||||
vertical-align: top;
|
||||
margin-top: -1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the right edge of an blue square is aligned with the left edge of a orange square.</p>
|
||||
|
||||
<div id="srl">A<span id="orange">O</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'text-top' and sideways-rl writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl', 'vertical-align' is 'text-top', the physical right (logical top) edge of an inline non-replaced box is aligned with the right side (logical top) of parent's content area.">
|
||||
<link rel="match" href="reference/vertical-alignment-004-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#srl
|
||||
{
|
||||
color: orange;
|
||||
font: 60px/3 Ahem; /* computes to 60px/180px */
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
span#orange30
|
||||
{
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular orange polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="srl">A<span id="orange30">O</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'text-bottom' and sideways-rl writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the left side (logical bottom) of parent's content area.">
|
||||
<link rel="match" href="reference/vertical-alignment-006-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#srl
|
||||
{
|
||||
color: orange;
|
||||
font: 60px/3 Ahem; /* computes to 60px/180px */
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
span#orange30
|
||||
{
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>right edge</strong> of an irregular orange polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="srl">A<span id="orange30">O</span></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: vertical-align - 'bottom' and sideways-rl writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl', 'vertical-align' is 'bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the physical left (logical bottom) edge of its line box.">
|
||||
<link rel="match" href="reference/vertical-alignment-008-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#srl
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
font: 60px/3 Ahem; /* computes to 60px/180px */
|
||||
color: blue;
|
||||
}
|
||||
|
||||
span#orange
|
||||
{
|
||||
font-size: 0.5em;
|
||||
color: orange;
|
||||
vertical-align: bottom;
|
||||
margin-top: -1em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the left edge of an blue square is aligned with the right edge of a orange square.</p>
|
||||
|
||||
<div id="srl">A<span id="orange">O</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'super' and sideways-rl writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl' and 'vertical-align' is 'super', the baseline of the box is shifted to the right.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#srl
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
font: 60px/3 Ahem; /* computes to 60px/180px */
|
||||
color: orange;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
vertical-align: super;
|
||||
color: blue;
|
||||
margin-top: -1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
|
||||
|
||||
<div id="srl">X<span>2</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'sub' and sideways-rl writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl' and 'vertical-align' is 'sub', the baseline of the box is shifted to the left.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#srl
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
font: 60px/3 Ahem; /* computes to 60px/180px */
|
||||
color: orange;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
vertical-align: sub;
|
||||
color: blue;
|
||||
margin-top: -1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
|
||||
|
||||
<div id="srl">O<span>2</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'middle' and sideways-rl writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'sideways-rl' and 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the alphabetic baseline of the parent box plus half the x-height of the parent.">
|
||||
<link rel="match" href="reference/vertical-alignment-vrl-026-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#srl
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
font: 100px/3 Ahem; /* computes to 100px/300px */
|
||||
color: blue;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
font-size: 0.8em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="srl">X<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
white-space: pre;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
|
||||
#test
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
|
|
@ -36,7 +36,7 @@ n oq r
|
|||
st uv</div>
|
||||
<div id="control">adhjns
|
||||
i t
|
||||
be ko
|
||||
be ko
|
||||
c lqu
|
||||
f m v
|
||||
g r</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
white-space: pre;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
|
||||
#test
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>The upper block is identical to the lower block including each character positions.</p>
|
||||
<div id="test">ab cd
|
||||
<div id="test">ab cd
|
||||
e fg h
|
||||
i jkl
|
||||
mn
|
||||
|
|
@ -36,7 +36,7 @@ o q rs
|
|||
t uv</div>
|
||||
<div id="control">tomiea
|
||||
n b
|
||||
uq jf
|
||||
uq jf
|
||||
v kgc
|
||||
r l d
|
||||
s h</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>CSS Test: writing-mode: vertical-rl - basic inline case</title>
|
||||
<link rel="author" title="Yoshifumi Kawai" href="mailto:kawai@est.co.jp">
|
||||
<link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" title="CSS3 Writing modes: 3.1. Block Flow Direction: the 'writing-mode' property" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
|
||||
<link rel="match" href="reference/writing-mode-vertical-rl-002-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
margin: 10px;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
|
||||
#test
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>The upper block is identical to the lower block including each character positions.</p>
|
||||
<div id="test">ab cd
|
||||
<div id="test">ab cd
|
||||
e fg h
|
||||
i jkl
|
||||
mn o q
|
||||
|
|
|
|||
|
|
@ -37,19 +37,19 @@
|
|||
<p>Upper three blocks are identical to the lower three blocks including each character positions.</p>
|
||||
|
||||
<div>
|
||||
<p>ab cd
|
||||
<p>ab cd
|
||||
e fg h
|
||||
i jkl
|
||||
mn
|
||||
o q rs
|
||||
t uv</p>
|
||||
<p id="test">ab cd
|
||||
<p id="test">ab cd
|
||||
e fg h
|
||||
i jkl
|
||||
mn
|
||||
o q rs
|
||||
t uv</p>
|
||||
<p>ab cd
|
||||
<p>ab cd
|
||||
e fg h
|
||||
i jkl
|
||||
mn
|
||||
|
|
@ -58,7 +58,7 @@ t uv</p>
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<p>ab cd
|
||||
<p>ab cd
|
||||
e fg h
|
||||
i jkl
|
||||
mn
|
||||
|
|
@ -70,7 +70,7 @@ cgk v
|
|||
fj qu
|
||||
b n
|
||||
aeimot</p>
|
||||
<p>ab cd
|
||||
<p>ab cd
|
||||
e fg h
|
||||
i jkl
|
||||
mn
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue