Update CSS tests to revision c68e4df16362489debde94340cc6f54945a72f2f

This commit is contained in:
Ms2ger 2015-11-17 10:00:53 +01:00
parent 32efe41299
commit 53608a60a4
1543 changed files with 42190 additions and 14617 deletions

View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
<h2>Abstract Box Layout (494 tests)</h2>
<h2>Abstract Box Layout (519 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>
<!-- 339 tests -->
<!-- 355 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>
@ -3469,6 +3469,138 @@
</ul>
</td>
</tr>
<tr id="line-box-height-vlr-003-7.1" class="primary">
<td><strong>
<a href="line-box-height-vlr-003.htm">line-box-height-vlr-003</a></strong></td>
<td><a href="reference/line-box-height-vlr-003-ref.htm">=</a> </td>
<td></td>
<td>line box height and border on non-replaced inline box (mixed)
<ul class="assert">
<li>This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'border-left' of inline box and transparent 'border-right' of inline box.</li>
</ul>
</td>
</tr>
<tr id="line-box-height-vlr-005-7.1" class="primary">
<td><strong>
<a href="line-box-height-vlr-005.htm">line-box-height-vlr-005</a></strong></td>
<td><a href="reference/line-box-height-vlr-003-ref.htm">=</a> </td>
<td></td>
<td>line box height and padding on non-replaced inline box (mixed)
<ul class="assert">
<li>This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box.</li>
</ul>
</td>
</tr>
<tr id="line-box-height-vlr-007-7.1" class="primary">
<td><strong>
<a href="line-box-height-vlr-007.htm">line-box-height-vlr-007</a></strong></td>
<td><a href="reference/line-box-height-vlr-007-ref.htm">=</a> </td>
<td></td>
<td>line box height and border on non-replaced inline box (sideways)
<ul class="assert">
<li>This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'border-left' of inline box and transparent 'border-right' of inline box.</li>
</ul>
</td>
</tr>
<tr id="line-box-height-vlr-009-7.1" class="primary">
<td><strong>
<a href="line-box-height-vlr-009.htm">line-box-height-vlr-009</a></strong></td>
<td><a href="reference/line-box-height-vlr-007-ref.htm">=</a> </td>
<td></td>
<td>line box height and padding on non-replaced inline box (sideways)
<ul class="assert">
<li>This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box.</li>
</ul>
</td>
</tr>
<tr id="line-box-height-vlr-011-7.1" class="primary">
<td><strong>
<a href="line-box-height-vlr-011.htm">line-box-height-vlr-011</a></strong></td>
<td><a href="reference/line-box-height-vlr-011-ref.htm">=</a> </td>
<td></td>
<td>line box height and border on non-replaced inline box (upright)
<ul class="assert">
<li>This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'border-left' of inline box and transparent 'border-right' of inline box.</li>
</ul>
</td>
</tr>
<tr id="line-box-height-vlr-013-7.1" class="primary">
<td><strong>
<a href="line-box-height-vlr-013.htm">line-box-height-vlr-013</a></strong></td>
<td><a href="reference/line-box-height-vlr-011-ref.htm">=</a> </td>
<td></td>
<td>line box height and padding on non-replaced inline box (upright)
<ul class="assert">
<li>This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box.</li>
</ul>
</td>
</tr>
<tr id="line-box-height-vrl-002-7.1" class="primary">
<td><strong>
<a href="line-box-height-vrl-002.htm">line-box-height-vrl-002</a></strong></td>
<td><a href="reference/line-box-height-vrl-002-ref.htm">=</a> </td>
<td></td>
<td>line box height and border on non-replaced inline box (mixed)
<ul class="assert">
<li>This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'border-left' of inline box and transparent 'border-right' of inline box.</li>
</ul>
</td>
</tr>
<tr id="line-box-height-vrl-004-7.1" class="primary">
<td><strong>
<a href="line-box-height-vrl-004.htm">line-box-height-vrl-004</a></strong></td>
<td><a href="reference/line-box-height-vrl-002-ref.htm">=</a> </td>
<td></td>
<td>line box height and padding on non-replaced inline box (mixed)
<ul class="assert">
<li>This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box.</li>
</ul>
</td>
</tr>
<tr id="line-box-height-vrl-006-7.1" class="primary">
<td><strong>
<a href="line-box-height-vrl-006.htm">line-box-height-vrl-006</a></strong></td>
<td><a href="reference/line-box-height-vrl-006-ref.htm">=</a> </td>
<td></td>
<td>line box height and border on non-replaced inline box (sideways)
<ul class="assert">
<li>This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'border-left' of inline box and transparent 'border-right' of inline box.</li>
</ul>
</td>
</tr>
<tr id="line-box-height-vrl-008-7.1" class="primary">
<td><strong>
<a href="line-box-height-vrl-008.htm">line-box-height-vrl-008</a></strong></td>
<td><a href="reference/line-box-height-vrl-006-ref.htm">=</a> </td>
<td></td>
<td>line box height and padding on non-replaced inline box (sideways)
<ul class="assert">
<li>This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box.</li>
</ul>
</td>
</tr>
<tr id="line-box-height-vrl-010-7.1" class="primary">
<td><strong>
<a href="line-box-height-vrl-010.htm">line-box-height-vrl-010</a></strong></td>
<td><a href="reference/line-box-height-vrl-010-ref.htm">=</a> </td>
<td></td>
<td>line box height and border on non-replaced inline box (upright)
<ul class="assert">
<li>This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'border-left' of inline box and transparent 'border-right' of inline box.</li>
</ul>
</td>
</tr>
<tr id="line-box-height-vrl-012-7.1" class="primary">
<td><strong>
<a href="line-box-height-vrl-012.htm">line-box-height-vrl-012</a></strong></td>
<td><a href="reference/line-box-height-vrl-010-ref.htm">=</a> </td>
<td></td>
<td>line box height and padding on non-replaced inline box (upright)
<ul class="assert">
<li>This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box.</li>
</ul>
</td>
</tr>
<tr id="margin-vlr-003-7.1" class="primary image">
<td><strong>
<a href="margin-vlr-003.htm">margin-vlr-003</a></strong></td>
@ -3491,6 +3623,38 @@
</ul>
</td>
</tr>
<tr id="outline-inline-slr-005-7.1" class="primary">
<td><strong>
<a href="outline-inline-slr-005.htm">outline-inline-slr-005</a></strong></td>
<td></td>
<td></td>
<td>outline layout and non-replaced inline in sideways-lr writing-mode
</td>
</tr>
<tr id="outline-inline-srl-004-7.1" class="primary">
<td><strong>
<a href="outline-inline-srl-004.htm">outline-inline-srl-004</a></strong></td>
<td></td>
<td></td>
<td>outline layout and non-replaced inline and sideways-rl writing-mode
</td>
</tr>
<tr id="outline-inline-vlr-003-7.1" class="primary">
<td><strong>
<a href="outline-inline-vlr-003.htm">outline-inline-vlr-003</a></strong></td>
<td></td>
<td></td>
<td>outline layout and non-replaced inline in vertical-lr writing-mode
</td>
</tr>
<tr id="outline-inline-vrl-002-7.1" class="primary">
<td><strong>
<a href="outline-inline-vrl-002.htm">outline-inline-vrl-002</a></strong></td>
<td></td>
<td></td>
<td>outline layout and non-replaced inline and vertical-rl writing-mode
</td>
</tr>
<tr id="padding-vlr-005-7.1" class="primary image">
<td><strong>
<a href="padding-vlr-005.htm">padding-vlr-005</a></strong></td>
@ -4681,7 +4845,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>
<!-- 35 tests -->
<!-- 44 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>
@ -4968,12 +5132,111 @@
</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>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'super' and vertical-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 'vertical-lr', 'text-orientation' is 'mixed', 'vertical-align' is 'super', the baseline of the box is shifted to the right.</li>
</ul>
</td>
</tr>
<tr id="vertical-alignment-vlr-013-7.5" class="primary ahem">
<td><strong>
<a href="vertical-alignment-vlr-013.htm">vertical-alignment-vlr-013</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'super' and vertical-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 'vertical-lr', 'text-orientation' is 'upright', 'vertical-align' is 'super', the baseline of the box is shifted to the right.</li>
</ul>
</td>
</tr>
<tr id="vertical-alignment-vlr-015-7.5" class="primary ahem">
<td><strong>
<a href="vertical-alignment-vlr-015.htm">vertical-alignment-vlr-015</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'super' and vertical-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 'vertical-lr', 'text-orientation' is 'sideways', 'vertical-align' is 'super', the baseline of the box is shifted to the right.</li>
</ul>
</td>
</tr>
<tr id="vertical-alignment-vlr-017-7.5" class="primary ahem">
<td><strong>
<a href="vertical-alignment-vlr-017.htm">vertical-alignment-vlr-017</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'sub' and vertical-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 'vertical-lr', 'text-orientation' is 'mixed', 'vertical-align' is 'sub', the baseline of the box is shifted to the left.</li>
</ul>
</td>
</tr>
<tr id="vertical-alignment-vlr-019-7.5" class="primary ahem">
<td><strong>
<a href="vertical-alignment-vlr-019.htm">vertical-alignment-vlr-019</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'sub' and vertical-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 'vertical-lr', 'text-orientation' is 'upright', 'vertical-align' is 'sub', the baseline of the box is shifted to the left.</li>
</ul>
</td>
</tr>
<tr id="vertical-alignment-vlr-021-7.5" class="primary ahem">
<td><strong>
<a href="vertical-alignment-vlr-021.htm">vertical-alignment-vlr-021</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'sub' and vertical-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 'vertical-lr', 'text-orientation' is 'sideways', 'vertical-align' is 'sub', the baseline of the box is shifted to the left.</li>
</ul>
</td>
</tr>
<tr id="vertical-alignment-vlr-023-7.5" class="primary ahem">
<td><strong>
<a href="vertical-alignment-vlr-023.htm">vertical-alignment-vlr-023</a></strong></td>
<td><a href="reference/vertical-alignment-vrl-022-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'middle' and vertical-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 'vertical-lr', 'text-orientation' is 'upright', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent.</li>
</ul>
</td>
</tr>
<tr id="vertical-alignment-vlr-025-7.5" class="primary ahem">
<td><strong>
<a href="vertical-alignment-vlr-025.htm">vertical-alignment-vlr-025</a></strong></td>
<td><a href="reference/vertical-alignment-vrl-022-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'middle' and vertical-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 'vertical-lr', 'text-orientation' is 'mixed', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent.</li>
</ul>
</td>
</tr>
<tr id="vertical-alignment-vlr-027-7.5" class="primary ahem">
<td><strong>
<a href="vertical-alignment-vlr-027.htm">vertical-alignment-vlr-027</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 vertical-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 'vertical-lr', 'text-orientation' is 'sideways', '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-vrl-010-7.5" class="primary ahem">
<td><strong>
<a href="vertical-alignment-vrl-010.htm">vertical-alignment-vrl-010</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'top' and vertical-rl writing-mode
<td>vertical-align - 'super' and vertical-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 'vertical-rl', 'text-orientation' is 'mixed', 'vertical-align' is 'super', the baseline of the box is shifted to the right.</li>
</ul>
@ -4984,7 +5247,7 @@
<a href="vertical-alignment-vrl-012.htm">vertical-alignment-vrl-012</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'top' and vertical-rl writing-mode
<td>vertical-align - 'super' and vertical-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 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'super', the baseline of the box is shifted to the right.</li>
</ul>
@ -4995,7 +5258,7 @@
<a href="vertical-alignment-vrl-014.htm">vertical-alignment-vrl-014</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'top' and vertical-rl writing-mode
<td>vertical-align - 'super' and vertical-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 'vertical-rl', 'text-orientation' is 'sideways', 'vertical-align' is 'super', the baseline of the box is shifted to the right.</li>
</ul>
@ -5006,7 +5269,7 @@
<a href="vertical-alignment-vrl-016.htm">vertical-alignment-vrl-016</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'top' and vertical-rl writing-mode
<td>vertical-align - 'sub' and vertical-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 'vertical-rl', 'text-orientation' is 'mixed', 'vertical-align' is 'sub', the baseline of the box is shifted to the left.</li>
</ul>
@ -5017,7 +5280,7 @@
<a href="vertical-alignment-vrl-018.htm">vertical-alignment-vrl-018</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'top' and vertical-rl writing-mode
<td>vertical-align - 'sub' and vertical-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 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'sub', the baseline of the box is shifted to the left.</li>
</ul>
@ -5028,7 +5291,7 @@
<a href="vertical-alignment-vrl-020.htm">vertical-alignment-vrl-020</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'top' and vertical-rl writing-mode
<td>vertical-align - 'sub' and vertical-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 'vertical-rl', 'text-orientation' is 'sideways', 'vertical-align' is 'sub', the baseline of the box is shifted to the left.</li>
</ul>
@ -5039,7 +5302,7 @@
<a href="vertical-alignment-vrl-022.htm">vertical-alignment-vrl-022</a></strong></td>
<td><a href="reference/vertical-alignment-vrl-022-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'top' and vertical-rl writing-mode
<td>vertical-align - 'middle' and vertical-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 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent.</li>
</ul>
@ -5050,9 +5313,9 @@
<a href="vertical-alignment-vrl-024.htm">vertical-alignment-vrl-024</a></strong></td>
<td><a href="reference/vertical-alignment-vrl-022-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>vertical-align - 'top' and vertical-rl writing-mode
<td>vertical-align - 'middle' and vertical-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 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent.</li>
<li>This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'mixed', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent.</li>
</ul>
</td>
</tr>
@ -5061,9 +5324,9 @@
<a href="vertical-alignment-vrl-026.htm">vertical-alignment-vrl-026</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 - 'top' and vertical-rl writing-mode
<td>vertical-align - 'middle' and vertical-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 'vertical-rl', 'text-orientation' is 'sideways, 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent.</li>
<li>This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'sideways, '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>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: line box height and border on non-replaced inline box (mixed)</title>
<!--
Test inspired by
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading">
<link rel="match" href="reference/line-box-height-vlr-003-ref.htm">
<meta content="" name="flags">
<meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-lr;
text-orientation: mixed;
}
span#border-left
{
border-left: 1.5em solid transparent;
}
span#border-right
{
border-right: 1.5em solid transparent;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div id="test">12<span id="border-left">34</span><span id="border-right">56</span></div>
<div id="reference">123456</div>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: line box height and padding on non-replaced inline box (mixed)</title>
<!--
Test inspired by
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading">
<link rel="match" href="reference/line-box-height-vlr-003-ref.htm">
<meta content="" name="flags">
<meta content="This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box." name="assert">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-lr;
text-orientation: mixed;
}
span#padding-left
{
padding-left: 1.5em;
}
span#padding-right
{
padding-right: 1.5em;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div id="test">12<span id="padding-left">34</span><span id="padding-right">56</span></div>
<div id="reference">123456</div>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: line box height and border on non-replaced inline box (sideways)</title>
<!--
Test inspired by
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading">
<link rel="match" href="reference/line-box-height-vlr-007-ref.htm">
<meta content="" name="flags">
<meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-lr;
text-orientation: sideways;
}
span#border-left
{
border-left: 1.5em solid transparent;
}
span#border-right
{
border-right: 1.5em solid transparent;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div id="test">12<span id="border-left">34</span><span id="border-right">56</span></div>
<div id="reference">123456</div>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: line box height and padding on non-replaced inline box (sideways)</title>
<!--
Test inspired by
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading">
<link rel="match" href="reference/line-box-height-vlr-007-ref.htm">
<meta content="" name="flags">
<meta content="This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box." name="assert">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-lr;
text-orientation: sideways;
}
span#padding-left
{
padding-left: 1.5em;
}
span#padding-right
{
padding-right: 1.5em;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div id="test">12<span id="padding-left">34</span><span id="padding-right">56</span></div>
<div id="reference">123456</div>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: line box height and border on non-replaced inline box (upright)</title>
<!--
Test inspired by
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading">
<link rel="match" href="reference/line-box-height-vlr-011-ref.htm">
<meta content="" name="flags">
<meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-lr;
text-orientation: upright;
}
span#border-left
{
border-left: 1.5em solid transparent;
}
span#border-right
{
border-right: 1.5em solid transparent;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" upright. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div id="test">12<span id="border-left">34</span><span id="border-right">56</span></div>
<div id="reference">123456</div>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: line box height and padding on non-replaced inline box (upright)</title>
<!--
Test inspired by
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading">
<link rel="match" href="reference/line-box-height-vlr-011-ref.htm">
<meta content="" name="flags">
<meta content="This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box." name="assert">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-lr;
text-orientation: upright;
}
span#padding-left
{
padding-left: 1.5em;
}
span#padding-right
{
padding-right: 1.5em;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" upright. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div id="test">12<span id="padding-left">34</span><span id="padding-right">56</span></div>
<div id="reference">123456</div>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: line box height and border on non-replaced inline box (mixed)</title>
<!--
Test inspired by
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading">
<link rel="match" href="reference/line-box-height-vrl-002-ref.htm">
<meta content="" name="flags">
<meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-rl;
text-orientation: mixed;
}
span#border-left
{
border-left: 1.5em solid transparent;
}
span#border-right
{
border-right: 1.5em solid transparent;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div id="test">12<span id="border-left">34</span><span id="border-right">56</span></div>
<div id="reference">123456</div>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: line box height and padding on non-replaced inline box (mixed)</title>
<!--
Test inspired by
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading">
<link rel="match" href="reference/line-box-height-vrl-002-ref.htm">
<meta content="" name="flags">
<meta content="This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box." name="assert">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-rl;
text-orientation: mixed;
}
span#padding-left
{
padding-left: 1.5em;
}
span#padding-right
{
padding-right: 1.5em;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div id="test">12<span id="padding-left">34</span><span id="padding-right">56</span></div>
<div id="reference">123456</div>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: line box height and border on non-replaced inline box (sideways)</title>
<!--
Test inspired by
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading">
<link rel="match" href="reference/line-box-height-vrl-006-ref.htm">
<meta content="" name="flags">
<meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-rl;
text-orientation: sideways;
}
span#border-left
{
border-left: 1.5em solid transparent;
}
span#border-right
{
border-right: 1.5em solid transparent;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div id="test">12<span id="border-left">34</span><span id="border-right">56</span></div>
<div id="reference">123456</div>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: line box height and padding on non-replaced inline box (sideways)</title>
<!--
Test inspired by
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading">
<link rel="match" href="reference/line-box-height-vrl-006-ref.htm">
<meta content="" name="flags">
<meta content="This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box." name="assert">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-rl;
text-orientation: sideways;
}
span#padding-left
{
padding-left: 1.5em;
}
span#padding-right
{
padding-right: 1.5em;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div id="test">12<span id="padding-left">34</span><span id="padding-right">56</span></div>
<div id="reference">123456</div>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: line box height and border on non-replaced inline box (upright)</title>
<!--
Test inspired by
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading">
<link rel="match" href="reference/line-box-height-vrl-010-ref.htm">
<meta content="" name="flags">
<meta content="This test checks that a line box height does not increase because an inline non-replaced box has a border. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'border-left' of inline box and transparent 'border-right' of inline box." name="assert">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-rl;
text-orientation: upright;
}
span#border-left
{
border-left: 1.5em solid transparent;
}
span#border-right
{
border-right: 1.5em solid transparent;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" upright. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div id="test">12<span id="border-left">34</span><span id="border-right">56</span></div>
<div id="reference">123456</div>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: line box height and padding on non-replaced inline box (upright)</title>
<!--
Test inspired by
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8.1 Leading and half-leading">
<link rel="match" href="reference/line-box-height-vrl-010-ref.htm">
<meta content="" name="flags">
<meta content="This test checks that a line box height does not increase because an inline non-replaced box has a padding. In this test, the '34' inline box and the '56' inline box should be lined up with its inline '12' sibling. The line box height, enclosed by the blue border should not grow to accomodate transparent 'padding-left' of inline box and transparent 'padding-right' of inline box." name="assert">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-rl;
text-orientation: upright;
}
span#padding-left
{
padding-left: 1.5em;
}
span#padding-right
{
padding-right: 1.5em;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" upright. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div id="test">12<span id="padding-left">34</span><span id="padding-right">56</span></div>
<div id="reference">123456</div>
</body>
</html>

View file

@ -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: outline layout and non-replaced inline in sideways-lr writing-mode</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout">
<link rel="help" title="18.4 Dynamic outlines: the 'outline' property" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines">
<meta content="" name="flags">
<style type="text/css">
div
{
height: 200px;
writing-mode: sideways-lr;
}
span
{
outline: blue solid 2px;
}
</style>
</head>
<body>
<p>Test passes if a blue border neatly encloses the words "foo bar" which is inside a latin text rotated 90° counter-clockwise.</p>
<div>Lorem ipsum dolor sit amet, <span>foo bar</span> consecteteur adipiscing elit urna elit.</div>
</body>
</html>

View file

@ -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: outline layout and non-replaced inline and sideways-rl writing-mode</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout">
<link rel="help" title="18.4 Dynamic outlines: the 'outline' property" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines">
<meta content="" name="flags">
<style type="text/css">
div
{
height: 200px;
writing-mode: sideways-rl;
}
span
{
outline: blue solid 2px;
}
</style>
</head>
<body>
<p>Test passes if a blue border neatly encloses the words "foo bar" which is inside a latin text rotated 90° clockwise.</p>
<div>Lorem ipsum dolor sit amet, <span>foo bar</span> consecteteur adipiscing elit urna elit.</div>
</body>
</html>

View file

@ -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: outline layout and non-replaced inline in vertical-lr writing-mode</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout">
<link rel="help" title="18.4 Dynamic outlines: the 'outline' property" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines">
<meta content="" name="flags">
<style type="text/css">
div
{
height: 200px;
writing-mode: vertical-lr;
}
span
{
outline: blue solid 2px;
}
</style>
</head>
<body>
<p>Test passes if a blue border neatly encloses the words "foo bar" which is inside a latin text rotated 90° clockwise.</p>
<div>Lorem ipsum dolor sit amet, <span>foo bar</span> consecteteur adipiscing elit urna elit.</div>
</body>
</html>

View file

@ -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: outline layout and non-replaced inline and vertical-rl writing-mode</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout">
<link rel="help" title="18.4 Dynamic outlines: the 'outline' property" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines">
<meta content="" name="flags">
<style type="text/css">
div
{
height: 200px;
writing-mode: vertical-rl;
}
span
{
outline: blue solid 2px;
}
</style>
</head>
<body>
<p>Test passes if a blue border neatly encloses the words "foo bar" which is inside a latin text rotated 90° clockwise.</p>
<div>Lorem ipsum dolor sit amet, <span>foo bar</span> consecteteur adipiscing elit urna elit.</div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<meta content="" name="flags">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-lr;
text-orientation: mixed;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div>123456</div>
<div>123456</div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<meta content="" name="flags">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-lr;
text-orientation: sideways;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div>123456</div>
<div>123456</div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<meta content="" name="flags">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-lr;
text-orientation: upright;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" upright. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div>123456</div>
<div>123456</div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<meta content="" name="flags">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div>123456</div>
<div>123456</div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<meta content="" name="flags">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-rl;
text-orientation: sideways;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div>123456</div>
<div>123456</div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<meta content="" name="flags">
<style type="text/css">
body
{
margin-left: 32px;
}
div
{
border: blue solid 2px;
font-size: 32px;
margin: 1em;
writing-mode: vertical-rl;
text-orientation: upright;
}
</style>
</head>
<body>
<p>Test passes if there are 2 identical blue rectangles with "123456" upright. The size of each blue rectangles must be identical and the two "123456" numbers must be enclosed by the two blue borders.</p>
<div>123456</div>
<div>123456</div>
</body>
</html>

View file

@ -3,6 +3,7 @@
<head>
<title>CSS Reftest Reference</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-10-26 -->
<meta name="flags" content="image">
<style type="text/css">
img

View file

@ -3,6 +3,7 @@
<head>
<title>CSS Reftest Reference</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-10-26 -->
<meta name="flags" content="image">
<style type="text/css">
img
@ -12,7 +13,7 @@
}
img + br + img
{
padding-left: 120px; /* 60 px (padding-left) + 12 px (the position of small blue box)*/
padding-left: 120px;
}
</style>

View file

@ -4680,6 +4680,102 @@
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="line-box-height-vlr-003" class="">
<tr>
<td rowspan="1" title="line box height and border on non-replaced inline box (mixed)">
<a href="line-box-height-vlr-003.htm">line-box-height-vlr-003</a></td>
<td><a href="reference/line-box-height-vlr-003-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="line-box-height-vlr-005" class="">
<tr>
<td rowspan="1" title="line box height and padding on non-replaced inline box (mixed)">
<a href="line-box-height-vlr-005.htm">line-box-height-vlr-005</a></td>
<td><a href="reference/line-box-height-vlr-003-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="line-box-height-vlr-007" class="">
<tr>
<td rowspan="1" title="line box height and border on non-replaced inline box (sideways)">
<a href="line-box-height-vlr-007.htm">line-box-height-vlr-007</a></td>
<td><a href="reference/line-box-height-vlr-007-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="line-box-height-vlr-009" class="">
<tr>
<td rowspan="1" title="line box height and padding on non-replaced inline box (sideways)">
<a href="line-box-height-vlr-009.htm">line-box-height-vlr-009</a></td>
<td><a href="reference/line-box-height-vlr-007-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="line-box-height-vlr-011" class="">
<tr>
<td rowspan="1" title="line box height and border on non-replaced inline box (upright)">
<a href="line-box-height-vlr-011.htm">line-box-height-vlr-011</a></td>
<td><a href="reference/line-box-height-vlr-011-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="line-box-height-vlr-013" class="">
<tr>
<td rowspan="1" title="line box height and padding on non-replaced inline box (upright)">
<a href="line-box-height-vlr-013.htm">line-box-height-vlr-013</a></td>
<td><a href="reference/line-box-height-vlr-011-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="line-box-height-vrl-002" class="">
<tr>
<td rowspan="1" title="line box height and border on non-replaced inline box (mixed)">
<a href="line-box-height-vrl-002.htm">line-box-height-vrl-002</a></td>
<td><a href="reference/line-box-height-vrl-002-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="line-box-height-vrl-004" class="">
<tr>
<td rowspan="1" title="line box height and padding on non-replaced inline box (mixed)">
<a href="line-box-height-vrl-004.htm">line-box-height-vrl-004</a></td>
<td><a href="reference/line-box-height-vrl-002-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="line-box-height-vrl-006" class="">
<tr>
<td rowspan="1" title="line box height and border on non-replaced inline box (sideways)">
<a href="line-box-height-vrl-006.htm">line-box-height-vrl-006</a></td>
<td><a href="reference/line-box-height-vrl-006-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="line-box-height-vrl-008" class="">
<tr>
<td rowspan="1" title="line box height and padding on non-replaced inline box (sideways)">
<a href="line-box-height-vrl-008.htm">line-box-height-vrl-008</a></td>
<td><a href="reference/line-box-height-vrl-006-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="line-box-height-vrl-010" class="">
<tr>
<td rowspan="1" title="line box height and border on non-replaced inline box (upright)">
<a href="line-box-height-vrl-010.htm">line-box-height-vrl-010</a></td>
<td><a href="reference/line-box-height-vrl-010-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="line-box-height-vrl-012" class="">
<tr>
<td rowspan="1" title="line box height and padding on non-replaced inline box (upright)">
<a href="line-box-height-vrl-012.htm">line-box-height-vrl-012</a></td>
<td><a href="reference/line-box-height-vrl-010-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="margin-collapse-vlr-003" class="ahem image">
<tr>
<td rowspan="1" title="'vertical-lr' and margin collapsing - maximum of 2 adjoining margins">
@ -5784,9 +5880,33 @@
<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">
<a href="vertical-alignment-vlr-023.htm">vertical-alignment-vlr-023</a></td>
<td><a href="reference/vertical-alignment-vrl-022-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="vertical-alignment-vlr-025" class="ahem">
<tr>
<td rowspan="1" title="vertical-align - 'middle' and vertical-lr writing-mode">
<a href="vertical-alignment-vlr-025.htm">vertical-alignment-vlr-025</a></td>
<td><a href="reference/vertical-alignment-vrl-022-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="vertical-alignment-vlr-027" class="ahem">
<tr>
<td rowspan="1" title="vertical-align - 'middle' and vertical-lr writing-mode">
<a href="vertical-alignment-vlr-027.htm">vertical-alignment-vlr-027</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-vrl-022" class="ahem">
<tr>
<td rowspan="1" title="vertical-align - 'top' and vertical-rl writing-mode">
<td rowspan="1" title="vertical-align - 'middle' and vertical-rl writing-mode">
<a href="vertical-alignment-vrl-022.htm">vertical-alignment-vrl-022</a></td>
<td><a href="reference/vertical-alignment-vrl-022-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
@ -5794,7 +5914,7 @@
</tbody>
<tbody id="vertical-alignment-vrl-024" class="ahem">
<tr>
<td rowspan="1" title="vertical-align - 'top' and vertical-rl writing-mode">
<td rowspan="1" title="vertical-align - 'middle' and vertical-rl writing-mode">
<a href="vertical-alignment-vrl-024.htm">vertical-alignment-vrl-024</a></td>
<td><a href="reference/vertical-alignment-vrl-022-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
@ -5802,7 +5922,7 @@
</tbody>
<tbody id="vertical-alignment-vrl-026" class="ahem">
<tr>
<td rowspan="1" title="vertical-align - 'top' and vertical-rl writing-mode">
<td rowspan="1" title="vertical-align - 'middle' and vertical-rl writing-mode">
<a href="vertical-alignment-vrl-026.htm">vertical-alignment-vrl-026</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>

View file

@ -581,6 +581,18 @@ line-box-direction-017.htm == reference/block-flow-direction-001-ref.htm
line-box-direction-018.htm == reference/block-flow-direction-001-ref.htm
line-box-direction-019.htm == reference/block-flow-direction-001-ref.htm
line-box-direction-020.htm == reference/block-flow-direction-001-ref.htm
line-box-height-vlr-003.htm == reference/line-box-height-vlr-003-ref.htm
line-box-height-vlr-005.htm == reference/line-box-height-vlr-003-ref.htm
line-box-height-vlr-007.htm == reference/line-box-height-vlr-007-ref.htm
line-box-height-vlr-009.htm == reference/line-box-height-vlr-007-ref.htm
line-box-height-vlr-011.htm == reference/line-box-height-vlr-011-ref.htm
line-box-height-vlr-013.htm == reference/line-box-height-vlr-011-ref.htm
line-box-height-vrl-002.htm == reference/line-box-height-vrl-002-ref.htm
line-box-height-vrl-004.htm == reference/line-box-height-vrl-002-ref.htm
line-box-height-vrl-006.htm == reference/line-box-height-vrl-006-ref.htm
line-box-height-vrl-008.htm == reference/line-box-height-vrl-006-ref.htm
line-box-height-vrl-010.htm == reference/line-box-height-vrl-010-ref.htm
line-box-height-vrl-012.htm == reference/line-box-height-vrl-010-ref.htm
margin-collapse-vlr-003.htm == reference/ref-filled-green-100px-square.htm
margin-collapse-vlr-009.htm == reference/ref-filled-green-100px-square.htm
margin-collapse-vlr-011.htm == reference/ref-filled-green-100px-square.htm
@ -719,6 +731,9 @@ 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-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
vertical-alignment-vrl-022.htm == reference/vertical-alignment-vrl-022-ref.htm
vertical-alignment-vrl-024.htm == reference/vertical-alignment-vrl-022-ref.htm
vertical-alignment-vrl-026.htm == reference/vertical-alignment-vrl-026-ref.htm

View file

@ -52,7 +52,7 @@
<tbody id="s7">
<tr><th><a href="chapter-7.htm">Chapter 7 -
Abstract Box Layout</a></th>
<td>(494 Tests)</td></tr>
<td>(519 Tests)</td></tr>
</tbody>
<tbody id="s8">
<tr><th><a href="chapter-8.htm">Chapter 8 -

View file

@ -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 - 'super' and vertical-lr writing-mode</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-10-29 -->
<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 'vertical-lr', 'text-orientation' is 'mixed', 'vertical-align' is 'super', the baseline of the box is shifted to the right.">
<meta name="flags" content="ahem">
<style type="text/css">
div#lr-mixed
{
writing-mode: vertical-lr;
font: 60px/3 Ahem; /* computes to 60px/180px */
color: orange;
text-orientation: mixed;
}
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="lr-mixed">X<span>2</span></div>
</body>
</html>

View file

@ -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 - 'super' and vertical-lr writing-mode</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-10-29 -->
<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 'vertical-lr', 'text-orientation' is 'upright', 'vertical-align' is 'super', the baseline of the box is shifted to the right.">
<meta name="flags" content="ahem">
<style type="text/css">
div#lr-upright
{
writing-mode: vertical-lr;
font: 60px/3 Ahem; /* computes to 60px/180px */
color: orange;
text-orientation: upright;
}
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="lr-upright">X<span>2</span></div>
</body>
</html>

View file

@ -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 - 'super' and vertical-lr writing-mode</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-10-29 -->
<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 'vertical-lr', 'text-orientation' is 'sideways', 'vertical-align' is 'super', the baseline of the box is shifted to the right.">
<meta name="flags" content="ahem">
<style type="text/css">
div#lr-sideways
{
writing-mode: vertical-lr;
font: 60px/3 Ahem; /* computes to 60px/180px */
color: orange;
text-orientation: sideways;
}
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="lr-sideways">X<span>2</span></div>
</body>
</html>

View file

@ -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 - 'sub' and vertical-lr writing-mode</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-10-29 -->
<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 'vertical-lr', 'text-orientation' is 'mixed', 'vertical-align' is 'sub', the baseline of the box is shifted to the left.">
<meta name="flags" content="ahem">
<style type="text/css">
div#lr-mixed
{
writing-mode: vertical-lr;
font: 60px/3 Ahem; /* computes to 60px/180px */
color: orange;
text-orientation: mixed;
}
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="lr-mixed">O<span>2</span></div>
</body>
</html>

View file

@ -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 - 'sub' and vertical-lr writing-mode</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-10-29 -->
<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 'vertical-lr', 'text-orientation' is 'upright', 'vertical-align' is 'sub', the baseline of the box is shifted to the left.">
<meta name="flags" content="ahem">
<style type="text/css">
div#lr-upright
{
writing-mode: vertical-lr;
font: 60px/3 Ahem; /* computes to 60px/180px */
color: orange;
text-orientation: upright;
}
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="lr-upright">O<span>2</span></div>
</body>
</html>

View file

@ -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 - 'sub' and vertical-lr writing-mode</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-10-29 -->
<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 'vertical-lr', 'text-orientation' is 'sideways', 'vertical-align' is 'sub', the baseline of the box is shifted to the left.">
<meta name="flags" content="ahem">
<style type="text/css">
div#lr-sideways
{
writing-mode: vertical-lr;
font: 60px/3 Ahem; /* computes to 60px/180px */
color: orange;
text-orientation: sideways;
}
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="lr-sideways">O<span>2</span></div>
</body>
</html>

View file

@ -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 - 'middle' and vertical-lr writing-mode</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-10-29 -->
<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 'vertical-lr', 'text-orientation' is 'upright', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent.">
<link rel="match" href="reference/vertical-alignment-vrl-022-ref.htm">
<meta name="flags" content="ahem">
<style type="text/css">
div#lr-upright
{
writing-mode: vertical-lr;
font: 100px/3 Ahem; /* computes to 100px/300px */
color: blue;
text-orientation: upright;
}
span
{
font-size: 0.2em;
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="lr-upright">X<span>X</span></div>
</body>
</html>

View file

@ -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 - 'middle' and vertical-lr writing-mode</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-10-31 -->
<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 'vertical-lr', 'text-orientation' is 'mixed', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent.">
<link rel="match" href="reference/vertical-alignment-vrl-022-ref.htm">
<meta name="flags" content="ahem">
<style type="text/css">
div#lr-mixed
{
writing-mode: vertical-lr;
font: 100px/3 Ahem; /* computes to 100px/300px */
color: blue;
text-orientation: mixed;
}
span
{
font-size: 0.2em;
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="lr-mixed">X<span>X</span></div>
</body>
</html>

View file

@ -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 - 'middle' and vertical-lr writing-mode</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-10-29 -->
<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 'vertical-lr', 'text-orientation' is 'sideways', '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#lr-sideways
{
writing-mode: vertical-lr;
font: 100px/3 Ahem; /* computes to 100px/300px */
color: blue;
text-orientation: sideways;
}
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="lr-sideways">X<span>X</span></div>
</body>
</html>

View file

@ -1,8 +1,9 @@
<!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 vertical-rl writing-mode</title>
<title>CSS Writing Modes Test: vertical-align - 'super' and vertical-rl writing-mode</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-10-26 -->
<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 'vertical-rl', 'text-orientation' is 'mixed', 'vertical-align' is 'super', the baseline of the box is shifted to the right.">
@ -30,7 +31,7 @@
<p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
<div id="rl-mixed">X<span>X</span></div>
<div id="rl-mixed">X<span>2</span></div>
</body>
</html>

View file

@ -1,8 +1,9 @@
<!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 vertical-rl writing-mode</title>
<title>CSS Writing Modes Test: vertical-align - 'super' and vertical-rl writing-mode</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-10-26 -->
<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 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'super', the baseline of the box is shifted to the right.">
@ -30,7 +31,7 @@
<p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
<div id="rl-upright">X<span>X</span></div>
<div id="rl-upright">X<span>2</span></div>
</body>
</html>

View file

@ -1,8 +1,9 @@
<!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 vertical-rl writing-mode</title>
<title>CSS Writing Modes Test: vertical-align - 'super' and vertical-rl writing-mode</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-10-26 -->
<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 'vertical-rl', 'text-orientation' is 'sideways', 'vertical-align' is 'super', the baseline of the box is shifted to the right.">
@ -30,7 +31,7 @@
<p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
<div id="rl-sideways">X<span>X</span></div>
<div id="rl-sideways">X<span>2</span></div>
</body>
</html>

View file

@ -1,8 +1,9 @@
<!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 vertical-rl writing-mode</title>
<title>CSS Writing Modes Test: vertical-align - 'sub' and vertical-rl writing-mode</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-10-26 -->
<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 'vertical-rl', 'text-orientation' is 'mixed', 'vertical-align' is 'sub', the baseline of the box is shifted to the left.">
@ -30,7 +31,7 @@
<p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
<div id="rl-mixed">X<span>X</span></div>
<div id="rl-mixed">O<span>2</span></div>
</body>
</html>

View file

@ -1,8 +1,9 @@
<!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 vertical-rl writing-mode</title>
<title>CSS Writing Modes Test: vertical-align - 'sub' and vertical-rl writing-mode</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-10-26 -->
<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 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'sub', the baseline of the box is shifted to the left.">
@ -30,7 +31,7 @@
<p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
<div id="rl-upright">X<span>X</span></div>
<div id="rl-upright">O<span>2</span></div>
</body>
</html>

View file

@ -1,8 +1,9 @@
<!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 vertical-rl writing-mode</title>
<title>CSS Writing Modes Test: vertical-align - 'sub' and vertical-rl writing-mode</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-10-26 -->
<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 'vertical-rl', 'text-orientation' is 'sideways', 'vertical-align' is 'sub', the baseline of the box is shifted to the left.">
@ -30,7 +31,7 @@
<p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
<div id="rl-sideways">X<span>X</span></div>
<div id="rl-sideways">O<span>2</span></div>
</body>
</html>

View file

@ -1,8 +1,9 @@
<!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 vertical-rl writing-mode</title>
<title>CSS Writing Modes Test: vertical-align - 'middle' and vertical-rl writing-mode</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-10-26 -->
<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 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent.">

View file

@ -1,11 +1,12 @@
<!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 vertical-rl writing-mode</title>
<title>CSS Writing Modes Test: vertical-align - 'middle' and vertical-rl writing-mode</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-10-31 -->
<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 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent.">
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'mixed', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent.">
<link rel="match" href="reference/vertical-alignment-vrl-022-ref.htm">
<meta name="flags" content="ahem">
<style type="text/css">

View file

@ -1,11 +1,12 @@
<!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 vertical-rl writing-mode</title>
<title>CSS Writing Modes Test: vertical-align - 'middle' and vertical-rl writing-mode</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-10-26 -->
<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 'vertical-rl', 'text-orientation' is 'sideways, 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent.">
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'sideways, '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">