mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update CSS tests to revision 584b6cdd10401df603bd7bdf4ec801fcddc65468
This commit is contained in:
Ms2ger
parent
8d21a79246
commit
58b5cd27de
1279 changed files with 30378 additions and 18158 deletions
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>CSS Test: The bidi algorithm and inlines in CSS</title>
|
||||
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
|
||||
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/inline/bidi/004.html" type="text/html">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#bidi-box-model">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-3/#white-space-rules">
|
||||
<!-- Spaces are collapsed, then reordered, then trimmed. -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#bidi-control-codes">
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#bidi-box-model">
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction">
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#white-space-model">
|
||||
<link rel="help" href="http://unicode.org/reports/tr9/">
|
||||
<link rel="help" href="http://www.w3.org/TR/html5/rendering.html#phrasing-content-0"> <!-- <br> is a bidi paragraph separator -->
|
||||
<link rel="match" href="reference/bidi-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="may21 ahem">
|
||||
<style type="text/css">
|
||||
div p { width: 28em; border: solid; margin: 1em; padding: 0.5em; background: #FFFFCC; color: black; font: 1em/1 Ahem; }
|
||||
.test { border: solid; padding: 0.4em 1em; line-height: 3em; }
|
||||
.control { line-height: 3em; }
|
||||
.control.start { border-style: solid none solid solid; padding: 0.4em 0 0.4em 1em; }
|
||||
.control.middle { border-style: solid none solid none; padding: 0.4em 0 0.4em 0; }
|
||||
.control.end { border-style: solid solid solid none; padding: 0.4em 1em 0.4em 0; }
|
||||
.a { color: navy; }
|
||||
.b { color: orange; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p> The following two blocks should be identical, including overflow. (Force bidi: א) </p>
|
||||
<div>
|
||||
<p>
|
||||
<span class="control a start">pppp pppX ppXp ppXX pXpp</span><br><span class="control b start">pXpX</span> pXXp pXXX Xppp<span class="control a end"> XppX</span><br><span class="control b end">XpXp XpXX XXpp XXpX XXXp</span>
|
||||
</p>
|
||||
<p>
|
||||
<!-- (note that everything between the RLO to the PDF is backwards) -->
|
||||
<!-- line 1...................--> <!-- line 2........................................--> <!-- line 3...................-->
|
||||
<span class="test a"> pppp pppX ppXp ‮ ppXp XXpp XppX </span> pppX XXXp pXXp <span class="test b"> XpXp ppXX XXpX pXpX ‬ XXpX XXXp </span>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Inline Direction and Bidirectionality (162 tests)</h2>
|
||||
<h2>Inline Direction and Bidirectionality (163 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -1613,7 +1613,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css-writing-modes-3/#bidi-box-model">2.4 Box model for inline boxes in bidirectional context</a></th></tr>
|
||||
<!-- 25 tests -->
|
||||
<!-- 26 tests -->
|
||||
<tr id="bidi-001-2.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="bidi-001.htm">bidi-001</a></strong></td>
|
||||
|
|
@ -1647,6 +1647,14 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="bidi-004-2.4" class="primary ahem may21">
|
||||
<td><strong>
|
||||
<a href="bidi-004.htm">bidi-004</a></strong></td>
|
||||
<td><a href="reference/bidi-004-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="may21" title="Behavior tested is preferred but optional">Optional</abbr></td>
|
||||
<td>The bidi algorithm and inlines in CSS
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="bidi-005-2.4" class="">
|
||||
<td>
|
||||
<a href="bidi-005.htm">bidi-005</a></td>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Inline-level Alignment (70 tests)</h2>
|
||||
<h2>Inline-level Alignment (38 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -485,359 +485,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">4.4 Baseline Alignment</a></th></tr>
|
||||
<!-- 32 tests -->
|
||||
<tr id="vertical-alignment-002a-4.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-002a.htm">vertical-alignment-002a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'baseline' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-002b-4.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-002b.htm">vertical-alignment-002b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'baseline' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-003a-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-003a.htm">vertical-alignment-003a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'baseline' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-003b-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-003b.htm">vertical-alignment-003b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'baseline' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-005a-4.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-005a.htm">vertical-alignment-005a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'sub' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-005b-4.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-005b.htm">vertical-alignment-005b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'sub' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-008a-4.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-008a.htm">vertical-alignment-008a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'super' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-008b-4.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-008b.htm">vertical-alignment-008b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'super' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-011a-4.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-011a.htm">vertical-alignment-011a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'zero length (0em)' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-011b-4.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-011b.htm">vertical-alignment-011b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'zero length (0em)' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-012l-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-012l.htm">vertical-alignment-012l</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'zero length (0em)' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-012r-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-012r.htm">vertical-alignment-012r</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'zero length (0em)' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-014a-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-014a.htm">vertical-alignment-014a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'positive length (0.8em)' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-014b-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-014b.htm">vertical-alignment-014b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'positive length (0.8em)' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-015a-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-015a.htm">vertical-alignment-015a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'positive length (0.5em)' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-015b-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-015b.htm">vertical-alignment-015b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'positive length (0.5em)' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-017a-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-017a.htm">vertical-alignment-017a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'negative length (-0.2em)' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-017b-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-017b.htm">vertical-alignment-017b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'negative length (-0.2em)' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-018a-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-018a.htm">vertical-alignment-018a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'negative length (-0.5em)' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-018b-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-018b.htm">vertical-alignment-018b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'negative length (-0.5em)' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-020a-4.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-020a.htm">vertical-alignment-020a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'zero percentage (0%)' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-020b-4.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-020b.htm">vertical-alignment-020b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'zero percentage (0%)' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-021a-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-021a.htm">vertical-alignment-021a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'zero percentage (0%)' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-021b-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-021b.htm">vertical-alignment-021b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'zero percentage (0%)' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-023a-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-023a.htm">vertical-alignment-023a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'positive length (0.8em)' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-023b-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-023b.htm">vertical-alignment-023b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'positive percentage (80%)' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-024a-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-024a.htm">vertical-alignment-024a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'positive percentage (50%)' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-024b-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-024b.htm">vertical-alignment-024b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'positive percentage (50%)' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-026a-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-026a.htm">vertical-alignment-026a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'negative percentage (-20%)' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-026b-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-026b.htm">vertical-alignment-026b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'negative length (-20%)' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-027a-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-027a.htm">vertical-alignment-027a</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'negative percentage (-50%)' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-027b-4.4" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-027b.htm">vertical-alignment-027b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>vertical align - 'negative percentage (-50%)' (central baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.4.#dominant-baseline">
|
||||
<!-- 0 tests -->
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Abstract Box Layout (489 tests)</h2>
|
||||
<h2>Abstract Box Layout (495 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -4637,7 +4637,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.5">+</a>
|
||||
<a href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">7.5 Line-Relative Mappings</a></th></tr>
|
||||
<!-- 26 tests -->
|
||||
<!-- 32 tests -->
|
||||
<tr id="text-decoration-sidewaysleft-vlr-003-7.5" class="primary">
|
||||
<td><strong>
|
||||
<a href="text-decoration-sidewaysleft-vlr-003.htm">text-decoration-sidewaysleft-vlr-003</a></strong></td>
|
||||
|
|
@ -4836,10 +4836,76 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-002-7.5" class="primary ahem">
|
||||
<tr id="underline-font-size-vlr-003-7.5" class="primary">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-002.htm">vertical-alignment-new-002</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-002-ref.htm">=</a> </td>
|
||||
<a href="underline-font-size-vlr-003.htm">underline-font-size-vlr-003</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>'text-decoration: underline' with various font sizes
|
||||
<ul class="assert">
|
||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="underline-font-size-vlr-005-7.5" class="primary">
|
||||
<td><strong>
|
||||
<a href="underline-font-size-vlr-005.htm">underline-font-size-vlr-005</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>'text-decoration: underline' with various font sizes and mixed text
|
||||
<ul class="assert">
|
||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="underline-font-size-vrl-002-7.5" class="primary">
|
||||
<td><strong>
|
||||
<a href="underline-font-size-vrl-002.htm">underline-font-size-vrl-002</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>'text-decoration: underline' with various font sizes
|
||||
<ul class="assert">
|
||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="underline-font-size-vrl-004-7.5" class="primary">
|
||||
<td><strong>
|
||||
<a href="underline-font-size-vrl-004.htm">underline-font-size-vrl-004</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>'text-decoration: underline' with various font sizes and mixed text
|
||||
<ul class="assert">
|
||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="underline-mixed-vlr-003-7.5" class="primary">
|
||||
<td><strong>
|
||||
<a href="underline-mixed-vlr-003.htm">underline-mixed-vlr-003</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>'text-decoration: underline' and mixed text
|
||||
<ul class="assert">
|
||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="underline-mixed-vrl-002-7.5" class="primary">
|
||||
<td><strong>
|
||||
<a href="underline-mixed-vrl-002.htm">underline-mixed-vrl-002</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>'text-decoration: underline' and mixed text
|
||||
<ul class="assert">
|
||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-002-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-002.htm">vertical-alignment-002</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-002-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'top' and vertical-rl writing-mode
|
||||
<ul class="assert">
|
||||
|
|
@ -4847,10 +4913,10 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-003-7.5" class="primary ahem">
|
||||
<tr id="vertical-alignment-003-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-003.htm">vertical-alignment-new-003</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-002-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-003.htm">vertical-alignment-003</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-002-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'top' and vertical-lr writing-mode
|
||||
<ul class="assert">
|
||||
|
|
@ -4858,10 +4924,10 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-004-7.5" class="primary ahem">
|
||||
<tr id="vertical-alignment-004-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-004.htm">vertical-alignment-new-004</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-004-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-004.htm">vertical-alignment-004</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-004-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'text-top' and vertical-rl writing-mode
|
||||
<ul class="assert">
|
||||
|
|
@ -4869,10 +4935,10 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-005-7.5" class="primary ahem">
|
||||
<tr id="vertical-alignment-005-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-005.htm">vertical-alignment-new-005</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-004-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-005.htm">vertical-alignment-005</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-004-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'text-top' and vertical-lr writing-mode
|
||||
<ul class="assert">
|
||||
|
|
@ -4880,10 +4946,10 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-006-7.5" class="primary ahem">
|
||||
<tr id="vertical-alignment-006-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-006.htm">vertical-alignment-new-006</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-006-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-006.htm">vertical-alignment-006</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-006-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'text-bottom' and vertical-rl writing-mode
|
||||
<ul class="assert">
|
||||
|
|
@ -4891,10 +4957,10 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-007-7.5" class="primary ahem">
|
||||
<tr id="vertical-alignment-007-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-007.htm">vertical-alignment-new-007</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-006-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-007.htm">vertical-alignment-007</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-006-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'text-bottom' and vertical-lr writing-mode
|
||||
<ul class="assert">
|
||||
|
|
@ -4902,10 +4968,10 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-008-7.5" class="primary ahem">
|
||||
<tr id="vertical-alignment-008-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-008.htm">vertical-alignment-new-008</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-008-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-008.htm">vertical-alignment-008</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-008-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'bottom' and vertical-rl writing-mode
|
||||
<ul class="assert">
|
||||
|
|
@ -4913,10 +4979,10 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-009-7.5" class="primary ahem">
|
||||
<tr id="vertical-alignment-009-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-009.htm">vertical-alignment-new-009</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-008-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-009.htm">vertical-alignment-009</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-008-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical-align - 'bottom' and vertical-lr writing-mode
|
||||
<ul class="assert">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<!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="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<meta name="flags" content="ahem">
|
||||
|
||||
<style type="text/css">
|
||||
div p { width: 28em; border: solid; margin: 1em; padding: 0.5em; background: #FFFFCC; color: black; font: 1em/1 Ahem; }
|
||||
.control { line-height: 3em; }
|
||||
.control.start { border-style: solid none solid solid; padding: 0.4em 0 0.4em 1em; }
|
||||
.control.middle { border-style: solid none solid none; padding: 0.4em 0 0.4em 0; }
|
||||
.control.end { border-style: solid solid solid none; padding: 0.4em 1em 0.4em 0; }
|
||||
.a { color: navy; }
|
||||
.b { color: orange; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p> The following two blocks should be identical, including overflow. (Force bidi: א) </p>
|
||||
<div>
|
||||
<p>
|
||||
<span class="control a start">pppp pppX ppXp ppXX pXpp</span><br><span class="control b start">pXpX</span> pXXp pXXX Xppp<span class="control a end"> XppX</span><br><span class="control b end">XpXp XpXX XXpp XXpX XXXp</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="control a start">pppp pppX ppXp ppXX pXpp</span><br><span class="control b start">pXpX</span> pXXp pXXX Xppp<span class="control a end"> XppX</span><br><span class="control b end">XpXp XpXX XXpp XXpX XXXp</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-09-03 -->
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
img
|
||||
|
|
@ -17,7 +18,7 @@
|
|||
|
||||
img#orange
|
||||
{
|
||||
padding-left: 120px; /* = the position of orange square */
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
<p>Test passes if the right edge of an blue square is aligned with the left edge of a orange square.</p>
|
||||
|
||||
<div>
|
||||
<img id="blue" src="support/swatch-blue.png" width="60" height="60" alt="Image download support must be enabled"><br><!--
|
||||
<img id="blue" src="support/swatch-blue.png" width="60" height="60" alt="Image download support must be enabled"><!--
|
||||
--><img id="orange" src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled">
|
||||
</div>
|
||||
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-09-01 -->
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
img
|
||||
|
|
@ -12,13 +13,9 @@
|
|||
|
||||
img
|
||||
{
|
||||
padding-left: 60px; /* = the position of first orange square */
|
||||
padding-left: 60px; /* = position of orange squares */
|
||||
}
|
||||
|
||||
img + br + img
|
||||
{
|
||||
padding-left: 60px; /* = the position of second orange square*/
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-09-03 -->
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
img
|
||||
|
|
@ -12,12 +13,12 @@
|
|||
|
||||
img
|
||||
{
|
||||
padding-left: 15px; /* = the position of first orange square */
|
||||
padding-left: 60px; /* = the position of first orange square */
|
||||
}
|
||||
|
||||
img + br + img
|
||||
{
|
||||
padding-left: 15px; /* = the position of second orange square*/
|
||||
padding-left: 90px; /* = the position of second orange square*/
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -25,7 +26,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular orange polygon is straight and unbroken.</p>
|
||||
<p>Test passes if the <strong>right edge</strong> of an irregular orange polygon is straight and unbroken.</p>
|
||||
|
||||
<div>
|
||||
<img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled"><br><!--
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-09-03 -->
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
img#orange
|
||||
{
|
||||
padding-left: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the left edge of an blue square is aligned with the right edge of a orange square.</p>
|
||||
|
||||
<div>
|
||||
<img id="orange" src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled"><!--
|
||||
--><img src="support/swatch-blue.png" width="60" height="60" alt="Image download support must be enabled">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
img
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img#orange
|
||||
{
|
||||
padding-top: 60px; /* = the height of first character */
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the left edge of an orange square touches the right edge of a blue square.</p>
|
||||
|
||||
<div>
|
||||
<img src="support/swatch-blue.png" width="120" height="120" alt="Image download support must be enabled"><!--
|
||||
--><img id="orange" src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2208,6 +2208,14 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="bidi-004" class="ahem may21">
|
||||
<tr>
|
||||
<td rowspan="1" title="The bidi algorithm and inlines in CSS">
|
||||
<a href="bidi-004.htm">bidi-004</a></td>
|
||||
<td><a href="reference/bidi-004-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="may21" title="Behavior tested is preferred but optional">Optional</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="bidi-011" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="The bidi algorithm and inlines in CSS wrapping bidi formatting characters">
|
||||
|
|
@ -5752,67 +5760,67 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-new-002" class="ahem">
|
||||
<tbody id="vertical-alignment-002" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'top' and vertical-rl writing-mode">
|
||||
<a href="vertical-alignment-new-002.htm">vertical-alignment-new-002</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-002-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-002.htm">vertical-alignment-002</a></td>
|
||||
<td><a href="reference/vertical-alignment-002-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-new-003" class="ahem">
|
||||
<tbody id="vertical-alignment-003" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'top' and vertical-lr writing-mode">
|
||||
<a href="vertical-alignment-new-003.htm">vertical-alignment-new-003</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-002-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-003.htm">vertical-alignment-003</a></td>
|
||||
<td><a href="reference/vertical-alignment-002-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-new-004" class="ahem">
|
||||
<tbody id="vertical-alignment-004" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'text-top' and vertical-rl writing-mode">
|
||||
<a href="vertical-alignment-new-004.htm">vertical-alignment-new-004</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-004-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-004.htm">vertical-alignment-004</a></td>
|
||||
<td><a href="reference/vertical-alignment-004-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-new-005" class="ahem">
|
||||
<tbody id="vertical-alignment-005" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'text-top' and vertical-lr writing-mode">
|
||||
<a href="vertical-alignment-new-005.htm">vertical-alignment-new-005</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-004-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-005.htm">vertical-alignment-005</a></td>
|
||||
<td><a href="reference/vertical-alignment-004-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-new-006" class="ahem">
|
||||
<tbody id="vertical-alignment-006" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'text-bottom' and vertical-rl writing-mode">
|
||||
<a href="vertical-alignment-new-006.htm">vertical-alignment-new-006</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-006-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-006.htm">vertical-alignment-006</a></td>
|
||||
<td><a href="reference/vertical-alignment-006-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-new-007" class="ahem">
|
||||
<tbody id="vertical-alignment-007" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'text-bottom' and vertical-lr writing-mode">
|
||||
<a href="vertical-alignment-new-007.htm">vertical-alignment-new-007</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-006-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-007.htm">vertical-alignment-007</a></td>
|
||||
<td><a href="reference/vertical-alignment-006-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-new-008" class="ahem">
|
||||
<tbody id="vertical-alignment-008" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'bottom' and vertical-rl writing-mode">
|
||||
<a href="vertical-alignment-new-008.htm">vertical-alignment-new-008</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-008-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-008.htm">vertical-alignment-008</a></td>
|
||||
<td><a href="reference/vertical-alignment-008-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="vertical-alignment-new-009" class="ahem">
|
||||
<tbody id="vertical-alignment-009" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'bottom' and vertical-lr writing-mode">
|
||||
<a href="vertical-alignment-new-009.htm">vertical-alignment-new-009</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-008-ref.htm">=</a> </td>
|
||||
<a href="vertical-alignment-009.htm">vertical-alignment-009</a></td>
|
||||
<td><a href="reference/vertical-alignment-008-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -272,6 +272,7 @@ baseline-inline-replaced-003.htm == reference/baseline-inline-replaced-002-ref.h
|
|||
bidi-001.htm == reference/bidi-001-ref.htm
|
||||
bidi-002.htm == reference/bidi-002-ref.htm
|
||||
bidi-003.htm == reference/bidi-003-ref.htm
|
||||
bidi-004.htm == reference/bidi-004-ref.htm
|
||||
bidi-011.htm == reference/bidi-011-ref.htm
|
||||
bidi-box-model-001.htm == reference/bidi-box-model-001-ref.htm
|
||||
bidi-box-model-002.htm == reference/bidi-box-model-001-ref.htm
|
||||
|
|
@ -715,14 +716,14 @@ unicode-bidi-applies-to-012.htm == reference/direction-applies-to-008-ref.htm
|
|||
unicode-bidi-applies-to-013.htm == reference/direction-applies-to-008-ref.htm
|
||||
unicode-bidi-applies-to-014.htm == reference/direction-applies-to-008-ref.htm
|
||||
unicode-bidi-applies-to-015.htm == reference/direction-applies-to-008-ref.htm
|
||||
vertical-alignment-new-002.htm == reference/vertical-alignment-new-002-ref.htm
|
||||
vertical-alignment-new-003.htm == reference/vertical-alignment-new-002-ref.htm
|
||||
vertical-alignment-new-004.htm == reference/vertical-alignment-new-004-ref.htm
|
||||
vertical-alignment-new-005.htm == reference/vertical-alignment-new-004-ref.htm
|
||||
vertical-alignment-new-006.htm == reference/vertical-alignment-new-006-ref.htm
|
||||
vertical-alignment-new-007.htm == reference/vertical-alignment-new-006-ref.htm
|
||||
vertical-alignment-new-008.htm == reference/vertical-alignment-new-008-ref.htm
|
||||
vertical-alignment-new-009.htm == reference/vertical-alignment-new-008-ref.htm
|
||||
vertical-alignment-002.htm == reference/vertical-alignment-002-ref.htm
|
||||
vertical-alignment-003.htm == reference/vertical-alignment-002-ref.htm
|
||||
vertical-alignment-004.htm == reference/vertical-alignment-004-ref.htm
|
||||
vertical-alignment-005.htm == reference/vertical-alignment-004-ref.htm
|
||||
vertical-alignment-006.htm == reference/vertical-alignment-006-ref.htm
|
||||
vertical-alignment-007.htm == reference/vertical-alignment-006-ref.htm
|
||||
vertical-alignment-008.htm == reference/vertical-alignment-008-ref.htm
|
||||
vertical-alignment-009.htm == reference/vertical-alignment-008-ref.htm
|
||||
writing-mode-horizontal-001l.htm == reference/writing-mode-horizontal-001l-ref.htm
|
||||
writing-mode-horizontal-001r.htm == reference/writing-mode-horizontal-001r-ref.htm
|
||||
writing-mode-stretch-001.htm == reference/writing-mode-stretch-001-ref.htm
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<tbody id="s2">
|
||||
<tr><th><a href="chapter-2.htm">Chapter 2 -
|
||||
Inline Direction and Bidirectionality</a></th>
|
||||
<td>(162 Tests)</td></tr>
|
||||
<td>(163 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s3">
|
||||
<tr><th><a href="chapter-3.htm">Chapter 3 -
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<tbody id="s4">
|
||||
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
||||
Inline-level Alignment</a></th>
|
||||
<td>(70 Tests)</td></tr>
|
||||
<td>(38 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s5">
|
||||
<tr><th><a href="chapter-5.htm">Chapter 5 -
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<tbody id="s7">
|
||||
<tr><th><a href="chapter-7.htm">Chapter 7 -
|
||||
Abstract Box Layout</a></th>
|
||||
<td>(489 Tests)</td></tr>
|
||||
<td>(495 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s8">
|
||||
<tr><th><a href="chapter-8.htm">Chapter 8 -
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'text-decoration: underline' with various font sizes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
||||
<link rel="bookmark" href="http://www.w3.org/TR/css-text-decor-3/leftline-cross.png" title="">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
div#vrl
|
||||
{
|
||||
font-size: 4em;
|
||||
margin-left: 2em;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
span#outer
|
||||
{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
span#inner
|
||||
{
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
span#larger
|
||||
{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||
|
||||
<div id="vrl"><span id="outer"><span id="inner" lang="mn">ᠨ<span id="larger">ᠨᠨ</span>ᠨ</span></span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'text-decoration: underline' with various font sizes and mixed text</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
div#vrl
|
||||
{
|
||||
font-size: 4em;
|
||||
margin-left: 2em;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
span#outer
|
||||
{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
span#inner
|
||||
{
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
span#larger
|
||||
{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||
|
||||
<div id="vrl"><span id="outer"><span id="inner" lang="mn">ᠨ<span id="larger" lang="en">AB</span>ᠨ</span></span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'text-decoration: underline' with various font sizes</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
||||
<link rel="bookmark" href="http://www.w3.org/TR/css-text-decor-3/leftline-cross.png" title="">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
div#vrl
|
||||
{
|
||||
font-size: 4em;
|
||||
margin-left: 2em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
span#outer
|
||||
{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
span#inner
|
||||
{
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
span#larger
|
||||
{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||
|
||||
<div id="vrl"><span id="outer"><span id="inner" lang="ja">方<span id="larger">方方</span>方</span></span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'text-decoration: underline' with various font sizes and mixed text</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
div#vrl
|
||||
{
|
||||
font-size: 4em;
|
||||
margin-left: 2em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
span#outer
|
||||
{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
span#inner
|
||||
{
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
span#larger
|
||||
{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||
|
||||
<div id="vrl"><span id="outer"><span id="inner" lang="ja">方<span id="larger" lang="en">AB</span>方</span></span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'text-decoration: underline' and mixed text</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
div#vrl
|
||||
{
|
||||
font-size: 4em;
|
||||
margin-left: 2em;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
span#outer
|
||||
{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
span#inner
|
||||
{
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||
|
||||
<div id="vrl"><span id="outer"><span id="inner" lang="mn">ᠨ<span lang="en">AB</span>ᠨ</span></span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'text-decoration: underline' and mixed text</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" title="7.5 Line-Relative Mappings">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
div#vrl
|
||||
{
|
||||
font-size: 4em;
|
||||
margin-left: 2em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
span#outer
|
||||
{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
span#inner
|
||||
{
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||
|
||||
<div id="vrl"><span id="outer"><span id="inner" lang="ja">方<span lang="en">AB</span>方</span></span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,10 +3,11 @@
|
|||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'top' and vertical-rl writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-09-03 -->
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'top', the physical right (logical top) edge of an inline non-replaced box is aligned with the physical right (logical top) edge of its line box.">
|
||||
<link rel="match" href="reference/vertical-alignment-new-002-ref.htm">
|
||||
<link rel="match" href="reference/vertical-alignment-002-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#rl
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
font-size: 0.5em;
|
||||
color: orange;
|
||||
vertical-align: top;
|
||||
margin-top: -1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'baseline' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
font-size: 2em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-left {
|
||||
text-orientation: sideways-left;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the bottom of glyph 'L' is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>right</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-left">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-left">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'baseline' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
font-size: 2em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-right {
|
||||
text-orientation: sideways-right;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the bottom of glyph 'L' is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>left</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-right">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-right">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,25 +3,26 @@
|
|||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'top' and vertical-lr writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-09-03 -->
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'vertical-align' is 'top', the physical right (logical top) edge of an inline non-replaced box is aligned with the physical right (logical top) edge of its line box.">
|
||||
<link rel="match" href="reference/vertical-alignment-new-002-ref.htm">
|
||||
<link rel="match" href="reference/vertical-alignment-002-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#lr
|
||||
{
|
||||
border-right: blue solid 2em;
|
||||
writing-mode: vertical-lr;
|
||||
font: 3.75em/3 Ahem; /* computes to 60px/180px */
|
||||
color: white;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
span#orange
|
||||
{
|
||||
font-size: 0.5em;
|
||||
color: orange;
|
||||
vertical-align: top;
|
||||
line-height: 1;
|
||||
margin-top: -1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the right edge of an orange square touches the left edge of a blue square.</p>
|
||||
<p>Test passes if the right edge of an blue square is aligned with the left edge of a orange square.</p>
|
||||
|
||||
<div id="lr">A<span id="orange">O</span></div>
|
||||
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'baseline' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
|
||||
/* font-size */
|
||||
.half {
|
||||
vertical-align: text-top;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="mixed"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'baseline' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
|
||||
/* font-size */
|
||||
.half {
|
||||
vertical-align: text-top;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="mixed"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,16 +3,17 @@
|
|||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'text-top' and vertical-rl writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-09-01 -->
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-top', the physical right (logical top) edge of an inline non-replaced box is aligned with the right side (logical top) of parent's content area.">
|
||||
<link rel="match" href="reference/vertical-alignment-new-004-ref.htm">
|
||||
<link rel="match" href="reference/vertical-alignment-004-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#rl
|
||||
{
|
||||
color: orange;
|
||||
font: 3.75em/3 Ahem; /* computes to 60px/90px */
|
||||
font: 3.75em/3 Ahem; /* computes to 60px/180px */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
|
|
@ -3,16 +3,17 @@
|
|||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'text-top' and vertical-lr writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-09-03 -->
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'vertical-align' is 'text-top', the physical right (logical top) edge of an inline non-replaced box is aligned with the right side (logical top) of parent's content area.">
|
||||
<link rel="match" href="reference/vertical-alignment-new-004-ref.htm">
|
||||
<link rel="match" href="reference/vertical-alignment-004-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#lr
|
||||
{
|
||||
color: orange;
|
||||
font: 3.75em/1.5 Ahem; /* computes to 60px/90px */
|
||||
font: 3.75em/3 Ahem; /* computes to 60px/180px */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
|
|
@ -20,7 +21,6 @@
|
|||
{
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
vertical-align: text-top;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>right edge</strong> of an irregular orange polygon is straight and unbroken.</p>
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular orange polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="lr">A<span id="orange30">O</span></div>
|
||||
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'sub' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
font-size: 2em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: sub;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-left {
|
||||
text-orientation: sideways-left;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the bottom of glyph 'L' is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>right</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-left">X<sub>LLLLLLLLLLLLL</sub>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">X<sub>LLLLLLLLLLLLL</sub>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-left">X<sub>LLLLLLLLLLLLL</sub>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'sub' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
font-size: 2em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: sub;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-right {
|
||||
text-orientation: sideways-right;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the bottom of glyph 'L' is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>left</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-right">X<sub>LLLLLLLLLLLLL</sub>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">X<sub>LLLLLLLLLLLLL</sub>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-right">X<sub>LLLLLLLLLLLLL</sub>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,16 +3,17 @@
|
|||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'text-bottom' and vertical-rl writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-09-03 -->
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the left side (logical bottom) of parent's content area.">
|
||||
<link rel="match" href="reference/vertical-alignment-new-006-ref.htm">
|
||||
<link rel="match" href="reference/vertical-alignment-006-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#rl
|
||||
{
|
||||
color: orange;
|
||||
font: 3.75em/1.5 Ahem; /* computes to 60px/90px */
|
||||
font: 3.75em/3 Ahem; /* computes to 60px/180px */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
|
|
@ -20,7 +21,6 @@
|
|||
{
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
vertical-align: text-bottom;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular orange polygon is straight and unbroken.</p>
|
||||
<p>Test passes if the <strong>right edge</strong> of an irregular orange polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="rl">A<span id="orange30">O</span></div>
|
||||
|
||||
|
|
@ -3,16 +3,17 @@
|
|||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'text-bottom' and vertical-lr writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-09-03 -->
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'vertical-align' is 'text-bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the left side (logical bottom) of parent's content area.">
|
||||
<link rel="match" href="reference/vertical-alignment-new-006-ref.htm">
|
||||
<link rel="match" href="reference/vertical-alignment-006-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#lr
|
||||
{
|
||||
color: orange;
|
||||
font: 3.75em/1.5 Ahem; /* computes to 60px/90px */
|
||||
font: 3.75em/3 Ahem; /* computes to 60px/180px */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
|
|
@ -20,7 +21,6 @@
|
|||
{
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
vertical-align: text-bottom;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the <strong>left edge</strong> of an irregular orange polygon is straight and unbroken.</p>
|
||||
<p>Test passes if the <strong>right edge</strong> of an irregular orange polygon is straight and unbroken.</p>
|
||||
|
||||
<div id="lr">A<span id="orange30">O</span></div>
|
||||
|
||||
|
|
@ -3,25 +3,26 @@
|
|||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'bottom' and vertical-rl writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-09-03 -->
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the physical left (logical bottom) edge of its line box.">
|
||||
<link rel="match" href="reference/vertical-alignment-new-008-ref.htm">
|
||||
<link rel="match" href="reference/vertical-alignment-008-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#rl
|
||||
{
|
||||
border-left: blue solid 2em;
|
||||
writing-mode: vertical-rl;
|
||||
font: 3.75em/3 Ahem; /* computes to 60px/180px */
|
||||
color: white;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
span#orange
|
||||
{
|
||||
font-size: 0.5em;
|
||||
color: orange;
|
||||
vertical-align: bottom;
|
||||
line-height: 1;
|
||||
margin-top: -1em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the left edge of an orange square touches the right edge of a blue square.</p>
|
||||
<p>Test passes if the left edge of an blue square is aligned with the right edge of a orange square.</p>
|
||||
|
||||
<div id="rl">A<span id="orange">O</span></div>
|
||||
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'super' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
font-size: 2em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: super;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-left {
|
||||
text-orientation: sideways-left;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the bottom of glyph 'L' is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>right</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-left">X<sup>LLLLLLLLLLLLL</sup>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">X<sup>LLLLLLLLLLLLL</sup>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-left">X<sup>LLLLLLLLLLLLL</sup>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'super' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
font-size: 2em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: super;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-right {
|
||||
text-orientation: sideways-right;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the bottom of glyph 'L' is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>left</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-right">X<sup>LLLLLLLLLLLLL</sup>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">X<sup>LLLLLLLLLLLLL</sup>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-right">X<sup>LLLLLLLLLLLLL</sup>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,25 +3,26 @@
|
|||
<head>
|
||||
<title>CSS Writing Modes Test: vertical-align - 'bottom' and vertical-lr writing-mode</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-09-03 -->
|
||||
<link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings">
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading">
|
||||
<meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-lr', 'vertical-align' is 'bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the physical left (logical bottom) edge of its line box.">
|
||||
<link rel="match" href="reference/vertical-alignment-new-008-ref.htm">
|
||||
<link rel="match" href="reference/vertical-alignment-008-ref.htm">
|
||||
<meta name="flags" content="ahem">
|
||||
<style type="text/css">
|
||||
div#lr
|
||||
{
|
||||
border-left: blue solid 2em;
|
||||
writing-mode: vertical-lr;
|
||||
font: 3.75em/3 Ahem; /* computes to 60px/180px */
|
||||
color: white;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
span#orange
|
||||
{
|
||||
font-size: 0.5em;
|
||||
color: orange;
|
||||
vertical-align: bottom;
|
||||
line-height: 1;
|
||||
margin-top: -1em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the left edge of an orange square touches the right edge of a blue square.</p>
|
||||
<p>Test passes if the left edge of an blue square is aligned with the right edge of a orange square.</p>
|
||||
|
||||
<div id="lr">A<span id="orange">O</span></div>
|
||||
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'zero length (0em)' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
font-size: 2em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 0em;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-left {
|
||||
text-orientation: sideways-left;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the bottom of glyph 'L' is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>right</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-left">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-left">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'zero length (0em)' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
font-size: 2em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 0em;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-right {
|
||||
text-orientation: sideways-right;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the bottom of glyph 'L' is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>left</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-right">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-right">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'zero length (0em)' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 0%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
|
||||
/* font-size */
|
||||
.half {
|
||||
vertical-align: text-top;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="mixed"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'zero length (0em)' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 0%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
|
||||
/* font-size */
|
||||
.half {
|
||||
vertical-align: text-top;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="mixed"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'positive length (0.8em)' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
margin-top: 1em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 0.8em;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-left {
|
||||
text-orientation: sideways-left;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>right</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-left">SIDEL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">SIDEW
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-left">SIDEL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'positive length (0.8em)' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 0.8em;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-right {
|
||||
text-orientation: sideways-right;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>right</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>left</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-right">SIDER
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">SIDEW
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-right">SIDER
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'positive length (0.5em)' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 0.5em;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>right</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="mixed">MIXED
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright">UPRIG
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation">USEGL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'positive length (0.5em)' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 0.5em;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>right</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="mixed">MIXED
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright">UPRIG
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation">USEGL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'negative length (-0.2em)' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
padding-right: 0.2em;
|
||||
margin-top: 1em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: -0.2em;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-left {
|
||||
text-orientation: sideways-left;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>right</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>right</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-left">SIDEL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">SIDEW
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-left">SIDEL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'negative length (-0.2em)' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
padding-left: 0.2em;
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: -0.2em;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-right {
|
||||
text-orientation: sideways-right;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>left</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-right">SIDER
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">SIDEW
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-right">SIDER
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'negative length (-0.5em)' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: -0.5em;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="mixed">MIXED
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright">UPRIG
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation">USEGL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'negative length (-0.5em)' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: -0.5em;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="mixed">MIXED
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright">UPRIG
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation">USEGL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'zero percentage (0%)' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
font-size: 2em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 0%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-left {
|
||||
text-orientation: sideways-left;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the bottom of glyph 'L' is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>right</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-left">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-left">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'zero percentage (0%)' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
font-size: 2em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 0%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-right {
|
||||
text-orientation: sideways-right;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the bottom of glyph 'L' is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>left</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-right">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-right">LLLLLLLLLLLL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'zero percentage (0%)' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 0%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
|
||||
/* font-size */
|
||||
.half {
|
||||
vertical-align: text-top;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="mixed"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'zero percentage (0%)' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 0%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
|
||||
/* font-size */
|
||||
.half {
|
||||
vertical-align: text-top;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="mixed"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation"><span class="half">LLLLLLLLL</span>
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'positive length (0.8em)' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
margin-top: 1em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 80%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-left {
|
||||
text-orientation: sideways-left;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>right</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-left">SIDEL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">SIDEW
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-left">SIDEL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'positive percentage (80%)' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 80%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-right {
|
||||
text-orientation: sideways-right;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>right</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>left</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-right">SIDER
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">SIDEW
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-right">SIDER
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'positive percentage (50%)' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 50%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>right</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="mixed">MIXED
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright">UPRIG
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation">USEGL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'positive percentage (50%)' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: 50%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>right</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="mixed">MIXED
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright">UPRIG
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation">USEGL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'negative percentage (-20%)' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
padding-right: 0.2em;
|
||||
margin-top: 1em;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: -20%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-left {
|
||||
text-orientation: sideways-left;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>right</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>right</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-left">SIDEL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">SIDEW
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-left">SIDEL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-right-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'negative length (-20%)' (alphabetical baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'sideways-left', 'sideways-right' or 'sideways', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
margin-top: 1em;
|
||||
padding-left: 0.2em;
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: -20%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.sideways-right {
|
||||
text-orientation: sideways-right;
|
||||
}
|
||||
.sideways {
|
||||
text-orientation: sideways;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>left</strong> edge of yellow square is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="sideways-right">SIDER
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="sideways">SIDEW
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-lr">
|
||||
<p class="sideways-right">SIDER
|
||||
<img class="square" src="./support/yellow-square-vert-redline-left-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'negative percentage (-50%)' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: -50%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-lr">
|
||||
<p class="mixed">MIXED
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright">UPRIG
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation">USEGL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: vertical align - 'negative percentage (-50%)' (central baseline with vertical layout)</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
|
||||
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
|
||||
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
|
||||
<meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed', 'upright' or 'use-glyph-orientation', then the central baseline is used as the dominant baseline.">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
div > p {
|
||||
font: 40px/1 "Ahem";
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* vertical-align */
|
||||
img {
|
||||
vertical-align: -50%;
|
||||
}
|
||||
img.line {
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
/* writing-mode property */
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/* text-orientation property */
|
||||
.mixed {
|
||||
text-orientation: mixed;
|
||||
}
|
||||
.upright {
|
||||
text-orientation: upright;
|
||||
}
|
||||
.use-glyph-orientation {
|
||||
text-orientation: use-glyph-orientation;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ...</p>
|
||||
<ol>
|
||||
<li>the <strong>left</strong> edge of black stripe is touching a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>the <strong>center</strong> of yellow square (showed as a blue line) is aligned to a thin blue line in each 3 orange rectangles and</li>
|
||||
<li>all 3 orange rectangles are <strong>identical</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<div class="vertical-rl">
|
||||
<p class="mixed">MIXED
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="upright">UPRIG
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
<p class="use-glyph-orientation">USEGL
|
||||
<img class="square" src="./support/yellow-square-vert-redline-center-59x59.png" alt="Image download support must be enabled">
|
||||
<img class="line" src="./support/blue-vert-line-1x220.png" alt="Image download support must be enabled">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue