mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger
parent
fb4f421c8b
commit
296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
|
|
@ -88,9 +88,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -93,9 +93,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -87,9 +87,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -92,9 +92,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -88,9 +88,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -93,9 +93,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -87,9 +87,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -92,9 +92,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Values and Units Test: the ch unit in vertical orientation</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<link href="https://drafts.csswg.org/css-values-3/#font-relative-lengths" rel="help">
|
||||
<link href="https://www.w3.org/TR/css-writing-modes-3/#block-flow" rel="help">
|
||||
<link href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation" rel="help">
|
||||
<link href="reference/ch-unit-002-ref.htm" rel="match">
|
||||
<meta content="In vertical upright, the ch unit is equal to the used vertical advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it." name="assert">
|
||||
<style>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
height: 5ch;
|
||||
width: 10ch;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
}
|
||||
|
||||
div + div {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div + div span {
|
||||
height: 5ch;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span>00000</span></div>
|
||||
<div><span></span>00000</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Introduction to Writing Modes (120 tests)</h2>
|
||||
<h2>Introduction to Writing Modes (121 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.#writing-mode">
|
||||
<!-- 120 tests -->
|
||||
<!-- 121 tests -->
|
||||
<tr id="block-flow-direction-004-1.#writing-mode" class="ahem">
|
||||
<td>
|
||||
<a href="block-flow-direction-004.htm">block-flow-direction-004</a></td>
|
||||
|
|
@ -595,6 +595,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="cursor-text-001-1.#writing-mode" class="interact may">
|
||||
<td>
|
||||
<a href="cursor-text-001.htm">cursor-text-001</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="may" title="Behavior tested is preferred but optional">Optional</abbr></td>
|
||||
<td>cursor:text with vertical text
|
||||
<ul class="assert">
|
||||
<li>User agents may automatically display a horizontal I-beam/cursor (e.g. same as the vertical-text keyword) for vertical text.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="different-block-flow-dir-001-1.#writing-mode" class="">
|
||||
<td>
|
||||
<a href="different-block-flow-dir-001.htm">different-block-flow-dir-001</a></td>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Introduction to Vertical Text (31 tests)</h2>
|
||||
<h2>Introduction to Vertical Text (35 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-writing-modes-3/#block-flow">3.1 Block Flow Direction: the writing-mode property</a></th></tr>
|
||||
<!-- 16 tests -->
|
||||
<!-- 20 tests -->
|
||||
<tr id="block-flow-direction-vrl-026-3.1" class="ahem">
|
||||
<td>
|
||||
<a href="block-flow-direction-vrl-026.htm">block-flow-direction-vrl-026</a></td>
|
||||
|
|
@ -52,6 +52,50 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="ch-unit-002-3.1" class="">
|
||||
<td>
|
||||
<a href="ch-unit-002.htm">ch-unit-002</a></td>
|
||||
<td><a href="reference/ch-unit-002-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>the ch unit in vertical orientation
|
||||
<ul class="assert">
|
||||
<li>In vertical upright, the ch unit is equal to the used vertical advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="ic-unit-002-3.1" class="">
|
||||
<td>
|
||||
<a href="ic-unit-002.htm">ic-unit-002</a></td>
|
||||
<td><a href="reference/ic-unit-002-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>the ic unit in vertical orientation
|
||||
<ul class="assert">
|
||||
<li>In vertical upright, the ic unit is equal to the used vertical advance measure of the &#27700; (CJK water ideograph, U+6C34) glyph found in the font used to render it.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="ic-unit-003-3.1" class="">
|
||||
<td>
|
||||
<a href="ic-unit-003.htm">ic-unit-003</a></td>
|
||||
<td><a href="reference/ic-unit-002-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>the ic unit in vertical orientation
|
||||
<ul class="assert">
|
||||
<li>In vertical mixed, the ic unit is equal to the used vertical advance measure of the &#27700; (CJK water ideograph, U+6C34) glyph found in the font used to render it.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="ic-unit-004-3.1" class="">
|
||||
<td>
|
||||
<a href="ic-unit-004.htm">ic-unit-004</a></td>
|
||||
<td><a href="reference/ic-unit-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>the ic unit in vertical orientation
|
||||
<ul class="assert">
|
||||
<li>In vertical sideways, the ic unit is equal to the used horizontal advance measure of the &#27700; (CJK water ideograph, U+6C34) glyph found in the font used to render it.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="table-progression-slr-001-3.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>Introduction to Vertical Text Layout (39 tests)</h2>
|
||||
<h2>Introduction to Vertical Text Layout (47 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -55,7 +55,51 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">5.1 Orienting Text: the text-orientation property</a></th></tr>
|
||||
<!-- 39 tests -->
|
||||
<!-- 47 tests -->
|
||||
<tr id="ch-unit-002-5.1" class="">
|
||||
<td>
|
||||
<a href="ch-unit-002.htm">ch-unit-002</a></td>
|
||||
<td><a href="reference/ch-unit-002-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>the ch unit in vertical orientation
|
||||
<ul class="assert">
|
||||
<li>In vertical upright, the ch unit is equal to the used vertical advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="ic-unit-002-5.1" class="">
|
||||
<td>
|
||||
<a href="ic-unit-002.htm">ic-unit-002</a></td>
|
||||
<td><a href="reference/ic-unit-002-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>the ic unit in vertical orientation
|
||||
<ul class="assert">
|
||||
<li>In vertical upright, the ic unit is equal to the used vertical advance measure of the &#27700; (CJK water ideograph, U+6C34) glyph found in the font used to render it.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="ic-unit-003-5.1" class="">
|
||||
<td>
|
||||
<a href="ic-unit-003.htm">ic-unit-003</a></td>
|
||||
<td><a href="reference/ic-unit-002-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>the ic unit in vertical orientation
|
||||
<ul class="assert">
|
||||
<li>In vertical mixed, the ic unit is equal to the used vertical advance measure of the &#27700; (CJK water ideograph, U+6C34) glyph found in the font used to render it.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="ic-unit-004-5.1" class="">
|
||||
<td>
|
||||
<a href="ic-unit-004.htm">ic-unit-004</a></td>
|
||||
<td><a href="reference/ic-unit-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>the ic unit in vertical orientation
|
||||
<ul class="assert">
|
||||
<li>In vertical sideways, the ic unit is equal to the used horizontal advance measure of the &#27700; (CJK water ideograph, U+6C34) glyph found in the font used to render it.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="table-progression-vlr-003-5.1" class="">
|
||||
<td>
|
||||
<a href="table-progression-vlr-003.htm">table-progression-vlr-003</a></td>
|
||||
|
|
@ -122,6 +166,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-orientation-012-5.1" class="image">
|
||||
<td>
|
||||
<a href="text-orientation-012.htm">text-orientation-012</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>text-orientation - upright
|
||||
<ul class="assert">
|
||||
<li>This test checks that 'text-orientation: upright' causes characters from horizontal-only scripts and from vertical scripts to be translated upright.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-orientation-016-5.1" class="ahem image">
|
||||
<td>
|
||||
<a href="text-orientation-016.htm">text-orientation-016</a></td>
|
||||
|
|
@ -170,7 +225,7 @@
|
|||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>text-orientation - mixed in vertical-rl writing mode
|
||||
<ul class="assert">
|
||||
<li>This test checks that when 'text-orientation' is set to 'mixed', then latin alphabet characters are displayed sideways (rotated 90 degrees clockwise) and characters from vertical scripts (Japanese, Mongolian, Hangul, etc) are displayed according to their intrinsic orientation property (Vertical Orientation Property as given by UTR50). In this test, the 'FULLWIDTH LATIN CAPITAL LETTER T' must be typeset upright.</li>
|
||||
<li>This test checks that when 'text-orientation' is set to 'mixed', then latin alphabet characters are displayed sideways (rotated 90 degrees clockwise). In this test, the 'FULLWIDTH LATIN CAPITAL LETTER T' must be typeset upright.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -220,9 +275,9 @@
|
|||
<a href="text-orientation-script-001a.htm">text-orientation-script-001a</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#1/8, 2048 code points in U+0020-0B35).
|
||||
<td>Test orientation of characters where vo=R (#1/9, 2048 code points in U+0020-0B27).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#1/8, 2048 code points in U+0020-0B35)</li>
|
||||
<li>Test orientation of characters where vo=R (#1/9, 2048 code points in U+0020-0B27)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -231,9 +286,9 @@
|
|||
<a href="text-orientation-script-001b.htm">text-orientation-script-001b</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#2/8, 2048 code points in U+0B36-1B50).
|
||||
<td>Test orientation of characters where vo=R (#2/9, 2048 code points in U+0B28-1B07).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#2/8, 2048 code points in U+0B36-1B50)</li>
|
||||
<li>Test orientation of characters where vo=R (#2/9, 2048 code points in U+0B28-1B07)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -242,9 +297,9 @@
|
|||
<a href="text-orientation-script-001c.htm">text-orientation-script-001c</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#3/8, 2048 code points in U+1B51-2898).
|
||||
<td>Test orientation of characters where vo=R (#3/9, 2048 code points in U+1B08-2858).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#3/8, 2048 code points in U+1B51-2898)</li>
|
||||
<li>Test orientation of characters where vo=R (#3/9, 2048 code points in U+1B08-2858)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -253,9 +308,9 @@
|
|||
<a href="text-orientation-script-001d.htm">text-orientation-script-001d</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#4/8, 2048 code points in U+2899-A884).
|
||||
<td>Test orientation of characters where vo=R (#4/9, 2048 code points in U+2859-A81D).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#4/8, 2048 code points in U+2899-A884)</li>
|
||||
<li>Test orientation of characters where vo=R (#4/9, 2048 code points in U+2859-A81D)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -264,9 +319,9 @@
|
|||
<a href="text-orientation-script-001e.htm">text-orientation-script-001e</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#5/8, 2048 code points in U+A885-10343).
|
||||
<td>Test orientation of characters where vo=R (#5/9, 2048 code points in U+A81E-101F7).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#5/8, 2048 code points in U+A885-10343)</li>
|
||||
<li>Test orientation of characters where vo=R (#5/9, 2048 code points in U+A81E-101F7)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -275,9 +330,9 @@
|
|||
<a href="text-orientation-script-001f.htm">text-orientation-script-001f</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#6/8, 2048 code points in U+10344-1169D).
|
||||
<td>Test orientation of characters where vo=R (#6/9, 2048 code points in U+101F8-11151).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#6/8, 2048 code points in U+10344-1169D)</li>
|
||||
<li>Test orientation of characters where vo=R (#6/9, 2048 code points in U+101F8-11151)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -286,9 +341,9 @@
|
|||
<a href="text-orientation-script-001g.htm">text-orientation-script-001g</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#7/8, 2048 code points in U+1169E-1BC00).
|
||||
<td>Test orientation of characters where vo=R (#7/9, 2048 code points in U+11152-124FA).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#7/8, 2048 code points in U+1169E-1BC00)</li>
|
||||
<li>Test orientation of characters where vo=R (#7/9, 2048 code points in U+11152-124FA)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -297,9 +352,9 @@
|
|||
<a href="text-orientation-script-001h.htm">text-orientation-script-001h</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#8/8, 1700 code points in U+1BC01-1F8AD).
|
||||
<td>Test orientation of characters where vo=R (#8/9, 2048 code points in U+124FB-1D7B2).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#8/8, 1700 code points in U+1BC01-1F8AD)</li>
|
||||
<li>Test orientation of characters where vo=R (#8/9, 2048 code points in U+124FB-1D7B2)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -308,9 +363,9 @@
|
|||
<a href="text-orientation-script-001i.htm">text-orientation-script-001i</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=U (#1/5, 2048 code points in U+00A7-2ED7).
|
||||
<td>Test orientation of characters where vo=R (#9/9, 652 code points in U+1D7B3-1F8AD).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=U (#1/5, 2048 code points in U+00A7-2ED7)</li>
|
||||
<li>Test orientation of characters where vo=R (#9/9, 652 code points in U+1D7B3-1F8AD)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -319,9 +374,9 @@
|
|||
<a href="text-orientation-script-001j.htm">text-orientation-script-001j</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=U (#2/5, 2048 code points in U+2ED8-A387).
|
||||
<td>Test orientation of characters where vo=U (#1/6, 2048 code points in U+00A7-2ED3).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=U (#2/5, 2048 code points in U+2ED8-A387)</li>
|
||||
<li>Test orientation of characters where vo=U (#1/6, 2048 code points in U+00A7-2ED3)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -330,9 +385,9 @@
|
|||
<a href="text-orientation-script-001k.htm">text-orientation-script-001k</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=U (#3/5, 2048 code points in U+A388-133AA).
|
||||
<td>Test orientation of characters where vo=U (#2/6, 2048 code points in U+2ED4-A37A).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=U (#3/5, 2048 code points in U+A388-133AA)</li>
|
||||
<li>Test orientation of characters where vo=U (#2/6, 2048 code points in U+2ED4-A37A)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -341,9 +396,9 @@
|
|||
<a href="text-orientation-script-001l.htm">text-orientation-script-001l</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=U (#4/5, 2048 code points in U+133AB-1F6BA).
|
||||
<td>Test orientation of characters where vo=U (#3/6, 2048 code points in U+A37B-1338B).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=U (#4/5, 2048 code points in U+133AB-1F6BA)</li>
|
||||
<li>Test orientation of characters where vo=U (#3/6, 2048 code points in U+A37B-1338B)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -352,9 +407,9 @@
|
|||
<a href="text-orientation-script-001m.htm">text-orientation-script-001m</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=U (#5/5, 787 code points in U+1F6BB-2FA1D).
|
||||
<td>Test orientation of characters where vo=U (#4/6, 2048 code points in U+1338C-1F0E1).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=U (#5/5, 787 code points in U+1F6BB-2FA1D)</li>
|
||||
<li>Test orientation of characters where vo=U (#4/6, 2048 code points in U+1338C-1F0E1)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -363,9 +418,9 @@
|
|||
<a href="text-orientation-script-001n.htm">text-orientation-script-001n</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=Tr (47 code points in U+2329-FFE3).
|
||||
<td>Test orientation of characters where vo=U (#5/6, 2048 code points in U+1F0E2-2F9EA).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=Tr (47 code points in U+2329-FFE3)</li>
|
||||
<li>Test orientation of characters where vo=U (#5/6, 2048 code points in U+1F0E2-2F9EA)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -374,6 +429,28 @@
|
|||
<a href="text-orientation-script-001o.htm">text-orientation-script-001o</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=U (#6/6, 51 code points in U+2F9EB-2FA1D).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=U (#6/6, 51 code points in U+2F9EB-2FA1D)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-orientation-script-001p-5.1" class="dom font script">
|
||||
<td>
|
||||
<a href="text-orientation-script-001p.htm">text-orientation-script-001p</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=Tr (47 code points in U+2329-FFE3).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=Tr (47 code points in U+2329-FFE3)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-orientation-script-001q-5.1" class="dom font script">
|
||||
<td>
|
||||
<a href="text-orientation-script-001q.htm">text-orientation-script-001q</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=Tu (147 code points in U+3001-1F201).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=Tu (147 code points in U+3001-1F201)</li>
|
||||
|
|
@ -418,6 +495,17 @@
|
|||
<td>writing-mode: vertical-rl; text-orientation: sideways.
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-orientation-upright-directionality-001-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="text-orientation-upright-directionality-001.htm">text-orientation-upright-directionality-001</a></strong></td>
|
||||
<td><a href="reference/text-orientation-upright-directionality-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>text-orientation:upright in sideways-* writing modes
|
||||
<ul class="assert">
|
||||
<li>text-orientation has no effect in horizontal typographic modes</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-orientation-upright-slr-017-5.1" class="image">
|
||||
<td>
|
||||
<a href="text-orientation-upright-slr-017.htm">text-orientation-upright-slr-017</a></td>
|
||||
|
|
@ -455,7 +543,7 @@
|
|||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>text-orientation - upright in vertical-rl writing mode
|
||||
<ul class="assert">
|
||||
<li>This test checks that latin alphabet characters are translated upright (and not rotated sideways) and this test also verifies that the characters from vertical scripts (Japanese, Mongolian, Hangul, etc) are also translated upright.</li>
|
||||
<li>This test checks that latin alphabet characters are translated upright (and not rotated sideways).</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Abstract Box Terminology (28 tests)</h2>
|
||||
<h2>Abstract Box Terminology (34 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -360,7 +360,55 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.4">+</a>
|
||||
<a href="https://www.w3.org/TR/css-writing-modes-3/#logical-to-physical">6.4 Abstract-to-Physical Mappings</a></th></tr>
|
||||
<!-- 12 tests -->
|
||||
<!-- 18 tests -->
|
||||
<tr id="logical-physical-mapping-001-6.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="logical-physical-mapping-001.htm">logical-physical-mapping-001</a></strong></td>
|
||||
<td><a href="reference/logical-physical-mapping-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>border-block and border-inline logical properties in different writing modes
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="logicalprops-block-size-6.4" class="script">
|
||||
<td>
|
||||
<a href="logicalprops-block-size.htm">logicalprops-block-size</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>CSS Logical Properties: {max-,min-}block-size
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="logicalprops-block-size-vlr-6.4" class="script">
|
||||
<td>
|
||||
<a href="logicalprops-block-size-vlr.htm">logicalprops-block-size-vlr</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>CSS Logical Properties: {max-,min-}block-size vertical-lr
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="logicalprops-inline-size-6.4" class="script">
|
||||
<td>
|
||||
<a href="logicalprops-inline-size.htm">logicalprops-inline-size</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>CSS Logical Properties: {max-,min-}inline-size
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="logicalprops-inline-size-vlr-6.4" class="script">
|
||||
<td>
|
||||
<a href="logicalprops-inline-size-vlr.htm">logicalprops-inline-size-vlr</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>CSS Logical Properties: {max-,min-}inline-size vertical-lr
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="logicalprops-quirklength-6.4" class="script">
|
||||
<td>
|
||||
<a href="logicalprops-quirklength.htm">logicalprops-quirklength</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>CSS Logical Properties: {max-,min-}block-size
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-decoration-sideways-vlr-003-6.4" class="">
|
||||
<td>
|
||||
<a href="text-decoration-sideways-vlr-003.htm">text-decoration-sideways-vlr-003</a></td>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>The Principal Writing Mode (0 tests)</h2>
|
||||
<h2>The Principal Writing Mode (5 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -31,7 +31,62 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8">+</a>
|
||||
<a href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow">8 The Principal Writing Mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
<!-- 5 tests -->
|
||||
<tr id="wm-propagation-body-006-8" class="primary image">
|
||||
<td><strong>
|
||||
<a href="wm-propagation-body-006.htm">wm-propagation-body-006</a></strong></td>
|
||||
<td><a href="reference/block-flow-direction-025-ref.htm">=</a> </td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>'writing-mode: vertical-rl' set to body element propagates to viewport
|
||||
<ul class="assert">
|
||||
<li>This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="wm-propagation-body-008-8" class="primary image">
|
||||
<td><strong>
|
||||
<a href="wm-propagation-body-008.htm">wm-propagation-body-008</a></strong></td>
|
||||
<td><a href="reference/block-flow-direction-025-ref.htm">=</a> </td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>'writing-mode: sideways-rl' set to body element propagates to viewport
|
||||
<ul class="assert">
|
||||
<li>This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="wm-propagation-body-010-8" class="primary image">
|
||||
<td><strong>
|
||||
<a href="wm-propagation-body-010.htm">wm-propagation-body-010</a></strong></td>
|
||||
<td><a href="reference/wm-propagation-body-003-ref.htm">=</a> </td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>'writing-mode: horizontal-tb' set to body element propagates to viewport
|
||||
<ul class="assert">
|
||||
<li>This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="wm-propagation-body-011-8" class="primary image">
|
||||
<td><strong>
|
||||
<a href="wm-propagation-body-011.htm">wm-propagation-body-011</a></strong></td>
|
||||
<td><a href="reference/wm-propagation-body-003-ref.htm">=</a> </td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>'writing-mode: vertical-lr' set to body element propagates to viewport
|
||||
<ul class="assert">
|
||||
<li>This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="wm-propagation-body-015-8" class="primary image">
|
||||
<td><strong>
|
||||
<a href="wm-propagation-body-015.htm">wm-propagation-body-015</a></strong></td>
|
||||
<td><a href="reference/block-flow-direction-025-ref.htm">=</a> </td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>'writing-mode: vertical-rl' set to body element propagates to viewport
|
||||
<ul class="assert">
|
||||
<li>This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s8.#principal-writing-mode">
|
||||
<!-- 0 tests -->
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Glyph Composition (37 tests)</h2>
|
||||
<h2>Glyph Composition (40 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">9.1 Horizontal-in-Vertical Composition: the text-combine-upright property</a></th></tr>
|
||||
<!-- 23 tests -->
|
||||
<!-- 22 tests -->
|
||||
<tr id="text-combine-upright-inherit-all-001-9.1" class="">
|
||||
<td>
|
||||
<a href="text-combine-upright-inherit-all-001.htm">text-combine-upright-inherit-all-001</a></td>
|
||||
|
|
@ -63,17 +63,6 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-combine-upright-line-breaking-rules-001-9.1" class="">
|
||||
<td>
|
||||
<a href="text-combine-upright-line-breaking-rules-001.htm">text-combine-upright-line-breaking-rules-001</a></td>
|
||||
<td><a href="reference/text-combine-upright-line-breaking-rules-001.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Writing Modes: line-breaking-rules
|
||||
<ul class="assert">
|
||||
<li>The bracket should be combined with following characters.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-combine-upright-parsing-digits-001-9.1" class="dom script">
|
||||
<td>
|
||||
<a href="text-combine-upright-parsing-digits-001.htm">text-combine-upright-parsing-digits-001</a></td>
|
||||
|
|
@ -326,7 +315,29 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.2">+</a>
|
||||
<a href="https://www.w3.org/TR/css-writing-modes-3/#text-combine-layout">9.1.2 Layout Rules</a></th></tr>
|
||||
<!-- 2 tests -->
|
||||
<!-- 5 tests -->
|
||||
<tr id="text-combine-upright-break-inside-001-9.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="text-combine-upright-break-inside-001.htm">text-combine-upright-break-inside-001</a></strong></td>
|
||||
<td><a href="reference/text-combine-upright-break-inside-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>text-combine-upright, whitespace inside tcy with insufficient line space
|
||||
<ul class="assert">
|
||||
<li>line should never be broken inside text-combine-upright text node</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-combine-upright-break-inside-001a-9.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="text-combine-upright-break-inside-001a.htm">text-combine-upright-break-inside-001a</a></strong></td>
|
||||
<td><a href="reference/text-combine-upright-break-inside-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>text-combine-upright, white-space: pre with new line
|
||||
<ul class="assert">
|
||||
<li>line should never be broken inside text-combine-upright text node</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-combine-upright-decorations-001-9.1.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-combine-upright-decorations-001.htm">text-combine-upright-decorations-001</a></strong></td>
|
||||
|
|
@ -349,6 +360,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-combine-upright-line-breaking-rules-001-9.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="text-combine-upright-line-breaking-rules-001.htm">text-combine-upright-line-breaking-rules-001</a></strong></td>
|
||||
<td><a href="reference/text-combine-upright-line-breaking-rules-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Writing Modes: line-breaking-rules
|
||||
<ul class="assert">
|
||||
<li>The bracket should be combined with following characters.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s9.1.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
|
|
@ -418,35 +440,35 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.3.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth">9.1.3.1 Full-width Characters</a></th></tr>
|
||||
<!-- 7 tests -->
|
||||
<tr id="full-width-001-9.1.3.1" class="">
|
||||
<!-- 8 tests -->
|
||||
<tr id="full-width-001-9.1.3.1" class="asis should">
|
||||
<td>
|
||||
<a href="full-width-001.htm">full-width-001</a></td>
|
||||
<td><a href="reference/full-width-ref.htm">=</a> <a href="reference/full-width-notcu-notref.htm">≠</a> <a href="reference/full-width-horizontal-notref.htm">≠</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Writing Modes: text-combine-upright on full-width characters
|
||||
<td><a href="reference/full-width-001-horizontal-notref.htm">≠</a> <a href="reference/full-width-001-nofullwidth-notref.htm">≠</a> </td>
|
||||
<td><abbr class="asis" title="Can not be re-serialized">As-Is</abbr><abbr class="should" title="Behavior tested is recommended but not required">Recommend</abbr></td>
|
||||
<td>CSS Writing Modes: 'text-combine-upright: all' applied on a single typographic full-width unit character
|
||||
<ul class="assert">
|
||||
<li>When two or more full-width characters are combined, they are first converted to non-full-width characters.</li>
|
||||
<li>When 'text-combine-upright: all' and 'text-transform: full-width' are applied simultaneously on 1 single typographic unit or when 'text-combine-upright: all' is set on a full-width typographic unit character, then such typographic unit remains a full-width character.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="full-width-002-9.1.3.1" class="">
|
||||
<tr id="full-width-002-9.1.3.1" class="asis should">
|
||||
<td>
|
||||
<a href="full-width-002.htm">full-width-002</a></td>
|
||||
<td><a href="reference/full-width-ref.htm">=</a> <a href="reference/full-width-notcu-notref.htm">≠</a> <a href="reference/full-width-horizontal-notref.htm">≠</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Writing Modes: text-combine-upright on full-width characters
|
||||
<td><a href="reference/full-width-002-notcu-notref.htm">≠</a> <a href="reference/full-width-002-horizontal-notref.htm">≠</a> </td>
|
||||
<td><abbr class="asis" title="Can not be re-serialized">As-Is</abbr><abbr class="should" title="Behavior tested is recommended but not required">Recommend</abbr></td>
|
||||
<td>CSS Writing Modes: 'text-combine-upright: all' applied on 2 full-width characters
|
||||
<ul class="assert">
|
||||
<li>When two or more full-width characters are combined, they are first converted to non-full-width characters.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="full-width-003-9.1.3.1" class="">
|
||||
<tr id="full-width-003-9.1.3.1" class="asis should">
|
||||
<td>
|
||||
<a href="full-width-003.htm">full-width-003</a></td>
|
||||
<td><a href="reference/full-width-ref.htm">=</a> <a href="reference/full-width-notcu-notref.htm">≠</a> <a href="reference/full-width-horizontal-notref.htm">≠</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Writing Modes: text-combine-upright on full-width characters
|
||||
<td><a href="reference/full-width-002-notcu-notref.htm">≠</a> <a href="reference/full-width-002-horizontal-notref.htm">≠</a> </td>
|
||||
<td><abbr class="asis" title="Can not be re-serialized">As-Is</abbr><abbr class="should" title="Behavior tested is recommended but not required">Recommend</abbr></td>
|
||||
<td>CSS Writing Modes: 'text-combine-upright: digits 2' applied on 2 full-width characters
|
||||
<ul class="assert">
|
||||
<li>When two or more full-width characters are combined, they are first converted to non-full-width characters.</li>
|
||||
</ul>
|
||||
|
|
@ -496,6 +518,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-transform-fullwidth-002-9.1.3.1" class="">
|
||||
<td>
|
||||
<a href="text-transform-fullwidth-002.htm">text-transform-fullwidth-002</a></td>
|
||||
<td><a href="reference/text-transform-fullwidth-002-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>text-transform: full-width (basic)
|
||||
<ul class="assert">
|
||||
<li>This test checks basic support of 'text-transform: full-width' in a vertical writing context. Since full-width Latin characters are typeset upright, then the characters of the text sample of this test should not be rotated toward the right but should be upright.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s9.1.3.1.#example-cc759014">
|
||||
<!-- 0 tests -->
|
||||
|
|
|
|||
|
|
@ -32,9 +32,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,9 +33,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -50,9 +50,7 @@
|
|||
background-image: url("support/margin-collapse-2em-space-wm-vert.png");
|
||||
background-repeat: no-repeat;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -51,9 +51,7 @@
|
|||
background-image: url("support/margin-collapse-2em-space-wm-vert.png");
|
||||
background-repeat: no-repeat;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -32,9 +32,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,9 +33,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -50,9 +50,7 @@
|
|||
background-image: url("support/margin-collapse-2em-space-wm-vert.png");
|
||||
background-repeat: no-repeat;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -51,9 +51,7 @@
|
|||
background-image: url("support/margin-collapse-2em-space-wm-vert.png");
|
||||
background-repeat: no-repeat;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><title>CSS Basic User Interface Test: cursor:text with vertical text</title>
|
||||
<link href="mailto:florian@rivoal.net" rel="author" title="Florian Rivoal">
|
||||
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" rel="help">
|
||||
<meta content="interact may" name="flags">
|
||||
<meta charset="UTF-8">
|
||||
<meta content="User agents may automatically display a horizontal I-beam/cursor (e.g. same as the vertical-text keyword) for vertical text." name="assert">
|
||||
<style>
|
||||
div {
|
||||
cursor: text;
|
||||
color: blue;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
p {
|
||||
cursor: text;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>The test passes if, when moved over the blue vertical text, the cursor indicates vertical-text that may be selected,
|
||||
and looks different from the cursor used to indicate that horizontal text may be selected,
|
||||
such as when placed over this sentence.
|
||||
Often rendered as a horizontal I-beam.</p>
|
||||
<p>Disregard this test if there is no vertical text.</p>
|
||||
<div>Lorem ipsum</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: flow-into on list items that use different text directions or writing modes</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#direction" rel="help">
|
||||
|
|
@ -82,4 +82,5 @@
|
|||
<div class="region"></div>
|
||||
<div class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,31 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Writing Modes: text-combine-upright on full-width characters</title>
|
||||
<title>CSS Writing Modes: 'text-combine-upright: all' applied on a single typographic full-width unit character</title>
|
||||
<link href="http://google.com/+MasatakaYakura" rel="author" title="Masataka Yakura">
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" rel="help">
|
||||
<link href="reference/full-width-ref.htm" rel="match">
|
||||
<link href="reference/full-width-notcu-notref.htm" rel="mismatch">
|
||||
<link href="reference/full-width-horizontal-notref.htm" rel="mismatch">
|
||||
<meta content="When two or more full-width characters are combined, they are first converted to non-full-width characters." name="assert">
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" rel="help" title="9.1.3.1. Full-width Characters">
|
||||
<link href="reference/full-width-001-horizontal-notref.htm" rel="mismatch">
|
||||
<link href="reference/full-width-001-nofullwidth-notref.htm" rel="mismatch">
|
||||
<meta content="asis should" name="flags">
|
||||
<meta content="When 'text-combine-upright: all' and 'text-transform: full-width' are applied simultaneously on 1 single typographic unit or when 'text-combine-upright: all' is set on a full-width typographic unit character, then such typographic unit remains a full-width character." name="assert">
|
||||
|
||||
.tcy, .tcu-all {
|
||||
text-combine-upright: all;
|
||||
}
|
||||
<!--
|
||||
This test is the equivalent of the "2" month in the
|
||||
<date>2010年2月23日</date> example of example 17 in
|
||||
section 9.1.3.1 of the specification
|
||||
-->
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-size: 64px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div > p
|
||||
{
|
||||
border: black solid 1px;
|
||||
}
|
||||
|
||||
span.tcu-all
|
||||
{
|
||||
text-combine-upright: all;
|
||||
}
|
||||
|
||||
span.full-width
|
||||
{
|
||||
text-transform: full-width;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the following paragraphs are identical:</p>
|
||||
<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
|
||||
|
||||
<div>
|
||||
|
||||
<p id="test1"><span class="tcu-all full-width">4</span>月</p>
|
||||
|
||||
<!-- 4 is the ISO-Latin1 digit 4 -->
|
||||
|
||||
<p id="test2"><span class="tcu-all">４</span>月</p>
|
||||
|
||||
<!-- ４ is the FULLWIDTH DIGIT 4 (≈ <wide> 0034 4)-->
|
||||
|
||||
<p id="reference">４月</p>
|
||||
|
||||
<!-- ４ is the FULLWIDTH DIGIT 4 (≈ <wide> 0034 4)-->
|
||||
|
||||
<div class="test">
|
||||
<p><span class="tcy">６</span>月<span class="tcy">１９</span>日</p>
|
||||
<p>６月<span class="tcu-all">19</span>日</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,36 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Writing Modes: text-combine-upright on full-width characters</title>
|
||||
<title>CSS Writing Modes: 'text-combine-upright: all' applied on 2 full-width characters</title>
|
||||
<link href="http://google.com/+MasatakaYakura" rel="author" title="Masataka Yakura">
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-text-3/#full-width" rel="help">
|
||||
<link href="reference/full-width-ref.htm" rel="match">
|
||||
<link href="reference/full-width-notcu-notref.htm" rel="mismatch">
|
||||
<link href="reference/full-width-horizontal-notref.htm" rel="mismatch">
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
|
||||
<link href="http://fantasai.inkedblade.net/contact" rel="reviewer" title="Elika J. Etemad"> <!-- 2016-09-29 -->
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" rel="help" title="9.1.3.1. Full-width Characters">
|
||||
<link href="https://www.w3.org/TR/css-text-3/#text-transform-property" rel="help" title="2.1. Case Transforms: the 'text-transform' property">
|
||||
<link href="reference/full-width-002-notcu-notref.htm" rel="mismatch">
|
||||
<link href="reference/full-width-002-horizontal-notref.htm" rel="mismatch">
|
||||
<meta content="asis should" name="flags">
|
||||
<meta content="When two or more full-width characters are combined, they are first converted to non-full-width characters." name="assert">
|
||||
|
||||
<!--
|
||||
This test is the equivalent of the "23" day in the
|
||||
<date>2010年2月23日</date> example of example 17 in
|
||||
section 9.1.3.1 of the specification
|
||||
-->
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
div
|
||||
{
|
||||
font-size: 64px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.tcy, .tcu-all {
|
||||
text-combine-upright: all;
|
||||
}
|
||||
div > p
|
||||
{
|
||||
border: black solid 1px;
|
||||
}
|
||||
|
||||
.tcy {
|
||||
text-transform: full-width;
|
||||
}
|
||||
span.tcu-all
|
||||
{
|
||||
text-combine-upright: all;
|
||||
}
|
||||
|
||||
span.full-width
|
||||
{
|
||||
text-transform: full-width;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the following paragraphs are identical:</p>
|
||||
<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
|
||||
|
||||
<div>
|
||||
|
||||
<p id="test1"><span class="full-width tcu-all">28</span>日</p>
|
||||
|
||||
<!-- 2 is the ISO-Latin1 digit 2 -->
|
||||
|
||||
<!-- 8 is the ISO-Latin1 digit 8 -->
|
||||
|
||||
<p id="test2"><span class="tcu-all">２８</span>日</p>
|
||||
|
||||
<!-- ２ is the FULLWIDTH DIGIT 2 (≈ <wide> 0032 2)-->
|
||||
|
||||
<!-- ８ is the FULLWIDTH DIGIT 8 (≈ <wide> 0038 8)-->
|
||||
|
||||
<p id="reference"><span class="tcu-all">28</span>日</p>
|
||||
|
||||
<div class="test">
|
||||
<p><span class="tcy">6</span>月<span class="tcy">19</span>日</p>
|
||||
<p>６月<span class="tcu-all">19</span>日</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,37 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Writing Modes: text-combine-upright on full-width characters</title>
|
||||
<title>CSS Writing Modes: 'text-combine-upright: digits 2' applied on 2 full-width characters</title>
|
||||
<link href="http://google.com/+MasatakaYakura" rel="author" title="Masataka Yakura">
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-text-3/#full-width" rel="help">
|
||||
<link href="reference/full-width-ref.htm" rel="match">
|
||||
<link href="reference/full-width-notcu-notref.htm" rel="mismatch">
|
||||
<link href="reference/full-width-horizontal-notref.htm" rel="mismatch">
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" rel="help" title="9.1.3.1. Full-width Characters">
|
||||
<link href="https://www.w3.org/TR/css-text-3/#text-transform-property" rel="help" title="2.1. Case Transforms: the 'text-transform' property">
|
||||
<link href="reference/full-width-002-notcu-notref.htm" rel="mismatch">
|
||||
<link href="reference/full-width-002-horizontal-notref.htm" rel="mismatch">
|
||||
<meta content="asis should" name="flags">
|
||||
<meta content="When two or more full-width characters are combined, they are first converted to non-full-width characters." name="assert">
|
||||
|
||||
<!--
|
||||
This test is the equivalent of the "23" day in the
|
||||
<date>2010年2月23日</date> example of example 17 in
|
||||
section 9.1.3.1 of the specification
|
||||
-->
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.tcy {
|
||||
text-combine-upright: digits 2;
|
||||
text-transform: full-width;
|
||||
}
|
||||
div
|
||||
{
|
||||
font-size: 64px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.tcu-all {
|
||||
text-combine-upright: all;
|
||||
}
|
||||
div > p
|
||||
{
|
||||
border: black solid 1px;
|
||||
}
|
||||
|
||||
span.tcu-digits2
|
||||
{
|
||||
text-combine-upright: digits 2;
|
||||
}
|
||||
|
||||
span.full-width
|
||||
{
|
||||
text-transform: full-width;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the following paragraphs are identical:</p>
|
||||
<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
|
||||
|
||||
<div>
|
||||
|
||||
<p id="test1"><span class="full-width tcu-digits2">28</span>日</p>
|
||||
|
||||
<!-- 2 is the ISO-Latin1 digit 2 -->
|
||||
|
||||
<!-- 8 is the ISO-Latin1 digit 8 -->
|
||||
|
||||
<p id="test2"><span class="tcu-digits2">２８</span>日</p>
|
||||
|
||||
<!-- ２ is the FULLWIDTH DIGIT 2 (≈ <wide> 0032 2)-->
|
||||
|
||||
<!-- ８ is the FULLWIDTH DIGIT 8 (≈ <wide> 0038 8)-->
|
||||
|
||||
<p id="reference"><span class="tcu-digits2">28</span>日</p>
|
||||
|
||||
<div class="test">
|
||||
<p><span class="tcy">6</span>月<span class="tcy">19</span>日</p>
|
||||
<p>６月<span class="tcu-all">19</span>日</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Values and Units Test: the ic unit in vertical orientation</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<link href="https://drafts.csswg.org/css-values-4/#font-relative-lengths" rel="help">
|
||||
<link href="https://www.w3.org/TR/css-writing-modes-3/#block-flow" rel="help">
|
||||
<link href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation" rel="help">
|
||||
<link href="reference/ic-unit-002-ref.htm" rel="match">
|
||||
<meta content="In vertical upright, the ic unit is equal to the used vertical advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it." name="assert">
|
||||
<style>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
height: 5ic;
|
||||
width: 10ic;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
}
|
||||
|
||||
div + div {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div + div span {
|
||||
height: 5ic;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span>水水水水水</span></div>
|
||||
<div><span></span>水水水水水</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Values and Units Test: the ic unit in vertical orientation</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<link href="https://drafts.csswg.org/css-values-4/#font-relative-lengths" rel="help">
|
||||
<link href="https://www.w3.org/TR/css-writing-modes-3/#block-flow" rel="help">
|
||||
<link href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation" rel="help">
|
||||
<link href="reference/ic-unit-002-ref.htm" rel="match">
|
||||
<meta content="In vertical mixed, the ic unit is equal to the used vertical advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it." name="assert">
|
||||
<style>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
height: 5ic;
|
||||
width: 10ic;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
div + div {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div + div span {
|
||||
height: 5ic;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span>水水水水水</span></div>
|
||||
<div><span></span>水水水水水</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Values and Units Test: the ic unit in vertical orientation</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<link href="https://drafts.csswg.org/css-values-4/#font-relative-lengths" rel="help">
|
||||
<link href="https://www.w3.org/TR/css-writing-modes-3/#block-flow" rel="help">
|
||||
<link href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation" rel="help">
|
||||
<link href="reference/ic-unit-001-ref.htm" rel="match">
|
||||
<meta content="In vertical sideways, the ic unit is equal to the used horizontal advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it." name="assert">
|
||||
<style>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
height: 5ic;
|
||||
width: 10ic;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: sideways;
|
||||
}
|
||||
|
||||
div + div {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div + div span {
|
||||
height: 5ic;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span>水水水水水</span></div>
|
||||
<div><span></span>水水水水水</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<!--
|
||||
Test inspired by
|
||||
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
|
||||
https://dxr.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/">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<!--
|
||||
Test inspired by
|
||||
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
|
||||
https://dxr.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/">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<!--
|
||||
Test inspired by
|
||||
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
|
||||
https://dxr.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/">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<!--
|
||||
Test inspired by
|
||||
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
|
||||
https://dxr.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/">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<!--
|
||||
Test inspired by
|
||||
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
|
||||
https://dxr.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/">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<!--
|
||||
Test inspired by
|
||||
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
|
||||
https://dxr.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/">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
<!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 (complex)</title>
|
||||
|
||||
<!--
|
||||
Test inspired by
|
||||
https://dxr.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-021-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">
|
||||
<meta name="DC.date.created" content="2015-07-22T09:54:03+11:00" scheme="W3CDTF">
|
||||
<meta name="DC.date.modified" content="2016-07-22T09:54:03+11:00" scheme="W3CDTF">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
div.vlr, div#reference
|
||||
{
|
||||
border: blue solid 2px;
|
||||
font-size: 32px;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div.vlr
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
span.brdr-left
|
||||
{
|
||||
border-left: 1.5em solid transparent;
|
||||
}
|
||||
|
||||
span.brdr-right
|
||||
{
|
||||
border-right: 1.5em solid transparent;
|
||||
}
|
||||
|
||||
div#reference
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are 3 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the three "123456" numbers must be enclosed by the three blue borders.</p>
|
||||
|
||||
<div class="vlr">
|
||||
<div>12<span class="brdr-left">34</span>56</div>
|
||||
</div>
|
||||
|
||||
<div class="vlr">
|
||||
<div>12<span class="brdr-right">34</span>56</div>
|
||||
</div>
|
||||
|
||||
<div id="reference">123456</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!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 (complex)</title>
|
||||
|
||||
<!--
|
||||
Test inspired by
|
||||
https://dxr.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-023-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">
|
||||
<meta name="DC.date.created" content="2015-07-22T09:54:03+11:00" scheme="W3CDTF">
|
||||
<meta name="DC.date.modified" content="2016-07-22T09:54:03+11:00" scheme="W3CDTF">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
div.vlr, div#reference
|
||||
{
|
||||
border: blue solid 2px;
|
||||
float: left;
|
||||
font-size: 32px;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div.vlr
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
span.brdr-left
|
||||
{
|
||||
border-left: 1.5em solid transparent;
|
||||
}
|
||||
|
||||
span.brdr-right
|
||||
{
|
||||
border-right: 1.5em solid transparent;
|
||||
}
|
||||
|
||||
div#reference
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are 3 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the three "123456" numbers must be enclosed by the three blue borders.</p>
|
||||
|
||||
<div class="vlr">
|
||||
<div>12<span class="brdr-left">34</span>56</div>
|
||||
</div>
|
||||
|
||||
<div class="vlr">
|
||||
<div>12<span class="brdr-right">34</span>56</div>
|
||||
</div>
|
||||
|
||||
<div id="reference">123456</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<!--
|
||||
Test inspired by
|
||||
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
|
||||
https://dxr.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/">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<!--
|
||||
Test inspired by
|
||||
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
|
||||
https://dxr.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/">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<!--
|
||||
Test inspired by
|
||||
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
|
||||
https://dxr.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/">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<!--
|
||||
Test inspired by
|
||||
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
|
||||
https://dxr.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/">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<!--
|
||||
Test inspired by
|
||||
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
|
||||
https://dxr.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/">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<!--
|
||||
Test inspired by
|
||||
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html
|
||||
https://dxr.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/">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Test: border-block and border-inline logical properties in different writing modes</title>
|
||||
<link href="mailto:manishearth@gmail.com" rel="author" title="Manish Goregaokar">
|
||||
<link href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical" rel="help">
|
||||
<link href="reference/logical-physical-mapping-001-ref.htm" rel="match">
|
||||
<style>
|
||||
#block-start div.outer div {
|
||||
border-block-start: dotted 2px orange;
|
||||
}
|
||||
#block-end div.outer div {
|
||||
border-block-end: dotted 2px orange;
|
||||
}
|
||||
#inline-start div.outer div {
|
||||
border-inline-start: dotted 2px orange;
|
||||
}
|
||||
#inline-end div.outer div {
|
||||
border-inline-end: dotted 2px orange;
|
||||
}
|
||||
|
||||
#body tr td:nth-child(2) div {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
#body tr td:nth-child(3) div {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
#body tr td:nth-child(4) div {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
#body tr td:nth-child(5) div {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
#body tr td:nth-child(6) div {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#body tr td:nth-child(7) div {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#body tr td:nth-child(8) div {
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
#body tr td:nth-child(9) div {
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
|
||||
#body tr td:nth-child(2n+2) div {
|
||||
direction: ltr;
|
||||
}
|
||||
#body tr td:nth-child(2n+3) div {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
border-bottom: 2px dotted blue;
|
||||
}
|
||||
.right {
|
||||
border-left: 2px dotted blue;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
border-top: 2px dotted blue;
|
||||
}
|
||||
.left {
|
||||
border-right: 2px dotted blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if orange dots are opposite to the blue dots in each cell. Orange dots should be on the (physical) side specified by the text in the cell.
|
||||
</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>writing mode</th><th colspan="2">horizontal-tb</th><th colspan="2">vertical-rl</th><th colspan="2">vertical-lr</th><th colspan="2">sideways-lr</th></tr>
|
||||
<tr><th>direction</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th></tr>
|
||||
</thead>
|
||||
<tbody id="body">
|
||||
<tr id="block-start"><th>block-start</th> <td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="left">left</div></div></td></tr>
|
||||
<tr id="block-end"><th>block-end</th> <td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="right">right</div></div></td></tr>
|
||||
<tr id="inline-start"><th>inline-start</th> <td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="top">top</div></div></td></tr>
|
||||
<tr id="inline-end"><th>inline-end</th> <td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Logical Properties: {max-,min-}block-size vertical-lr</title>
|
||||
<link href="mailto:openxu@gmail.com" rel="author" title="Xu Xing">
|
||||
<link href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties" rel="help">
|
||||
<link href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical" rel="help">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/style-check.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid #000;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#div1 {
|
||||
block-size: 40px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#div2 {
|
||||
block-size: 100px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#div3 {
|
||||
block-size: 120px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#ref_div1 {
|
||||
width: 40px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
}
|
||||
#ref_div2 {
|
||||
width: 100px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
}
|
||||
#ref_div3 {
|
||||
width: 120px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
p {
|
||||
border: 1px solid #000;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#p1 {
|
||||
block-size: 100px;
|
||||
width: 50px;
|
||||
}
|
||||
#p2 {
|
||||
width: 50px;
|
||||
block-size: 100px;
|
||||
}
|
||||
#ref_p1 {
|
||||
width: 50px;
|
||||
}
|
||||
#ref_p2 {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border: 1px solid #000;
|
||||
display: table;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.tablecell {
|
||||
display: table-cell;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#table1_cell {
|
||||
block-size: 40px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
inline-size: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
#table2_cell {
|
||||
block-size: 100px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
inline-size: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
#table3_cell {
|
||||
block-size: 120px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
inline-size: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
#ref_table1_cell {
|
||||
width: 40px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
#ref_table2_cell {
|
||||
width: 100px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
#ref_table3_cell {
|
||||
width: 120px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><div id="div1"></div>
|
||||
<div id="div2"></div>
|
||||
<div id="div3"></div>
|
||||
<div id="ref_div1"></div>
|
||||
<div id="ref_div2"></div>
|
||||
<div id="ref_div3"></div>
|
||||
|
||||
<p id="p1">
|
||||
</p><p id="p2">
|
||||
</p><p id="ref_p1">
|
||||
</p><p id="ref_p2">
|
||||
|
||||
</p><div class="table">
|
||||
<div id="table1_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="table2_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="table3_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="ref_table1_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="ref_table2_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="ref_table3_cell" class="tablecell"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("div1", "ref_div1"));
|
||||
assert_true(compareWidthHeight("div2", "ref_div2"));
|
||||
assert_true(compareWidthHeight("div3", "ref_div3"));
|
||||
}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size in vertical-lr");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("p1", "ref_p1"));
|
||||
assert_true(compareWidthHeight("p2", "ref_p2"));
|
||||
}, "Check that width override block-size and vice versa in vertical-lr");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
|
||||
assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
|
||||
assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
|
||||
}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size in table vertical-lr");
|
||||
</script>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Logical Properties: {max-,min-}block-size</title>
|
||||
<link href="mailto:openxu@gmail.com" rel="author" title="Xu Xing">
|
||||
<link href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties" rel="help">
|
||||
<link href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical" rel="help">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/style-check.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#div1 {
|
||||
block-size: 40px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#div2 {
|
||||
block-size: 100px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#div3 {
|
||||
block-size: 120px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
}
|
||||
#ref_div1 {
|
||||
height: 40px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
}
|
||||
#ref_div2 {
|
||||
height: 100px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
}
|
||||
#ref_div3 {
|
||||
height: 120px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
p {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#p1 {
|
||||
block-size: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
#p2 {
|
||||
height: 50px;
|
||||
block-size: 100px;
|
||||
}
|
||||
#ref_p1 {
|
||||
height: 50px;
|
||||
}
|
||||
#ref_p2 {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border: 1px solid #000;
|
||||
display: table;
|
||||
}
|
||||
.tablecell {
|
||||
display: table-cell;
|
||||
}
|
||||
#table1_cell {
|
||||
block-size: 40px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
inline-size: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
#table2_cell {
|
||||
block-size: 100px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
inline-size: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
#table3_cell {
|
||||
block-size: 120px;
|
||||
min-block-size: 50px;
|
||||
max-block-size: 100px;
|
||||
inline-size: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
#ref_table1_cell {
|
||||
height: 40px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
#ref_table2_cell {
|
||||
height: 100px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
#ref_table3_cell {
|
||||
height: 120px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><div id="div1"></div>
|
||||
<div id="div2"></div>
|
||||
<div id="div3"></div>
|
||||
<div id="ref_div1"></div>
|
||||
<div id="ref_div2"></div>
|
||||
<div id="ref_div3"></div>
|
||||
|
||||
<p id="p1">
|
||||
</p><p id="p2">
|
||||
</p><p id="ref_p1">
|
||||
</p><p id="ref_p2">
|
||||
|
||||
</p><div class="table">
|
||||
<div id="table1_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="table2_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="table3_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="ref_table1_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="ref_table2_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="ref_table3_cell" class="tablecell"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("div1", "ref_div1"));
|
||||
assert_true(compareWidthHeight("div2", "ref_div2"));
|
||||
assert_true(compareWidthHeight("div3", "ref_div3"));
|
||||
}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("p1", "ref_p1"));
|
||||
assert_true(compareWidthHeight("p2", "ref_p2"));
|
||||
}, "Check that height override block-size and vice versa");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
|
||||
assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
|
||||
assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
|
||||
}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size in table");
|
||||
</script>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Logical Properties: {max-,min-}inline-size vertical-lr</title>
|
||||
<link href="mailto:openxu@gmail.com" rel="author" title="Xu Xing">
|
||||
<link href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties" rel="help">
|
||||
<link href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical" rel="help">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/style-check.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid #000;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#div1 {
|
||||
inline-size: 40px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#div2 {
|
||||
inline-size: 100px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#div3 {
|
||||
inline-size: 120px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#ref_div1 {
|
||||
height: 40px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
}
|
||||
#ref_div2 {
|
||||
height: 100px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
}
|
||||
#ref_div3 {
|
||||
height: 120px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
p {
|
||||
border: 1px solid #000;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#p1 {
|
||||
inline-size: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
#p2 {
|
||||
height: 50px;
|
||||
inline-size: 100px;
|
||||
}
|
||||
#ref_p1 {
|
||||
height: 50px;
|
||||
}
|
||||
#ref_p2 {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border: 1px solid #000;
|
||||
display: table;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.tablecell {
|
||||
display: table-cell;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#table1_cell {
|
||||
inline-size: 40px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
block-size: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
#table2_cell {
|
||||
inline-size: 100px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
block-size: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
#table3_cell {
|
||||
inline-size: 120px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
block-size: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
#ref_table1_cell {
|
||||
height: 40px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
#ref_table2_cell {
|
||||
height: 100px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
#ref_table3_cell {
|
||||
height: 120px;
|
||||
min-height: 50px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><div id="div1"></div>
|
||||
<div id="div2"></div>
|
||||
<div id="div3"></div>
|
||||
<div id="ref_div1"></div>
|
||||
<div id="ref_div2"></div>
|
||||
<div id="ref_div3"></div>
|
||||
|
||||
<p id="p1">
|
||||
</p><p id="p2">
|
||||
</p><p id="ref_p1">
|
||||
</p><p id="ref_p2">
|
||||
|
||||
</p><div class="table">
|
||||
<div id="table1_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="table2_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="table3_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="ref_table1_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="ref_table2_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="ref_table3_cell" class="tablecell"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("div1", "ref_div1"));
|
||||
assert_true(compareWidthHeight("div2", "ref_div2"));
|
||||
assert_true(compareWidthHeight("div3", "ref_div3"));
|
||||
}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size in vertical-lr");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("p1", "ref_p1"));
|
||||
assert_true(compareWidthHeight("p2", "ref_p2"));
|
||||
}, "Check that height override inline-size and vice versa in vertical-lr");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
|
||||
assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
|
||||
assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
|
||||
}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size in table vertical-lr");
|
||||
</script>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Logical Properties: {max-,min-}inline-size</title>
|
||||
<link href="mailto:openxu@gmail.com" rel="author" title="Xu Xing">
|
||||
<link href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties" rel="help">
|
||||
<link href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical" rel="help">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/style-check.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#div1 {
|
||||
inline-size: 40px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#div2 {
|
||||
inline-size: 100px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#div3 {
|
||||
inline-size: 120px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
#ref_div1 {
|
||||
width: 40px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
}
|
||||
#ref_div2 {
|
||||
width: 100px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
}
|
||||
#ref_div3 {
|
||||
width: 120px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
p {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#p1 {
|
||||
inline-size: 100px;
|
||||
width: 50px;
|
||||
}
|
||||
#p2 {
|
||||
width: 50px;
|
||||
inline-size: 100px;
|
||||
}
|
||||
#ref_p1 {
|
||||
width: 50px;
|
||||
}
|
||||
#ref_p2 {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border: 1px solid #000;
|
||||
display: table;
|
||||
}
|
||||
.tablecell {
|
||||
display: table-cell;
|
||||
}
|
||||
#table1_cell {
|
||||
inline-size: 40px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
block-size: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
#table2_cell {
|
||||
inline-size: 100px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
block-size: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
#table3_cell {
|
||||
inline-size: 120px;
|
||||
min-inline-size: 50px;
|
||||
max-inline-size: 100px;
|
||||
block-size: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
#ref_table1_cell {
|
||||
width: 40px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
#ref_table2_cell {
|
||||
width: 100px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
#ref_table3_cell {
|
||||
width: 120px;
|
||||
min-width: 50px;
|
||||
max-width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><div id="div1"></div>
|
||||
<div id="div2"></div>
|
||||
<div id="div3"></div>
|
||||
<div id="ref_div1"></div>
|
||||
<div id="ref_div2"></div>
|
||||
<div id="ref_div3"></div>
|
||||
|
||||
<p id="p1">
|
||||
</p><p id="p2">
|
||||
</p><p id="ref_p1">
|
||||
</p><p id="ref_p2">
|
||||
|
||||
</p><div class="table">
|
||||
<div id="table1_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="table2_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="table3_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="ref_table1_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="ref_table2_cell" class="tablecell"></div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div id="ref_table3_cell" class="tablecell"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("div1", "ref_div1"));
|
||||
assert_true(compareWidthHeight("div2", "ref_div2"));
|
||||
assert_true(compareWidthHeight("div3", "ref_div3"));
|
||||
}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("p1", "ref_p1"));
|
||||
assert_true(compareWidthHeight("p2", "ref_p2"));
|
||||
}, "Check that width override inline-size and vice versa");
|
||||
|
||||
test(function () {
|
||||
assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
|
||||
assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
|
||||
assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
|
||||
}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size in table");
|
||||
</script>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Logical Properties: {max-,min-}block-size</title>
|
||||
<link href="mailto:openxu@gmail.com" rel="author" title="Xu Xing">
|
||||
<link href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties" rel="help">
|
||||
<link href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical" rel="help">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style> #dummy {} </style>
|
||||
|
||||
<script>
|
||||
function isValidDeclaration(cssText) {
|
||||
var cssRule = document.styleSheets[0].cssRules[0];
|
||||
cssRule.style = cssText;
|
||||
var valid = (cssRule.style.length > 0);
|
||||
cssRule.style = "";
|
||||
return valid;
|
||||
}
|
||||
var tests = [
|
||||
{cssText:"block-size: 1"},
|
||||
{cssText:"min-block-size: 1"},
|
||||
{cssText:"max-block-size: 1"},
|
||||
{cssText:"inline-size: 1"},
|
||||
{cssText:"min-inline-size: 1"},
|
||||
{cssText:"max-inline-size: 1"},
|
||||
];
|
||||
tests.forEach(function(t) {
|
||||
test(() => assert_false(isValidDeclaration(t.cssText)), "Check that unitless lengths are not valid for logical properties in quirks mode");
|
||||
});
|
||||
</script>
|
||||
</head><body></body></html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: positioning of an orthogonal (horizontal-tb) block alongside vertical-rl floats</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283721" title="Bug 1283721: Incorrect positioning of orthogonal (horizontal-tb) block alongside vertical-rl floats">
|
||||
<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/ortho-htb-alongside-vrl-floats-002-ref.htm">
|
||||
|
||||
<!--
|
||||
The 'horizontal-tb' equivalent of this test is
|
||||
http://www.gtalbot.org/BugzillaSection/Bug1283721-ortho-htb-alongside-vrl-floats-006htb.html
|
||||
-->
|
||||
|
||||
<meta content="image" name="flags">
|
||||
<meta content="This test checks that non-positioned block boxes created after the float box flow vertically as if the float did not exist. In this test, the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient (logical width) space." name="assert">
|
||||
<meta name="DC.date.created" content="2016-07-04T09:54:03+11:00" scheme="W3CDTF">
|
||||
<meta name="DC.date.modified" content="2016-07-21T09:54:03+11:00" scheme="W3CDTF">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
minimum used height of the document root element is 176px;
|
||||
less than 176px will make the reference file no longer reliable.
|
||||
|
||||
36px : image intrinsic height
|
||||
+
|
||||
4px : descender space below baseline
|
||||
=========
|
||||
40px : 1st table with 'height: 25%'
|
||||
multiplied by
|
||||
4
|
||||
=========
|
||||
160px : height of the 3 tables
|
||||
+
|
||||
8px : body's margin-top
|
||||
+
|
||||
8px : body's margin-bottom
|
||||
=========
|
||||
176px
|
||||
*/
|
||||
|
||||
div
|
||||
{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#first-blue-float
|
||||
{
|
||||
background-color: blue;
|
||||
float: left;
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
div#second-olive-float-with-clear
|
||||
{
|
||||
background-color: olive;
|
||||
clear: left;
|
||||
float: left;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
div#orange-horiz-tb
|
||||
{
|
||||
background-color: orange;
|
||||
height: 75%;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if the orange rectangle
|
||||
is below the blue rectangle.
|
||||
-->
|
||||
|
||||
<div id="first-blue-float"> </div>
|
||||
|
||||
<div id="second-olive-float-with-clear"> </div>
|
||||
|
||||
<div id="orange-horiz-tb"> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: positioning of an orthogonal (horizontal-tb) block alongside vertical-rl floats</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283721" title="Bug 1283721: Incorrect positioning of orthogonal (horizontal-tb) block alongside vertical-rl floats">
|
||||
<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/ortho-htb-alongside-vrl-floats-006-ref.htm">
|
||||
|
||||
<!--
|
||||
The 'horizontal-tb' equivalent of this test is
|
||||
http://www.gtalbot.org/BugzillaSection/Bug1283721-new-block-form-ctxt-alongside-floats-005.html
|
||||
-->
|
||||
|
||||
<meta content="image" name="flags">
|
||||
<meta content="This test checks that non-positioned block boxes created after the float box flow vertically as if the float did not exist. In this test, the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient (logical width) space: in this test, this is the blue rectangle." name="assert">
|
||||
<meta name="DC.date.created" content="2016-07-04T09:54:03+11:00" scheme="W3CDTF">
|
||||
<meta name="DC.date.modified" content="2016-07-21T09:54:03+11:00" scheme="W3CDTF">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#tall-fuchsia-float
|
||||
{
|
||||
background-color: fuchsia;
|
||||
float: left;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
div#second-blue-float
|
||||
{
|
||||
background-color: blue;
|
||||
clear: left;
|
||||
float: left;
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
div#third-olive-float-with-clear
|
||||
{
|
||||
background-color: olive;
|
||||
clear: left;
|
||||
float: left;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
div#fourth-fuchsia-float-with-clear
|
||||
{
|
||||
background-color: fuchsia;
|
||||
clear: left;
|
||||
float: left;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
div#orange-horiz-tb
|
||||
{
|
||||
background-color: orange;
|
||||
height: 50%;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if the orange rectangle
|
||||
is below the blue rectangle.
|
||||
-->
|
||||
|
||||
<div id="tall-fuchsia-float"> </div>
|
||||
|
||||
<div id="second-blue-float"> </div>
|
||||
|
||||
<div id="third-olive-float-with-clear"> </div>
|
||||
|
||||
<div id="fourth-fuchsia-float-with-clear"> </div>
|
||||
|
||||
<div id="orange-horiz-tb"> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: positioning of an orthogonal (horizontal-tb) block alongside vertical-rl floats</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283721" title="Bug 1283721: Incorrect positioning of orthogonal (horizontal-tb) block alongside vertical-rl floats">
|
||||
<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/ortho-htb-alongside-vrl-floats-010-ref.htm">
|
||||
|
||||
<!--
|
||||
The 'horizontal-tb' equivalent of this test is
|
||||
http://www.gtalbot.org/BugzillaSection/Bug1283721-new-block-form-ctxt-alongside-floats-004.html
|
||||
-->
|
||||
|
||||
<meta content="image" name="flags">
|
||||
<meta content="This test checks that non-positioned block boxes created after the float box flow vertically as if the float did not exist. In this test, the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient (logical width) space: in this test, this is the blue rectangle." name="assert">
|
||||
<meta name="DC.date.created" content="2016-07-04T09:54:03+11:00" scheme="W3CDTF">
|
||||
<meta name="DC.date.modified" content="2016-07-21T09:54:03+11:00" scheme="W3CDTF">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#first-blue-float
|
||||
{
|
||||
background-color: blue;
|
||||
clear: left;
|
||||
float: left;
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
div#second-olive-float-with-clear
|
||||
{
|
||||
background-color: olive;
|
||||
clear: left;
|
||||
float: left;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
div#third-fuchsia-float-with-clear
|
||||
{
|
||||
background-color: fuchsia;
|
||||
clear: left;
|
||||
float: left;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
div#orange-horiz-tb
|
||||
{
|
||||
background-color: orange;
|
||||
height: 50%;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if the orange rectangle
|
||||
is below the blue rectangle.
|
||||
-->
|
||||
|
||||
<div id="first-blue-float"> </div>
|
||||
|
||||
<div id="second-olive-float-with-clear"> </div>
|
||||
|
||||
<div id="third-fuchsia-float-with-clear"> </div>
|
||||
|
||||
<div id="orange-horiz-tb"> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: positioning of an orthogonal (horizontal-tb) block alongside vertical-rl floats</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283721" title="Bug 1283721: Incorrect positioning of orthogonal (horizontal-tb) block alongside vertical-rl floats">
|
||||
<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/ortho-htb-alongside-vrl-floats-014-ref.htm">
|
||||
|
||||
<!--
|
||||
The 'horizontal-tb' equivalent of this test is
|
||||
http://www.gtalbot.org/BugzillaSection/Bug1283721-ortho-htb-alongside-vrl-floats-007htb.html
|
||||
-->
|
||||
|
||||
<meta content="image" name="flags">
|
||||
<meta content="This test checks that non-positioned block boxes created after the float box flow vertically as if the float did not exist. In this test, the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient (logical width) space." name="assert">
|
||||
<meta name="DC.date.created" content="2016-07-04T09:54:03+11:00" scheme="W3CDTF">
|
||||
<meta name="DC.date.modified" content="2016-07-21T09:54:03+11:00" scheme="W3CDTF">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
minimum used height of the document root element is 176px;
|
||||
less than 176px will make the reference file no longer reliable.
|
||||
|
||||
36px : image intrinsic height
|
||||
+
|
||||
4px : descender space below baseline
|
||||
=========
|
||||
40px : 1st table with 'height: 25%'
|
||||
multiplied by
|
||||
4
|
||||
=========
|
||||
160px : height of the 3 tables
|
||||
+
|
||||
8px : body's margin-top
|
||||
+
|
||||
8px : body's margin-bottom
|
||||
=========
|
||||
176px
|
||||
*/
|
||||
|
||||
div
|
||||
{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#first-blue-float
|
||||
{
|
||||
background-color: olive;
|
||||
float: left;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
div#second-olive-float-with-clear
|
||||
{
|
||||
background-color: blue;
|
||||
clear: left;
|
||||
float: left;
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
div#orange-horiz-tb
|
||||
{
|
||||
background-color: orange;
|
||||
height: 75%;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if the orange rectangle
|
||||
is below the blue rectangle.
|
||||
-->
|
||||
|
||||
<div id="first-blue-float"> </div>
|
||||
|
||||
<div id="second-olive-float-with-clear"> </div>
|
||||
|
||||
<div id="orange-horiz-tb"> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
<style>
|
||||
.test {
|
||||
border:thin solid;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<!--
|
||||
Original test is
|
||||
http://test.csswg.org/suites/css2.1/latest/html4/outline-layout-004.htm
|
||||
-->
|
||||
|
||||
<title>CSS Writing Mode Test: outline and multi-line non-replaced inline box</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" rel="help" title="7.1. Principles of Layout in Vertical Writing Modes">
|
||||
<link href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" rel="help" title="18.4 Dynamic outlines: the 'outline' property">
|
||||
<link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=266122" title="Bug 266122: Outline applied on a multi-line element should encompass all the line boxes and stay connected">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="Outline border must be connected and must enclose entirely a multi-line (non-replaced) inline box in a vertical writing-mode.">
|
||||
|
||||
<meta name="DC.date.created" content="2016-04-30T09:54:03+11:00" scheme="W3CDTF">
|
||||
<meta name="DC.date.modified" content="2016-09-22T09:54:03+11:00" scheme="W3CDTF">
|
||||
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
font-size: 20px;
|
||||
height: 200px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
outline: blue solid 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if 1 and only 1 blue border encloses a whole set of several "Filler Text" (each rotated 90 degrees clockwise). The shape of the blue border may be non-rectangular but this is not required.</p>
|
||||
|
||||
<div><span>Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<!--
|
||||
Original test is
|
||||
http://test.csswg.org/suites/css2.1/latest/html4/outline-layout-004.htm
|
||||
-->
|
||||
|
||||
<title>CSS Writing Mode Test: outline and multi-line non-replaced inline box</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" rel="help" title="7.1. Principles of Layout in Vertical Writing Modes">
|
||||
<link href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" rel="help" title="18.4 Dynamic outlines: the 'outline' property">
|
||||
<link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=266122" title="Bug 266122: Outline applied on a multi-line element should encompass all the line boxes and stay connected">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="Outline border must be connected and must enclose entirely a multi-line (non-replaced) inline box in a vertical writing-mode.">
|
||||
|
||||
<meta name="DC.date.created" content="2016-04-30T09:54:03+11:00" scheme="W3CDTF">
|
||||
<meta name="DC.date.modified" content="2016-09-22T09:54:03+11:00" scheme="W3CDTF">
|
||||
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
font-size: 20px;
|
||||
height: 200px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
outline: blue solid 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if 1 and only 1 blue border encloses a whole set of several "Filler Text" (each rotated 90 degrees clockwise). The shape of the blue border may be non-rectangular but this is not required.</p>
|
||||
|
||||
<div><span>Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,42 +2,24 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-12-30 -->
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-12-30 and 2016-11-14 -->
|
||||
|
||||
<meta name="flags" content="ahem">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
direction: ltr;
|
||||
background-color: blue;
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
width: 21em;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
vertical-align: top;
|
||||
padding: 1em;
|
||||
width: 19em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><img src="support/blue20x20.png" width="420" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="420" height="20" alt="Image download support must be enabled">
|
||||
</div>
|
||||
<div>P1ro A1ro S1ro S1ro P P A A S S P P A A S S P4ro A4ro S4ro S4ro P A A S S P A A S S P A A S7ro S7ro</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,13 +2,14 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-11-26 -->
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-11-26 and 2016-11-14 -->
|
||||
|
||||
<!-- This reference file is the right-aligned version of
|
||||
block-flow-direction-001-ref.xht
|
||||
-->
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="flags" content="ahem">
|
||||
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
|
|
@ -17,36 +18,19 @@
|
|||
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
direction: ltr;
|
||||
background-color: blue;
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
width: 21em;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
vertical-align: top;
|
||||
padding: 1em;
|
||||
width: 19em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div><img src="support/blue20x20.png" width="420" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="420" height="20" alt="Image download support must be enabled">
|
||||
</div>
|
||||
<div>P1ro A1ro S1ro S1ro P P A A S S P P A A S S P4ro A4ro S4ro S4ro P A A S S P A A S S P A A S7ro S7ro</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,48 +2,32 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-11-22 -->
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-11-22 and 2016-11-14 -->
|
||||
|
||||
<!-- This reference file is the bottom-left-corner version of
|
||||
block-flow-direction-001-ref.xht
|
||||
-->
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="flags" content="ahem">
|
||||
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
background-color: blue;
|
||||
bottom: 8px;
|
||||
color: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
left: 8px;
|
||||
padding: 1em;
|
||||
position: absolute;
|
||||
width: 21em;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
vertical-align: top;
|
||||
width: 19em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div><img src="support/blue20x20.png" width="420" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="420" height="20" alt="Image download support must be enabled">
|
||||
</div>
|
||||
<div>P1ro A1ro S1ro S1ro P P A A S S P P A A S S P4ro A4ro S4ro S4ro P A A S S P A A S S P A A S7ro S7ro</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Values and Units Test Reference File</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
svg {
|
||||
width: 10ch;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<svg viewBox="0 0 100 100"><rect y="0" width="100" fill="green" x="0" height="100"></rect></svg>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<style>
|
||||
.direction-rtl {
|
||||
direction: rtl;
|
||||
|
|
@ -72,4 +72,5 @@
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<link href="http://google.com/+MasatakaYakura" rel="author" title="Masataka Yakura">
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
|
||||
<meta content="asis" name="flags">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
div > p
|
||||
{
|
||||
border: black solid 1px;
|
||||
}
|
||||
|
||||
span.full-width
|
||||
{
|
||||
text-transform: full-width;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
|
||||
|
||||
<div>
|
||||
|
||||
<p><span class="full-width">4</span>月</p>
|
||||
|
||||
<!-- 4 is the ISO-Latin1 digit 4 -->
|
||||
|
||||
<p>４月</p>
|
||||
|
||||
<!-- ４ is the FULLWIDTH DIGIT 4 (≈ <wide> 0034 4)-->
|
||||
|
||||
<p>４月</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<link href="http://google.com/+MasatakaYakura" rel="author" title="Masataka Yakura">
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
|
||||
<meta content="asis" name="flags">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-size: 64px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div > p
|
||||
{
|
||||
border: black solid 1px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
|
||||
|
||||
<div>
|
||||
|
||||
<p>4月</p>
|
||||
|
||||
<!-- 4 is the ISO-Latin1 digit 4 -->
|
||||
|
||||
<p>４月</p>
|
||||
|
||||
<!-- ４ is the FULLWIDTH DIGIT 4 (≈ <wide> 0034 4)-->
|
||||
|
||||
<p>４月</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<link href="http://google.com/+MasatakaYakura" rel="author" title="Masataka Yakura">
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
|
||||
<meta content="asis" name="flags">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
div > p
|
||||
{
|
||||
border: black solid 1px;
|
||||
}
|
||||
|
||||
span.full-width
|
||||
{
|
||||
text-transform: full-width;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
|
||||
|
||||
<div>
|
||||
|
||||
<p><span class="full-width">28</span>日</p>
|
||||
|
||||
<p>２８日</p>
|
||||
|
||||
<!-- ２ is the FULLWIDTH DIGIT 2 (≈ <wide> 0032 2)-->
|
||||
|
||||
<!-- ８ is the FULLWIDTH DIGIT 8 (≈ <wide> 0038 8)-->
|
||||
|
||||
<p>28日</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<link href="http://google.com/+MasatakaYakura" rel="author" title="Masataka Yakura">
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
|
||||
<meta content="asis" name="flags">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-size: 64px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div > p
|
||||
{
|
||||
border: black solid 1px;
|
||||
}
|
||||
|
||||
span.full-width
|
||||
{
|
||||
text-transform: full-width;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the glyphs in the 3 rectangles have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>; a different inter-character spacing is considered as PASS.</p>
|
||||
|
||||
<div>
|
||||
|
||||
<p><span class="full-width">28</span>日</p>
|
||||
|
||||
<p>２８日</p>
|
||||
|
||||
<!-- ２ is the FULLWIDTH DIGIT 2 (≈ <wide> 0032 2)-->
|
||||
|
||||
<!-- ８ is the FULLWIDTH DIGIT 8 (≈ <wide> 0038 8)-->
|
||||
|
||||
<p>28日</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<link href="http://google.com/+MasatakaYakura" rel="author" title="Masataka Yakura">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the following paragraphs are identical:</p>
|
||||
|
||||
<div>
|
||||
<p>６月19日</p>
|
||||
<p>６月19日</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<link href="http://google.com/+MasatakaYakura" rel="author" title="Masataka Yakura">
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the following paragraphs are identical:</p>
|
||||
|
||||
<div class="test">
|
||||
<p>６月19日</p>
|
||||
<p>６月19日</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<link href="http://google.com/+MasatakaYakura" rel="author" title="Masataka Yakura">
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.tcu-all {
|
||||
text-combine-upright: all;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if the following paragraphs are identical:</p>
|
||||
|
||||
<div class="test">
|
||||
<p>６月<span class="tcu-all">19</span>日</p>
|
||||
<p>６月<span class="tcu-all">19</span>日</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Values and Units Test Reference File</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
svg { width: 10ic; }
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<svg viewBox="0 0 100 100"><rect y="0" width="100" fill="green" x="0" height="100"></rect></svg>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Values and Units Test Reference File</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
svg {
|
||||
width: 10ic;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<svg viewBox="0 0 100 100"><rect y="0" width="100" fill="green" x="0" height="100"></rect></svg>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS 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;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are 3 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the three "123456" numbers must be enclosed by the three blue borders.</p>
|
||||
|
||||
<div>123456</div>
|
||||
|
||||
<div>123456</div>
|
||||
|
||||
<div>123456</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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="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;
|
||||
float: left;
|
||||
font-size: 32px;
|
||||
margin: 1em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are 3 identical blue rectangles with "123456" rotated 90 degrees clockwise. The size of each blue rectangles must be identical and the three "123456" numbers must be enclosed by the three blue borders.</p>
|
||||
|
||||
<div>123456</div>
|
||||
|
||||
<div>123456</div>
|
||||
|
||||
<div>123456</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Reference: border-block and border-inline logical properties in different writing modes</title>
|
||||
<link href="mailto:manishearth@gmail.com" rel="author" title="Manish Goregaokar">
|
||||
<style>
|
||||
#body tr td:nth-child(2) div {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
#body tr td:nth-child(3) div {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
#body tr td:nth-child(4) div {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
#body tr td:nth-child(5) div {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
#body tr td:nth-child(6) div {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#body tr td:nth-child(7) div {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#body tr td:nth-child(8) div {
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
#body tr td:nth-child(9) div {
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
|
||||
#body tr td:nth-child(2n+2) div {
|
||||
direction: ltr;
|
||||
}
|
||||
#body tr td:nth-child(2n+3) div {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
border-bottom: 2px dotted blue;
|
||||
border-top: 2px dotted orange;
|
||||
}
|
||||
.right {
|
||||
border-left: 2px dotted blue;
|
||||
border-right: 2px dotted orange;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
border-top: 2px dotted blue;
|
||||
border-bottom: 2px dotted orange;
|
||||
}
|
||||
.left {
|
||||
border-right: 2px dotted blue;
|
||||
border-left: 2px dotted orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if orange dots are opposite to the blue dots in each cell. Orange dots should be on the (physical) side specified by the text in the cell.
|
||||
</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>writing mode</th><th colspan="2">horizontal-tb</th><th colspan="2">vertical-rl</th><th colspan="2">vertical-lr</th><th colspan="2">sideways-lr</th></tr>
|
||||
<tr><th>direction</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th></tr>
|
||||
</thead>
|
||||
<tbody id="body">
|
||||
<tr id="block-start"><th>block-start</th> <td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="left">left</div></div></td></tr>
|
||||
<tr id="block-end"><th>block-end</th> <td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="right">right</div></div></td></tr>
|
||||
<tr id="inline-start"><th>inline-start</th> <td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="top">top</div></div></td></tr>
|
||||
<tr id="inline-end"><th>inline-end</th> <td><div class="outer"><div class="right">right</div></div></td><td><div class="outer"><div class="left">left</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td><td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="top">top</div></div></td><td><div class="outer"><div class="bottom">bottom</div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue