mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update CSS tests to revision d674587d6ae7d2e231d632785559f2613d554eb0
This commit is contained in:
parent
7c45ff8e05
commit
f235d49372
6623 changed files with 267392 additions and 10061 deletions
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 'caption-side: top' and vertical-lr</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/#caption-side" title="7.7 Table Caption Mappings: the caption-side keywords" />
|
||||
|
||||
<meta content="ahem image" name="flags" />
|
||||
<meta content="This test checks that when 'caption-side' is set to 'top' in a vertical-lr table and if the rendering engine does not support side captions (i.e. left and right captions in horizontal writing modes), then the caption is placed at the block-start side of the table, which is on the lefthand side of such table. If the rendering engine supports side captions, then the rendering engine must place the caption at the physical top (logical left) side of the table box." name="assert" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
table#test
|
||||
{
|
||||
border-spacing: 0px;
|
||||
caption-side: top;
|
||||
font: 1.5624em/1 Ahem; /* computes to 25px/25px */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
caption
|
||||
{
|
||||
color: blue;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
color: orange;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
div.reference
|
||||
{
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the top bi-colored rectangle has a layout identical to one of the bi-colored rectangles below it.</p>
|
||||
|
||||
<table id="test">
|
||||
<caption>CA</caption>
|
||||
<tr>
|
||||
<td>T</td><td>D</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="reference" id="does-NOT-support-side-captions"><img src="support/swatch-blue.png" width="25" height="50" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="25" height="50" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div class="reference" id="supports-side-captions"><img src="support/swatch-blue.png" width="25" height="50" alt="Image download support must be enabled" /><br /><img src="support/swatch-orange.png" width="25" height="50" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 'caption-side: bottom' and vertical-lr</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/#caption-side" title="7.7 Table Caption Mappings: the caption-side keywords" />
|
||||
|
||||
<meta content="ahem image" name="flags" />
|
||||
<meta content="This test checks that when 'caption-side' is set to 'bottom' in a vertical-lr table and if the rendering engine does not support side captions (i.e. left and right captions in horizontal writing modes), then the caption is placed at the block-start side of the table, which is on the lefthand side of such table. If the rendering engine supports side captions, then the rendering engine must place the caption at the physical bottom (logical right) side of the table box." name="assert" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
table#test
|
||||
{
|
||||
border-spacing: 0px;
|
||||
caption-side: bottom;
|
||||
font: 1.5624em/1 Ahem; /* computes to 25px/25px */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
caption
|
||||
{
|
||||
color: blue;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
color: orange;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
div.reference
|
||||
{
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the top bi-colored rectangle has a layout identical to one of the bi-colored rectangles below it.</p>
|
||||
|
||||
<table id="test">
|
||||
<caption>CA</caption>
|
||||
<tr>
|
||||
<td>T</td><td>D</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="reference" id="does-NOT-support-side-captions"><img src="support/swatch-blue.png" width="25" height="50" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="25" height="50" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div class="reference" id="supports-side-captions"><img src="support/swatch-orange.png" width="25" height="50" alt="Image download support must be enabled" /><br /><img src="support/swatch-blue.png" width="25" height="50" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 'caption-side: block-start' and vertical-lr</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/#caption-side" title="7.7 Table Caption Mappings: the caption-side keywords" />
|
||||
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<meta content="ahem image" name="flags" />
|
||||
<meta content="This test checks that when 'caption-side' is set to 'block-start' in a vertical-lr table, then the caption is placed at the block-start side of the table, which is on the lefthand side of such table." name="assert" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
table#test-overlapping-green
|
||||
{
|
||||
border-spacing: 0px;
|
||||
caption-side: bottom; /* very important declaration to do here */
|
||||
caption-side: block-start;
|
||||
font: 3.125em/1 Ahem; /* computes to 50px/50px */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
caption
|
||||
{
|
||||
color: green;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
color: transparent;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
div#reference-overlapped-red
|
||||
{
|
||||
background: url("support/pattern-rg-rg-100x100.png") no-repeat;
|
||||
bottom: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<table id="test-overlapping-green">
|
||||
<caption>CA</caption>
|
||||
<tr>
|
||||
<td>T</td><td>D</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 'caption-side: block-end' and vertical-lr</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/#caption-side" title="7.7 Table Caption Mappings: the caption-side keywords" />
|
||||
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<meta content="ahem image" name="flags" />
|
||||
<meta content="This test checks that when 'caption-side' is set to 'block-end' in a vertical-lr table, then the caption is placed at the block-end side of the table, which is on the righthand side of such table." name="assert" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div#reference-overlapped-red
|
||||
{
|
||||
background: url("support/pattern-gr-gr-100x100.png") no-repeat;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
table#test-overlapping-green
|
||||
{
|
||||
border-spacing: 0px;
|
||||
caption-side: block-end;
|
||||
font: 3.125em/1 Ahem; /* computes to 50px/50px */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
caption
|
||||
{
|
||||
color: green;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
color: transparent;
|
||||
padding: 0px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
|
||||
<table id="test-overlapping-green">
|
||||
<caption>CA</caption>
|
||||
<tr>
|
||||
<td>T</td><td>D</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 'caption-side: top' and vertical-rl</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/#caption-side" title="7.7 Table Caption Mappings: the caption-side keywords" />
|
||||
|
||||
<meta content="ahem image" name="flags" />
|
||||
<meta content="This test checks that when 'caption-side' is set to 'top' in a vertical-rl table and if the rendering engine does not support side captions (i.e. left and right captions in horizontal writing modes), then the caption is placed at the block-start side of the table, which is on the righthand side of such table. If the rendering engine supports side captions, then the rendering engine must place the caption at the physical top (logical left) side of the table box." name="assert" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
table#test
|
||||
{
|
||||
border-spacing: 0px;
|
||||
caption-side: top;
|
||||
font: 1.5624em/1 Ahem; /* computes to 25px/25px */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
caption
|
||||
{
|
||||
color: blue;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
color: orange;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
div.reference
|
||||
{
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the top bi-colored rectangle has a layout identical to one of the bi-colored rectangles below it.</p>
|
||||
|
||||
<table id="test">
|
||||
<caption>CA</caption>
|
||||
<tr>
|
||||
<td>T</td><td>D</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="reference" id="does-NOT-support-side-captions"><img src="support/swatch-orange.png" width="25" height="50" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="25" height="50" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div class="reference" id="supports-side-captions"><img src="support/swatch-blue.png" width="25" height="50" alt="Image download support must be enabled" /><br /><img src="support/swatch-orange.png" width="25" height="50" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 'caption-side: bottom' and vertical-rl</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/#caption-side" title="7.7 Table Caption Mappings: the caption-side keywords" />
|
||||
|
||||
<meta content="ahem image" name="flags" />
|
||||
<meta content="This test checks that when 'caption-side' is set to 'bottom' in a vertical-rl table and if the rendering engine does not support side captions (i.e. left and right captions in horizontal writing modes), then the caption is placed at the block-start side of the table, which is on the righthand side of such table. If the rendering engine supports side captions, then the rendering engine must place the caption at the physical bottom (logical right) side of the table box." name="assert" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
table#test
|
||||
{
|
||||
border-spacing: 0px;
|
||||
caption-side: bottom;
|
||||
font: 1.5624em/1 Ahem; /* computes to 25px/25px */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
caption
|
||||
{
|
||||
color: blue;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
color: orange;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
div.reference
|
||||
{
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the top bi-colored rectangle has a layout identical to one of the bi-colored rectangles below it.</p>
|
||||
|
||||
<table id="test">
|
||||
<caption>CA</caption>
|
||||
<tr>
|
||||
<td>T</td><td>D</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="reference" id="does-NOT-support-side-captions"><img src="support/swatch-orange.png" width="25" height="50" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="25" height="50" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<div class="reference" id="supports-side-captions"><img src="support/swatch-orange.png" width="25" height="50" alt="Image download support must be enabled" /><br /><img src="support/swatch-blue.png" width="25" height="50" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 'caption-side: block-start' and vertical-rl</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/#caption-side" title="7.7 Table Caption Mappings: the caption-side keywords" />
|
||||
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<meta content="ahem image" name="flags" />
|
||||
<meta content="This test checks that when 'caption-side' is set to 'block-start' in a vertical-rl table, then the caption is placed at the block-start side of the table, which is on the righthand side of such table." name="assert" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div#reference-overlapped-red
|
||||
{
|
||||
background: url("support/pattern-gr-gr-100x100.png") no-repeat;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
table#test-overlapping-green
|
||||
{
|
||||
border-spacing: 0px;
|
||||
caption-side: bottom; /* very important declaration to do here */
|
||||
caption-side: block-start;
|
||||
font: 3.125em/1 Ahem; /* computes to 50px/50px */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
caption
|
||||
{
|
||||
color: green;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
color: transparent;
|
||||
padding: 0px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
|
||||
<table id="test-overlapping-green">
|
||||
<caption>CA</caption>
|
||||
<tr>
|
||||
<td>T</td><td>D</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 'caption-side: block-end' and vertical-rl</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/#caption-side" title="7.7 Table Caption Mappings: the caption-side keywords" />
|
||||
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<meta content="ahem image" name="flags" />
|
||||
<meta content="This test checks that when 'caption-side' is set to 'block-end' in a vertical-rl table, then the caption is placed at the block-end side of the table, which is on the lefthand side of such table." name="assert" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div#reference-overlapped-red
|
||||
{
|
||||
background: url("support/pattern-rg-rg-100x100.png") no-repeat;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
table#test-overlapping-green
|
||||
{
|
||||
border-spacing: 0px;
|
||||
caption-side: block-end;
|
||||
font: 3.125em/1 Ahem; /* computes to 50px/50px */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
caption
|
||||
{
|
||||
color: green;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
color: transparent;
|
||||
padding: 0px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
|
||||
<table id="test-overlapping-green">
|
||||
<caption>CA</caption>
|
||||
<tr>
|
||||
<td>T</td><td>D</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Introduction to Vertical Text (80 tests)</h2>
|
||||
<h2>Introduction to Vertical Text (82 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
@ -40,7 +40,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode">3.1 Block Flow Direction: the writing-mode property</a></th></tr>
|
||||
<!-- 66 tests -->
|
||||
<!-- 68 tests -->
|
||||
<tr id="block-flow-direction-001-3.1" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="block-flow-direction-001.xht">block-flow-direction-001</a></strong></td>
|
||||
|
@ -338,6 +338,28 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="first-page-vlr-003-3.1" class="primary paged">
|
||||
<td><strong>
|
||||
<a href="first-page-vlr-003.xht">first-page-vlr-003</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
|
||||
<td>first page of a document with vertical-lr writing-mode
|
||||
<ul class="assert">
|
||||
<li>When 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is left-to-right. This test checks that the first page of a document whose document root has 'writing-mode' set to 'vertical-lr' is the :right page.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="first-page-vrl-002-3.1" class="primary image paged">
|
||||
<td><strong>
|
||||
<a href="first-page-vrl-002.xht">first-page-vrl-002</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
|
||||
<td>first page of a document with vertical-rl writing-mode
|
||||
<ul class="assert">
|
||||
<li>When 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is right-to-left. This test checks that the first page of a document whose document root has 'writing-mode' set to 'vertical-rl' is the :left page.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="form-controls-vert-rl-004-3.1" class="primary image should">
|
||||
<td><strong>
|
||||
<a href="form-controls-vert-rl-004.xht">form-controls-vert-rl-004</a></strong></td>
|
||||
|
|
|
@ -193,7 +193,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines">4.3 Atomic Inline Baselines</a></th></tr>
|
||||
<!-- 22 tests -->
|
||||
<!-- 26 tests -->
|
||||
<tr id="baseline-inline-non-replaced-002-4.3" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="baseline-inline-non-replaced-002.xht">baseline-inline-non-replaced-002</a></strong></td>
|
||||
|
@ -436,12 +436,56 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="inline-table-alignment-002-4.3" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="inline-table-alignment-002.xht">inline-table-alignment-002</a></strong></td>
|
||||
<td><a href="reference/inline-table-alignment-002-ref.xht">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>inline-table alignment - central alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of inline-table baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'mixed', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="inline-table-alignment-003-4.3" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="inline-table-alignment-003.xht">inline-table-alignment-003</a></strong></td>
|
||||
<td><a href="reference/inline-table-alignment-003-ref.xht">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>inline-table alignment - central alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of inline-table baseline. When 'writing-mode' is 'vertical-lr' and when 'text-orientation' is 'mixed', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="inline-table-alignment-004-4.3" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="inline-table-alignment-004.xht">inline-table-alignment-004</a></strong></td>
|
||||
<td><a href="reference/inline-table-alignment-002-ref.xht">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>inline-table alignment - central alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of inline-table baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'upright', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="inline-table-alignment-005-4.3" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="inline-table-alignment-005.xht">inline-table-alignment-005</a></strong></td>
|
||||
<td><a href="reference/inline-table-alignment-003-ref.xht">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>inline-table alignment - central alignment with vertical layout
|
||||
<ul class="assert">
|
||||
<li>This test checks the generation of inline-table baseline. When 'writing-mode' is 'vertical-lr' and when 'text-orientation' is 'upright', then the central baseline is used as the dominant baseline.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s4.4">
|
||||
<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>
|
||||
<!-- 36 tests -->
|
||||
<!-- 32 tests -->
|
||||
<tr id="vertical-alignment-002a-4.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-002a.xht">vertical-alignment-002a</a></strong></td>
|
||||
|
@ -794,50 +838,6 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-002-4.4" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-002.xht">vertical-alignment-new-002</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-002-ref.xht">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical align - 'baseline' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'top', the right edge of inline-box attaches the top of line-box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-004-4.4" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-004.xht">vertical-alignment-new-004</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-004-ref.xht">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical align - 'baseline' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-top', the right edge of inline-box aligned with the top of parent inline-box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-006-4.4" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-006.xht">vertical-alignment-new-006</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-006-ref.xht">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical align - 'baseline' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-bottom', the left edge of inline-box aligned with the bottom of parent inline-box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-008-4.4" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-008.xht">vertical-alignment-new-008</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-008-ref.xht">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>vertical align - 'baseline' (alphabetical baseline with vertical layout)
|
||||
<ul class="assert">
|
||||
<li>This test checks the position of inline box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'bottom', the left edge of inline-box attaches the bottom of line-box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s4.4.#dominant-baseline">
|
||||
<!-- 0 tests -->
|
||||
|
|
|
@ -96,7 +96,7 @@
|
|||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>text-orientation - sideways-left
|
||||
<ul class="assert">
|
||||
<li>This test checks that 'text-orientation: sideways-left' causes text to be set as if in a horizontal layout, but rotated 90&deg;counter-clockwise, in vertical writing modes. It's effective to verify 1.block flow direction and 2.inline direction, but not effective to verify 3.glyph orientation.</li>
|
||||
<li>This test checks that 'text-orientation: sideways-left' causes text to be set as if in a horizontal layout, but rotated 90&deg; counter-clockwise, in vertical writing modes. It's effective to verify 1.block flow direction and 2.inline direction, but not effective to verify 3.glyph orientation.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -160,9 +160,9 @@
|
|||
<a href="text-orientation-script-001b.xht">text-orientation-script-001b</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#2/8, 2048 code points in U+0B36-1B4A).
|
||||
<td>Test orientation of characters where vo=R (#2/8, 2048 code points in U+0B36-1B50).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#2/8, 2048 code points in U+0B36-1B4A)</li>
|
||||
<li>Test orientation of characters where vo=R (#2/8, 2048 code points in U+0B36-1B50)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -171,9 +171,9 @@
|
|||
<a href="text-orientation-script-001c.xht">text-orientation-script-001c</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#3/8, 2048 code points in U+1B4B-2896).
|
||||
<td>Test orientation of characters where vo=R (#3/8, 2048 code points in U+1B51-2898).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#3/8, 2048 code points in U+1B4B-2896)</li>
|
||||
<li>Test orientation of characters where vo=R (#3/8, 2048 code points in U+1B51-2898)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -182,9 +182,9 @@
|
|||
<a href="text-orientation-script-001d.xht">text-orientation-script-001d</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#4/8, 2048 code points in U+2897-A882).
|
||||
<td>Test orientation of characters where vo=R (#4/8, 2048 code points in U+2899-A884).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#4/8, 2048 code points in U+2897-A882)</li>
|
||||
<li>Test orientation of characters where vo=R (#4/8, 2048 code points in U+2899-A884)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -193,9 +193,9 @@
|
|||
<a href="text-orientation-script-001e.xht">text-orientation-script-001e</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#5/8, 2048 code points in U+A883-10341).
|
||||
<td>Test orientation of characters where vo=R (#5/8, 2048 code points in U+A885-10343).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#5/8, 2048 code points in U+A883-10341)</li>
|
||||
<li>Test orientation of characters where vo=R (#5/8, 2048 code points in U+A885-10343)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -204,9 +204,9 @@
|
|||
<a href="text-orientation-script-001f.xht">text-orientation-script-001f</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#6/8, 2048 code points in U+10342-1169B).
|
||||
<td>Test orientation of characters where vo=R (#6/8, 2048 code points in U+10344-1169D).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#6/8, 2048 code points in U+10342-1169B)</li>
|
||||
<li>Test orientation of characters where vo=R (#6/8, 2048 code points in U+10344-1169D)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -215,9 +215,9 @@
|
|||
<a href="text-orientation-script-001g.xht">text-orientation-script-001g</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#7/8, 2048 code points in U+1169C-16F9E).
|
||||
<td>Test orientation of characters where vo=R (#7/8, 2048 code points in U+1169E-1BC00).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#7/8, 2048 code points in U+1169C-16F9E)</li>
|
||||
<li>Test orientation of characters where vo=R (#7/8, 2048 code points in U+1169E-1BC00)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -226,9 +226,9 @@
|
|||
<a href="text-orientation-script-001h.xht">text-orientation-script-001h</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="font" title="Requires a special font">Font</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Test orientation of characters where vo=R (#8/8, 1702 code points in U+16F9F-1F8AD).
|
||||
<td>Test orientation of characters where vo=R (#8/8, 1700 code points in U+1BC01-1F8AD).
|
||||
<ul class="assert">
|
||||
<li>Test orientation of characters where vo=R (#8/8, 1702 code points in U+16F9F-1F8AD)</li>
|
||||
<li>Test orientation of characters where vo=R (#8/8, 1700 code points in U+1BC01-1F8AD)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Abstract Box Layout (473 tests)</h2>
|
||||
<h2>Abstract Box Layout (489 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
@ -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>
|
||||
<!-- 18 tests -->
|
||||
<!-- 26 tests -->
|
||||
<tr id="text-decoration-sidewaysleft-vlr-003-7.5" class="primary">
|
||||
<td><strong>
|
||||
<a href="text-decoration-sidewaysleft-vlr-003.xht">text-decoration-sidewaysleft-vlr-003</a></strong></td>
|
||||
|
@ -4836,6 +4836,94 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-002-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-002.xht">vertical-alignment-new-002</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-002-ref.xht">=</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">
|
||||
<li>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.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-003-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-003.xht">vertical-alignment-new-003</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-002-ref.xht">=</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">
|
||||
<li>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.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-004-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-004.xht">vertical-alignment-new-004</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-004-ref.xht">=</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">
|
||||
<li>This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-top', the physical right (logical top) edge of an inline non-replaced box is aligned with the right side (logical top) of parent's content area.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-005-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-005.xht">vertical-alignment-new-005</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-004-ref.xht">=</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">
|
||||
<li>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.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-006-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-006.xht">vertical-alignment-new-006</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-006-ref.xht">=</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">
|
||||
<li>This test checks the position of an inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-bottom', the physical left (logical bottom) edge of an inline non-replaced box is aligned with the left side (logical bottom) of parent's content area.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-007-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-007.xht">vertical-alignment-new-007</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-006-ref.xht">=</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">
|
||||
<li>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.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-008-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-008.xht">vertical-alignment-new-008</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-008-ref.xht">=</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">
|
||||
<li>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.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vertical-alignment-new-009-7.5" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="vertical-alignment-new-009.xht">vertical-alignment-new-009</a></strong></td>
|
||||
<td><a href="reference/vertical-alignment-new-008-ref.xht">=</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">
|
||||
<li>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.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
|
@ -5276,7 +5364,95 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.7">+</a>
|
||||
<a href="http://www.w3.org/TR/css-writing-modes-3/#caption-side">7.7 Table Caption Mappings: the caption-side keywords</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
<!-- 8 tests -->
|
||||
<tr id="caption-side-vlr-003-7.7" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="caption-side-vlr-003.xht">caption-side-vlr-003</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>'caption-side: top' and vertical-lr
|
||||
<ul class="assert">
|
||||
<li>This test checks that when 'caption-side' is set to 'top' in a vertical-lr table and if the rendering engine does not support side captions (i.e. left and right captions in horizontal writing modes), then the caption is placed at the block-start side of the table, which is on the lefthand side of such table. If the rendering engine supports side captions, then the rendering engine must place the caption at the physical top (logical left) side of the table box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="caption-side-vlr-005-7.7" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="caption-side-vlr-005.xht">caption-side-vlr-005</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>'caption-side: bottom' and vertical-lr
|
||||
<ul class="assert">
|
||||
<li>This test checks that when 'caption-side' is set to 'bottom' in a vertical-lr table and if the rendering engine does not support side captions (i.e. left and right captions in horizontal writing modes), then the caption is placed at the block-start side of the table, which is on the lefthand side of such table. If the rendering engine supports side captions, then the rendering engine must place the caption at the physical bottom (logical right) side of the table box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="caption-side-vlr-007-7.7" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="caption-side-vlr-007.xht">caption-side-vlr-007</a></strong></td>
|
||||
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>'caption-side: block-start' and vertical-lr
|
||||
<ul class="assert">
|
||||
<li>This test checks that when 'caption-side' is set to 'block-start' in a vertical-lr table, then the caption is placed at the block-start side of the table, which is on the lefthand side of such table.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="caption-side-vlr-009-7.7" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="caption-side-vlr-009.xht">caption-side-vlr-009</a></strong></td>
|
||||
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>'caption-side: block-end' and vertical-lr
|
||||
<ul class="assert">
|
||||
<li>This test checks that when 'caption-side' is set to 'block-end' in a vertical-lr table, then the caption is placed at the block-end side of the table, which is on the righthand side of such table.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="caption-side-vrl-002-7.7" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="caption-side-vrl-002.xht">caption-side-vrl-002</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>'caption-side: top' and vertical-rl
|
||||
<ul class="assert">
|
||||
<li>This test checks that when 'caption-side' is set to 'top' in a vertical-rl table and if the rendering engine does not support side captions (i.e. left and right captions in horizontal writing modes), then the caption is placed at the block-start side of the table, which is on the righthand side of such table. If the rendering engine supports side captions, then the rendering engine must place the caption at the physical top (logical left) side of the table box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="caption-side-vrl-004-7.7" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="caption-side-vrl-004.xht">caption-side-vrl-004</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>'caption-side: bottom' and vertical-rl
|
||||
<ul class="assert">
|
||||
<li>This test checks that when 'caption-side' is set to 'bottom' in a vertical-rl table and if the rendering engine does not support side captions (i.e. left and right captions in horizontal writing modes), then the caption is placed at the block-start side of the table, which is on the righthand side of such table. If the rendering engine supports side captions, then the rendering engine must place the caption at the physical bottom (logical right) side of the table box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="caption-side-vrl-006-7.7" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="caption-side-vrl-006.xht">caption-side-vrl-006</a></strong></td>
|
||||
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>'caption-side: block-start' and vertical-rl
|
||||
<ul class="assert">
|
||||
<li>This test checks that when 'caption-side' is set to 'block-start' in a vertical-rl table, then the caption is placed at the block-start side of the table, which is on the righthand side of such table.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="caption-side-vrl-008-7.7" class="primary ahem image">
|
||||
<td><strong>
|
||||
<a href="caption-side-vrl-008.xht">caption-side-vrl-008</a></strong></td>
|
||||
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>'caption-side: block-end' and vertical-rl
|
||||
<ul class="assert">
|
||||
<li>This test checks that when 'caption-side' is set to 'block-end' in a vertical-rl table, then the caption is placed at the block-end side of the table, which is on the lefthand side of such table.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.7.#valuedef-block-end">
|
||||
<!-- 0 tests -->
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
|
||||
<h2>Glyph Composition (25 tests)</h2>
|
||||
<h2>Glyph Composition (27 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
@ -40,7 +40,18 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">9.1 Horizontal-in-Vertical Composition: the text-combine-upright property</a></th></tr>
|
||||
<!-- 21 tests -->
|
||||
<!-- 22 tests -->
|
||||
<tr id="text-combine-upright-inherit-all-001-9.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="text-combine-upright-inherit-all-001.xht">text-combine-upright-inherit-all-001</a></strong></td>
|
||||
<td><a href="reference/text-combine-upright-inherit-all-001.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>text-combine-upright:all inherits
|
||||
<ul class="assert">
|
||||
<li>This test checks text-combine-upright:all inherits</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-combine-upright-inherit-all-002-9.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="text-combine-upright-inherit-all-002.xht">text-combine-upright-inherit-all-002</a></strong></td>
|
||||
|
@ -295,7 +306,18 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-layout">9.1.2 Layout Rules</a></th></tr>
|
||||
<!-- 1 tests -->
|
||||
<!-- 2 tests -->
|
||||
<tr id="text-combine-upright-decorations-001-9.1.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-combine-upright-decorations-001.xht">text-combine-upright-decorations-001</a></strong></td>
|
||||
<td><a href="reference/text-combine-upright-decorations-001.xht">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
<td>The resulting composition is treated as a signel glyph for decorations
|
||||
<ul class="assert">
|
||||
<li>The resulting composition is treated as a signel glyph for decorations</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-combine-upright-layout-rules-001-9.1.2" class="primary ahem">
|
||||
<td><strong>
|
||||
<a href="text-combine-upright-layout-rules-001.xht">text-combine-upright-layout-rules-001</a></strong></td>
|
||||
|
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: first page of a document with vertical-lr writing-mode</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" title="13.2.2 Page selectors: selecting left, right, and first pages"/>
|
||||
|
||||
<meta content="paged" name="flags"/>
|
||||
<meta content="When 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is left-to-right. This test checks that the first page of a document whose document root has 'writing-mode' set to 'vertical-lr' is the :right page." name="assert"/>
|
||||
|
||||
<style type="text/css" media="print"><![CDATA[
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
@page :right
|
||||
{
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
@page :left
|
||||
{
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
border-left: blue solid 6px;
|
||||
margin: 0;
|
||||
padding-left: 1em;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-first-page-vlr-003.png" alt="Image download support must be enabled"/></p>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
|
||||
PREREQUISITE: switch to a print preview
|
||||
or page media view of the page.
|
||||
|
||||
Test passes if a blue vertical line is on the
|
||||
<strong>left side</strong> of the page and <strong>not in the
|
||||
horizontal center</strong> of the page.
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: first page of a document with vertical-rl writing-mode</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" title="13.2.2 Page selectors: selecting left, right, and first pages"/>
|
||||
|
||||
<meta content="image paged" name="flags"/>
|
||||
<meta content="When 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is right-to-left. This test checks that the first page of a document whose document root has 'writing-mode' set to 'vertical-rl' is the :left page." name="assert"/>
|
||||
|
||||
<style type="text/css" media="print"><![CDATA[
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
@page :right
|
||||
{
|
||||
margin-right: 0%;
|
||||
}
|
||||
|
||||
@page :left
|
||||
{
|
||||
margin-right: 50%;
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
border-right: orange solid 6px;
|
||||
margin: 0;
|
||||
padding-right: 1em;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-first-page-vrl-002.png" alt="Image download support must be enabled"/></p>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
|
||||
PREREQUISITE: switch to a print preview
|
||||
or page media view of the page.
|
||||
|
||||
Test passes if an orange vertical line is
|
||||
<strong>in the horizontal center</strong> of the page
|
||||
and <strong>not on the right side</strong> of the page.
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -13,7 +13,7 @@
|
|||
div#rl-mixed
|
||||
{
|
||||
color: orange;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px */
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
|
@ -63,8 +63,8 @@
|
|||
<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
|
||||
|
||||
<div id="rl-mixed">A<div id="inline-block">
|
||||
<span class="block-descendant" id="first-line-box">I</span>
|
||||
<span class="block-descendant" id="last-line-box">B</span>
|
||||
<span class="block-descendant" id="first-line-box">F</span>
|
||||
<span class="block-descendant" id="last-line-box">L</span>
|
||||
</div><span id="orange30">O</span></div>
|
||||
|
||||
</body>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
div#lr-mixed
|
||||
{
|
||||
color: orange;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px */
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: mixed;
|
||||
|
@ -63,8 +63,8 @@
|
|||
<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
|
||||
|
||||
<div id="lr-mixed">A<div id="inline-block">
|
||||
<span class="block-descendant" id="first-line-box">I</span>
|
||||
<span class="block-descendant" id="last-line-box">B</span>
|
||||
<span class="block-descendant" id="first-line-box">F</span>
|
||||
<span class="block-descendant" id="last-line-box">L</span>
|
||||
</div><span id="orange30">O</span></div>
|
||||
|
||||
</body>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
div#rl-upright
|
||||
{
|
||||
color: orange;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px */
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
|
@ -63,8 +63,8 @@
|
|||
<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
|
||||
|
||||
<div id="rl-upright">A<div id="inline-block">
|
||||
<span class="block-descendant" id="first-line-box">I</span>
|
||||
<span class="block-descendant" id="last-line-box">B</span>
|
||||
<span class="block-descendant" id="first-line-box">F</span>
|
||||
<span class="block-descendant" id="last-line-box">L</span>
|
||||
</div><span id="orange30">O</span></div>
|
||||
|
||||
</body>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
div#lr-upright
|
||||
{
|
||||
color: orange;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px */
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: upright;
|
||||
|
@ -63,8 +63,8 @@
|
|||
<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
|
||||
|
||||
<div id="lr-upright">A<div id="inline-block">
|
||||
<span class="block-descendant" id="first-line-box">I</span>
|
||||
<span class="block-descendant" id="last-line-box">B</span>
|
||||
<span class="block-descendant" id="first-line-box">F</span>
|
||||
<span class="block-descendant" id="last-line-box">L</span>
|
||||
</div><span id="orange30">O</span></div>
|
||||
|
||||
</body>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
div#rl-sideways
|
||||
{
|
||||
color: fuchsia;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px */
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: sideways;
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
div#lr-sideways
|
||||
{
|
||||
color: aqua;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px */
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: sideways;
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
div#rl-sideways-right
|
||||
{
|
||||
color: fuchsia;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px */
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: sideways-right;
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
div#lr-sideways-right
|
||||
{
|
||||
color: olive;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px */
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: sideways-right;
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
div#rl-sideways-left
|
||||
{
|
||||
color: teal;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px */
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: sideways-left;
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
div#lr-sideways-left
|
||||
{
|
||||
color: aqua;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px */
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: sideways-left;
|
||||
|
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Writing Modes Test: inline-table alignment - central alignment with vertical layout</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-08-13 -->
|
||||
<link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/CSS21/visudet.html#leading" />
|
||||
<link rel="match" href="reference/inline-table-alignment-002-ref.xht" />
|
||||
<meta name="assert" content="This test checks the generation of inline-table baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'mixed', then the central baseline is used as the dominant baseline." />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div#rl-mixed
|
||||
{
|
||||
color: orange;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
div#inline-table
|
||||
{
|
||||
display: inline-table;
|
||||
padding-left: 0.5em; /* computes to 60px */
|
||||
font-size: 2em; /* computes to 120px */
|
||||
/*
|
||||
such padding-left declaration is arbitrary and only serve to make the
|
||||
test a bit more challenging.
|
||||
*/
|
||||
}
|
||||
|
||||
span.row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
span#first
|
||||
{
|
||||
color: blue;
|
||||
}
|
||||
|
||||
span#last
|
||||
{
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
span#orange30
|
||||
{
|
||||
padding-right: 4em; /* computes to 120px */
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
/*
|
||||
such padding-right declaration is arbitrary and only serve to make the
|
||||
test a bit more challenging.
|
||||
*/
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
|
||||
|
||||
<div id="rl-mixed">A<div id="inline-table">
|
||||
<span class="row" id="first">F</span>
|
||||
<span class="row" id="last">L</span>
|
||||
</div><span id="orange30">O</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Writing Modes Test: inline-table alignment - central alignment with vertical layout</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-08-13 -->
|
||||
<link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/CSS21/visudet.html#leading" />
|
||||
<link rel="match" href="reference/inline-table-alignment-003-ref.xht" />
|
||||
<meta name="assert" content="This test checks the generation of inline-table baseline. When 'writing-mode' is 'vertical-lr' and when 'text-orientation' is 'mixed', then the central baseline is used as the dominant baseline." />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div#lr-mixed
|
||||
{
|
||||
color: orange;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
div#inline-table
|
||||
{
|
||||
display: inline-table;
|
||||
padding-left: 0.5em; /* computes to 60px */
|
||||
font-size: 2em; /* computes to 120px */
|
||||
/*
|
||||
such padding-left declaration is arbitrary and only serve to make the
|
||||
test a bit more challenging.
|
||||
*/
|
||||
}
|
||||
|
||||
span.row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
span#first
|
||||
{
|
||||
color: blue;
|
||||
}
|
||||
|
||||
span#last
|
||||
{
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
span#orange30
|
||||
{
|
||||
padding-right: 4em; /* computes to 120px */
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
/*
|
||||
such padding-right declaration is arbitrary and only serve to make the
|
||||
test a bit more challenging.
|
||||
*/
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
|
||||
|
||||
<div id="lr-mixed">A<div id="inline-table">
|
||||
<span class="row" id="first">F</span>
|
||||
<span class="row" id="last">L</span>
|
||||
</div><span id="orange30">O</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Writing Modes Test: inline-table alignment - central alignment with vertical layout</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-08-13 -->
|
||||
<link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/CSS21/visudet.html#leading" />
|
||||
<link rel="match" href="reference/inline-table-alignment-002-ref.xht" />
|
||||
<meta name="assert" content="This test checks the generation of inline-table baseline. When 'writing-mode' is 'vertical-rl' and when 'text-orientation' is 'upright', then the central baseline is used as the dominant baseline." />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div#rl-upright
|
||||
{
|
||||
color: orange;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
}
|
||||
|
||||
div#inline-table
|
||||
{
|
||||
display: inline-table;
|
||||
padding-left: 0.5em; /* computes to 60px */
|
||||
font-size: 2em; /* computes to 120px */
|
||||
/*
|
||||
such padding-left declaration is arbitrary and only serve to make the
|
||||
test a bit more challenging.
|
||||
*/
|
||||
}
|
||||
|
||||
span.row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
span#first
|
||||
{
|
||||
color: blue;
|
||||
}
|
||||
|
||||
span#last
|
||||
{
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
span#orange30
|
||||
{
|
||||
padding-right: 4em; /* computes to 120px */
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
/*
|
||||
such padding-right declaration is arbitrary and only serve to make the
|
||||
test a bit more challenging.
|
||||
*/
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
|
||||
|
||||
<div id="rl-upright">A<div id="inline-table">
|
||||
<span class="row" id="first">F</span>
|
||||
<span class="row" id="last">L</span>
|
||||
</div><span id="orange30">O</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Writing Modes Test: inline-table alignment - central alignment with vertical layout</title>
|
||||
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
|
||||
<link rel="reviewer" title="G?rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-08-13 -->
|
||||
<link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />
|
||||
<link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/CSS21/visudet.html#leading" />
|
||||
<link rel="match" href="reference/inline-table-alignment-003-ref.xht" />
|
||||
<meta name="assert" content="This test checks the generation of inline-table baseline. When 'writing-mode' is 'vertical-lr' and when 'text-orientation' is 'upright', then the central baseline is used as the dominant baseline." />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div#lr-upright
|
||||
{
|
||||
color: orange;
|
||||
font: 3.75em/1 Ahem; /* computes to 60px/60px */
|
||||
height: 4em;
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: upright;
|
||||
}
|
||||
|
||||
div#inline-table
|
||||
{
|
||||
display: inline-table;
|
||||
padding-left: 0.5em; /* computes to 60px */
|
||||
font-size: 2em; /* computes to 120px */
|
||||
/*
|
||||
such padding-left declaration is arbitrary and only serve to make the
|
||||
test a bit more challenging.
|
||||
*/
|
||||
}
|
||||
|
||||
span.row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
span#first
|
||||
{
|
||||
color: blue;
|
||||
}
|
||||
|
||||
span#last
|
||||
{
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
span#orange30
|
||||
{
|
||||
padding-right: 4em; /* computes to 120px */
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
/*
|
||||
such padding-right declaration is arbitrary and only serve to make the
|
||||
test a bit more challenging.
|
||||
*/
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
|
||||
|
||||
<div id="lr-upright">A<div id="inline-table">
|
||||
<span class="row" id="first">F</span>
|
||||
<span class="row" id="last">L</span>
|
||||
</div><span id="orange30">O</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -156,7 +156,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -64,7 +64,7 @@ if (window.location.search == "?wait") {
|
|||
|
||||
function run() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
||||
var title = node.previousElementSibling.innerText;
|
||||
var title = node.previousElementSibling.textContent;
|
||||
test(function () {
|
||||
try {
|
||||
var targetNode = node.querySelector(".target");
|
||||
|
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<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-08-13 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
img
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
padding-left: 210px; /* 60 px (padding-left) + 120px (blue box width) + 30px (the position difference of box) */
|
||||
}
|
||||
|
||||
img + br + img
|
||||
{
|
||||
padding-left: 60px; /* 60 px (padding-left) */
|
||||
}
|
||||
|
||||
img + br + img + img
|
||||
{
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
img + br + img + img + br + img
|
||||
{
|
||||
padding-left: 225px; /* 60 px (padding-left) + 120px (blue box width) + 45px (the position difference of box)
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
|
||||
|
||||
<div>
|
||||
<img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /><br /><!--
|
||||
--><img src="support/swatch-yellow.png" width="120" height="120" alt="Image download support must be enabled" /><!--
|
||||
--><img src="support/swatch-blue.png" width="120" height="120" alt="Image download support must be enabled" /><br /><!--
|
||||
--><img src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<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-08-13 -->
|
||||
<meta name="flags" content="image" />
|
||||
<style type="text/css"><![CDATA[
|
||||
img
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
padding-left: 90px; /* 60 px (padding-left) + 30px (the position difference of box) */
|
||||
}
|
||||
|
||||
img + br + img
|
||||
{
|
||||
padding-left: 60px; /* 60 px (padding-left) */
|
||||
}
|
||||
|
||||
img + br + img + img
|
||||
{
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
img + br + img + img + br + img
|
||||
{
|
||||
padding-left: 105px; /* 60 px (padding-left) + 45px (the position difference of box)
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if 2 orange squares are centered with respect to a blue square.</p>
|
||||
|
||||
<div>
|
||||
<img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /><br /><!--
|
||||
--><img src="support/swatch-blue.png" width="120" height="120" alt="Image download support must be enabled" /><!--
|
||||
--><img src="support/swatch-yellow.png" width="120" height="120" alt="Image download support must be enabled" /><br /><!--
|
||||
--><img src="support/swatch-orange.png" width="30" height="30" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
Binary file not shown.
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
After Width: | Height: | Size: 9.9 KiB |
|
@ -1,4 +1,6 @@
|
|||
(function () {
|
||||
var log = function () {};
|
||||
|
||||
function OrientationTester(container, orientation) {
|
||||
this.container = container;
|
||||
this.setOrientation(orientation);
|
||||
|
@ -212,8 +214,4 @@
|
|||
for (var key in dict)
|
||||
target[key] = dict[key];
|
||||
}
|
||||
|
||||
function log(text) {
|
||||
console.log(text);
|
||||
}
|
||||
})();
|
||||
|
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Writing Modes Test: The resulting composition is treated as a signel glyph for decorations</title>
|
||||
<meta content="ahem" name="flags" />
|
||||
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii" />
|
||||
<style>
|
||||
#container {
|
||||
font: 50px/1 Ahem;
|
||||
}
|
||||
.vlr {
|
||||
writing-mode:vertical-lr;
|
||||
}
|
||||
.vrl {
|
||||
writing-mode:vertical-rl;
|
||||
}
|
||||
.test, .ref {
|
||||
border:solid thin;
|
||||
margin:.2em;
|
||||
}
|
||||
p {
|
||||
margin:0 .5em;
|
||||
}
|
||||
.underline {
|
||||
text-decoration:underline;
|
||||
}
|
||||
.overline {
|
||||
text-decoration:overline;
|
||||
}
|
||||
.emphasis {
|
||||
text-emphasis:filled;
|
||||
}
|
||||
</style>
|
||||
</head><body><p>This test asserts the resulting composition is treated as a single glyph for decorations.
|
||||
</p><p>Test passes if the following two boxes in each row are identical.
|
||||
</p><div id="container">
|
||||
<div class="vlr">
|
||||
<div class="test">
|
||||
<p class="underline">X X
|
||||
</p><p class="overline">X X
|
||||
</p><p class="emphasis">XXX
|
||||
</p></div>
|
||||
<div class="ref">
|
||||
<p class="underline">X X
|
||||
</p><p class="overline">X X
|
||||
</p><p class="emphasis">XXX
|
||||
</p></div>
|
||||
</div>
|
||||
<div class="vrl">
|
||||
<div class="test">
|
||||
<p class="underline">X X
|
||||
</p><p class="overline">X X
|
||||
</p><p class="emphasis">XXX
|
||||
</p></div>
|
||||
<div class="ref">
|
||||
<p class="underline">X X
|
||||
</p><p class="overline">X X
|
||||
</p><p class="emphasis">XXX
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Writing Modes Test: text-combine-upright:all inherits</title>
|
||||
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii" />
|
||||
<style>
|
||||
#container {
|
||||
font-size:50px;
|
||||
}
|
||||
.vrl {
|
||||
writing-mode:vertical-rl;
|
||||
}
|
||||
.tcy {
|
||||
text-combine-upright:all;
|
||||
}
|
||||
</style>
|
||||
</head><body><p>Test passes if all two-digit numbers are <b>upright</b> in <b>horizontal</b> flow.
|
||||
</p><div id="container">
|
||||
<div>66</div>
|
||||
<div class="vrl"><span class="tcy">66</span></div>
|
||||
<div class="vrl"><span class="tcy">66</span></div>
|
||||
</div>
|
||||
</body></html>
|
|
@ -4,8 +4,6 @@
|
|||
<title>CSS Writing Modes: Layout rules of text-combine-upright</title>
|
||||
<link href="https://google.com/+MasatakaYakura" rel="author" title="Masataka Yakura" />
|
||||
<link href="kojiishi@gmail.com" rel="author" title="Koji Ishii" />
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-layout" rel="help" />
|
||||
<meta content="Anything outside the 1em-composition does not affect layout." name="assert" />
|
||||
<meta content="ahem" name="flags" />
|
||||
<style>
|
||||
#container {
|
||||
|
|
|
@ -20,7 +20,6 @@
|
|||
.control_ahem
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
-webkit-writing-mode: horizontal-tb;
|
||||
}
|
||||
.view
|
||||
{
|
||||
|
@ -30,7 +29,6 @@
|
|||
margin-bottom: 10px;
|
||||
width: 3em;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
}
|
||||
.control
|
||||
{
|
||||
|
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<!-- reftest for text-orietation-013.xht -->
|
||||
<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com"/>
|
||||
<meta http-equiv="content-language" content="en"/>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
background: pink;
|
||||
border: 1px solid black;
|
||||
color: blue;
|
||||
font: 20px/1 Ahem;
|
||||
height: 3em;
|
||||
margin: 10px;
|
||||
width: 3em;
|
||||
white-space: pre;
|
||||
}
|
||||
.control_ahem
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a pair of rectangles is <strong>identical</strong> including <strong>layout</strong>.</p>
|
||||
<div class="control_ahem"> 63
|
||||
52
|
||||
7 1</div>
|
||||
<div class="control_ahem"> 63
|
||||
52
|
||||
7 1</div>
|
||||
</body>
|
||||
</html>
|
|
@ -20,7 +20,6 @@
|
|||
.control_ahem
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
-webkit-writing-mode: horizontal-tb;
|
||||
}
|
||||
.view
|
||||
{
|
||||
|
@ -30,7 +29,6 @@
|
|||
margin-bottom: 10px;
|
||||
width: 3em;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
}
|
||||
.control
|
||||
{
|
||||
|
|
|
@ -20,7 +20,6 @@
|
|||
.control_ahem
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
-webkit-writing-mode: horizontal-tb;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
@ -13,20 +13,22 @@
|
|||
img#orange
|
||||
{
|
||||
padding-top: 60px; /* = the height of first character */
|
||||
padding-left: 60px; /* = the position of orange square */
|
||||
padding-left: 120px; /* = the position of orange square */
|
||||
}
|
||||
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the right edge of orange square attaches the left edge of blue square.</p>
|
||||
<p>Test passes if the right edge of an orange square touches the left edge of a blue 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="30" height="90" 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" /><!--
|
||||
--><img src="support/swatch-blue.png" width="120" height="120" alt="Image download support must be enabled" />
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -20,11 +20,11 @@
|
|||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the left edge of orange square attaches the right edge of blue square.</p>
|
||||
<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="30" height="90" 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" />
|
||||
<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>
|
||||
|
|
|
@ -3416,6 +3416,38 @@
|
|||
<td rowspan="1"><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="caption-side-vlr-007" class="ahem image">
|
||||
<tr>
|
||||
<td rowspan="1" title="'caption-side: block-start' and vertical-lr">
|
||||
<a href="caption-side-vlr-007.xht">caption-side-vlr-007</a></td>
|
||||
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="caption-side-vlr-009" class="ahem image">
|
||||
<tr>
|
||||
<td rowspan="1" title="'caption-side: block-end' and vertical-lr">
|
||||
<a href="caption-side-vlr-009.xht">caption-side-vlr-009</a></td>
|
||||
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="caption-side-vrl-006" class="ahem image">
|
||||
<tr>
|
||||
<td rowspan="1" title="'caption-side: block-start' and vertical-rl">
|
||||
<a href="caption-side-vrl-006.xht">caption-side-vrl-006</a></td>
|
||||
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="caption-side-vrl-008" class="ahem image">
|
||||
<tr>
|
||||
<td rowspan="1" title="'caption-side: block-end' and vertical-rl">
|
||||
<a href="caption-side-vrl-008.xht">caption-side-vrl-008</a></td>
|
||||
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="central-baseline-alignment-002" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="central baseline-alignment of text with 'text-orientation: upright' (vertical-rl)">
|
||||
|
@ -4392,6 +4424,38 @@
|
|||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="inline-table-alignment-002" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="inline-table alignment - central alignment with vertical layout">
|
||||
<a href="inline-table-alignment-002.xht">inline-table-alignment-002</a></td>
|
||||
<td><a href="reference/inline-table-alignment-002-ref.xht">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="inline-table-alignment-003" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="inline-table alignment - central alignment with vertical layout">
|
||||
<a href="inline-table-alignment-003.xht">inline-table-alignment-003</a></td>
|
||||
<td><a href="reference/inline-table-alignment-003-ref.xht">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="inline-table-alignment-004" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="inline-table alignment - central alignment with vertical layout">
|
||||
<a href="inline-table-alignment-004.xht">inline-table-alignment-004</a></td>
|
||||
<td><a href="reference/inline-table-alignment-002-ref.xht">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="inline-table-alignment-005" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="inline-table alignment - central alignment with vertical layout">
|
||||
<a href="inline-table-alignment-005.xht">inline-table-alignment-005</a></td>
|
||||
<td><a href="reference/inline-table-alignment-003-ref.xht">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="line-box-direction-001" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="horizontal-tb - ordering direction of line boxes">
|
||||
|
@ -5152,6 +5216,22 @@
|
|||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="text-combine-upright-decorations-001" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="The resulting composition is treated as a signel glyph for decorations">
|
||||
<a href="text-combine-upright-decorations-001.xht">text-combine-upright-decorations-001</a></td>
|
||||
<td><a href="reference/text-combine-upright-decorations-001.xht">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="text-combine-upright-inherit-all-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="text-combine-upright:all inherits">
|
||||
<a href="text-combine-upright-inherit-all-001.xht">text-combine-upright-inherit-all-001</a></td>
|
||||
<td><a href="reference/text-combine-upright-inherit-all-001.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="text-combine-upright-inherit-all-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="text-combine-upright :all">
|
||||
|
@ -5578,36 +5658,68 @@
|
|||
</tbody>
|
||||
<tbody id="vertical-alignment-new-002" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical align - 'baseline' (alphabetical baseline with vertical layout)">
|
||||
<td rowspan="1" title="vertical-align - 'top' and vertical-rl writing-mode">
|
||||
<a href="vertical-alignment-new-002.xht">vertical-alignment-new-002</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-002-ref.xht">=</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">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'top' and vertical-lr writing-mode">
|
||||
<a href="vertical-alignment-new-003.xht">vertical-alignment-new-003</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-002-ref.xht">=</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">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical align - 'baseline' (alphabetical baseline with vertical layout)">
|
||||
<td rowspan="1" title="vertical-align - 'text-top' and vertical-rl writing-mode">
|
||||
<a href="vertical-alignment-new-004.xht">vertical-alignment-new-004</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-004-ref.xht">=</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">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'text-top' and vertical-lr writing-mode">
|
||||
<a href="vertical-alignment-new-005.xht">vertical-alignment-new-005</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-004-ref.xht">=</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">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical align - 'baseline' (alphabetical baseline with vertical layout)">
|
||||
<td rowspan="1" title="vertical-align - 'text-bottom' and vertical-rl writing-mode">
|
||||
<a href="vertical-alignment-new-006.xht">vertical-alignment-new-006</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-006-ref.xht">=</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">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'text-bottom' and vertical-lr writing-mode">
|
||||
<a href="vertical-alignment-new-007.xht">vertical-alignment-new-007</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-006-ref.xht">=</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">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical align - 'baseline' (alphabetical baseline with vertical layout)">
|
||||
<td rowspan="1" title="vertical-align - 'bottom' and vertical-rl writing-mode">
|
||||
<a href="vertical-alignment-new-008.xht">vertical-alignment-new-008</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-008-ref.xht">=</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">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-align - 'bottom' and vertical-lr writing-mode">
|
||||
<a href="vertical-alignment-new-009.xht">vertical-alignment-new-009</a></td>
|
||||
<td><a href="reference/vertical-alignment-new-008-ref.xht">=</a> </td>
|
||||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="writing-mode-horizontal-001l" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Writing Modes: text-combine-upright in horizontal writing mode">
|
||||
|
|
|
@ -423,6 +423,10 @@ box-offsets-rel-pos-vlr-003.xht == reference/abs-pos-non-replaced-vlr-013-ref.xh
|
|||
box-offsets-rel-pos-vlr-005.xht == reference/box-offsets-rel-pos-vlr-005-ref.xht
|
||||
box-offsets-rel-pos-vrl-002.xht == reference/abs-pos-non-replaced-vrl-012-ref.xht
|
||||
box-offsets-rel-pos-vrl-004.xht == reference/box-offsets-rel-pos-vrl-004-ref.xht
|
||||
caption-side-vlr-007.xht == reference/ref-filled-green-100px-square.xht
|
||||
caption-side-vlr-009.xht == reference/ref-filled-green-100px-square.xht
|
||||
caption-side-vrl-006.xht == reference/ref-filled-green-100px-square.xht
|
||||
caption-side-vrl-008.xht == reference/ref-filled-green-100px-square.xht
|
||||
central-baseline-alignment-002.xht == reference/central-baseline-alignment-002-ref.xht
|
||||
central-baseline-alignment-003.xht == reference/central-baseline-alignment-002-ref.xht
|
||||
clearance-calculations-vrl-002.xht == reference/clearance-calculations-vrl-002-ref.xht
|
||||
|
@ -545,6 +549,10 @@ inline-replaced-vlr-003.xht == reference/inline-replaced-vrl-002-ref.xht
|
|||
inline-replaced-vlr-005.xht == reference/inline-replaced-vrl-004-ref.xht
|
||||
inline-replaced-vrl-002.xht == reference/inline-replaced-vrl-002-ref.xht
|
||||
inline-replaced-vrl-004.xht == reference/inline-replaced-vrl-004-ref.xht
|
||||
inline-table-alignment-002.xht == reference/inline-table-alignment-002-ref.xht
|
||||
inline-table-alignment-003.xht == reference/inline-table-alignment-003-ref.xht
|
||||
inline-table-alignment-004.xht == reference/inline-table-alignment-002-ref.xht
|
||||
inline-table-alignment-005.xht == reference/inline-table-alignment-003-ref.xht
|
||||
line-box-direction-001.xht == reference/block-flow-direction-001-ref.xht
|
||||
line-box-direction-002.xht == reference/block-flow-direction-001-ref.xht
|
||||
line-box-direction-003.xht == reference/block-flow-direction-001-ref.xht
|
||||
|
@ -640,6 +648,8 @@ text-baseline-008.xht == reference/text-baseline-006-ref.xht
|
|||
text-baseline-009.xht == reference/text-baseline-006-ref.xht
|
||||
text-baseline-010.xht == reference/text-baseline-007-ref.xht
|
||||
text-baseline-011.xht == reference/text-baseline-007-ref.xht
|
||||
text-combine-upright-decorations-001.xht == reference/text-combine-upright-decorations-001.xht
|
||||
text-combine-upright-inherit-all-001.xht == reference/text-combine-upright-inherit-all-001.xht
|
||||
text-combine-upright-inherit-all-002.xht == reference/text-combine-upright-inherit-all-002.xht
|
||||
text-combine-upright-layout-rules-001.xht == reference/text-combine-upright-layout-rules-001-ref.xht
|
||||
text-combine-upright-line-breaking-rules-001.xht == reference/text-combine-upright-line-breaking-rules-001.xht
|
||||
|
@ -694,9 +704,13 @@ unicode-bidi-applies-to-013.xht == reference/direction-applies-to-008-ref.xht
|
|||
unicode-bidi-applies-to-014.xht == reference/direction-applies-to-008-ref.xht
|
||||
unicode-bidi-applies-to-015.xht == reference/direction-applies-to-008-ref.xht
|
||||
vertical-alignment-new-002.xht == reference/vertical-alignment-new-002-ref.xht
|
||||
vertical-alignment-new-003.xht == reference/vertical-alignment-new-002-ref.xht
|
||||
vertical-alignment-new-004.xht == reference/vertical-alignment-new-004-ref.xht
|
||||
vertical-alignment-new-005.xht == reference/vertical-alignment-new-004-ref.xht
|
||||
vertical-alignment-new-006.xht == reference/vertical-alignment-new-006-ref.xht
|
||||
vertical-alignment-new-007.xht == reference/vertical-alignment-new-006-ref.xht
|
||||
vertical-alignment-new-008.xht == reference/vertical-alignment-new-008-ref.xht
|
||||
vertical-alignment-new-009.xht == reference/vertical-alignment-new-008-ref.xht
|
||||
writing-mode-horizontal-001l.xht == reference/writing-mode-horizontal-001l-ref.xht
|
||||
writing-mode-horizontal-001r.xht == reference/writing-mode-horizontal-001r-ref.xht
|
||||
writing-mode-stretch-001.xht == reference/writing-mode-stretch-001-ref.xht
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
After Width: | Height: | Size: 9.9 KiB |
|
@ -1,4 +1,6 @@
|
|||
(function () {
|
||||
var log = function () {};
|
||||
|
||||
function OrientationTester(container, orientation) {
|
||||
this.container = container;
|
||||
this.setOrientation(orientation);
|
||||
|
@ -212,8 +214,4 @@
|
|||
for (var key in dict)
|
||||
target[key] = dict[key];
|
||||
}
|
||||
|
||||
function log(text) {
|
||||
console.log(text);
|
||||
}
|
||||
})();
|
||||
|
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Writing Modes Test: The resulting composition is treated as a signel glyph for decorations</title>
|
||||
<link href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout" rel="help" title="9.1.2. Layout Rules" />
|
||||
<link href="reference/text-combine-upright-decorations-001.xht" rel="match" />
|
||||
<meta content="The resulting composition is treated as a signel glyph for decorations" name="assert" />
|
||||
<meta content="ahem" name="flags" />
|
||||
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii" />
|
||||
<style>
|
||||
#container {
|
||||
font: 50px/1 Ahem;
|
||||
}
|
||||
.vlr {
|
||||
writing-mode:vertical-lr;
|
||||
}
|
||||
.vrl {
|
||||
writing-mode:vertical-rl;
|
||||
}
|
||||
.test, .ref {
|
||||
border:solid thin;
|
||||
margin:.2em;
|
||||
}
|
||||
p {
|
||||
margin:0 .5em;
|
||||
}
|
||||
.tcy {
|
||||
text-combine-upright:all;
|
||||
}
|
||||
.underline {
|
||||
text-decoration:underline;
|
||||
}
|
||||
.overline {
|
||||
text-decoration:overline;
|
||||
}
|
||||
.emphasis {
|
||||
text-emphasis:filled;
|
||||
}
|
||||
</style>
|
||||
</head><body><p>This test asserts the resulting composition is treated as a single glyph for decorations.
|
||||
</p><p>Test passes if the following two boxes in each row are identical.
|
||||
</p><div id="container">
|
||||
<div class="vlr">
|
||||
<div class="test">
|
||||
<p class="underline">X<span class="tcy"> </span>X
|
||||
</p><p class="overline">X<span class="tcy"> </span>X
|
||||
</p><p class="emphasis">X<span class="tcy">X</span>X
|
||||
</p></div>
|
||||
<div class="ref">
|
||||
<p class="underline">X X
|
||||
</p><p class="overline">X X
|
||||
</p><p class="emphasis">XXX
|
||||
</p></div>
|
||||
</div>
|
||||
<div class="vrl">
|
||||
<div class="test">
|
||||
<p class="underline">X<span class="tcy"> </span>X
|
||||
</p><p class="overline">X<span class="tcy"> </span>X
|
||||
</p><p class="emphasis">X<span class="tcy">X</span>X
|
||||
</p></div>
|
||||
<div class="ref">
|
||||
<p class="underline">X X
|
||||
</p><p class="overline">X X
|
||||
</p><p class="emphasis">XXX
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Writing Modes Test: text-combine-upright:all inherits</title>
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-upright" rel="help" />
|
||||
<link href="reference/text-combine-upright-inherit-all-001.xht" rel="match" />
|
||||
<meta content="This test checks text-combine-upright:all inherits" name="assert" />
|
||||
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii" />
|
||||
<style>
|
||||
#container {
|
||||
font-size:50px;
|
||||
}
|
||||
.vrl {
|
||||
writing-mode:vertical-rl;
|
||||
}
|
||||
.tcy {
|
||||
text-combine-upright:all;
|
||||
}
|
||||
</style>
|
||||
</head><body><p>Test passes if all two-digit numbers are <b>upright</b> in <b>horizontal</b> flow.
|
||||
</p><div id="container">
|
||||
<div>66</div>
|
||||
<div class="vrl"><span class="tcy">66</span></div>
|
||||
<div class="vrl"><span class="tcy"><span>66</span></span></div>
|
||||
</div>
|
||||
</body></html>
|
|
@ -31,14 +31,11 @@
|
|||
#test_ahem
|
||||
{
|
||||
text-orientation: upright; /* The property to be tested */
|
||||
-webkit-text-orientation: upright;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
}
|
||||
#control_ahem
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
-webkit-writing-mode: horizontal-tb;
|
||||
}
|
||||
.view
|
||||
{
|
||||
|
@ -49,12 +46,10 @@
|
|||
margin-bottom: 10px;
|
||||
width: 3em;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
}
|
||||
#test
|
||||
{
|
||||
text-orientation: upright; /* The property to be tested */
|
||||
-webkit-text-orientation: upright;
|
||||
}
|
||||
#control
|
||||
{
|
||||
|
|
|
@ -23,14 +23,11 @@
|
|||
#test_ahem
|
||||
{
|
||||
text-orientation: sideways-right; /* The property to be tested */
|
||||
-webkit-text-orientation:sideways-right;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
}
|
||||
#control_ahem
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
-webkit-writing-mode: horizontal-tb;
|
||||
}
|
||||
.view
|
||||
{
|
||||
|
@ -40,12 +37,10 @@
|
|||
margin-bottom: 10px;
|
||||
width: 3em;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
}
|
||||
#test
|
||||
{
|
||||
text-orientation: sideways-right; /* The property to be tested */
|
||||
-webkit-text-orientation:sideways-right;
|
||||
}
|
||||
#control
|
||||
{
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Writing Modes Test: text-orientation - sideways-left</title>
|
||||
<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com"/>
|
||||
<link rel="help" title="5.1. Orienting Text: the‘text-orientation’property" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation"/>
|
||||
<link rel="help" title="5.1. Orienting Text: the ‘text-orientation’ property" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation"/>
|
||||
<link rel="match" href="reference/text-orientation-013-ref.xht"/>
|
||||
<meta http-equiv="content-language" content="en"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<meta name="assert" content="This test checks that 'text-orientation: sideways-left' causes text to be set as if in a horizontal layout, but rotated 90°counter-clockwise, in vertical writing modes. It's effective to verify 1.block flow direction and 2.inline direction, but not effective to verify 3.glyph orientation."/>
|
||||
<meta name="assert" content="This test checks that 'text-orientation: sideways-left' causes text to be set as if in a horizontal layout, but rotated 90° counter-clockwise, in vertical writing modes. It's effective to verify 1.block flow direction and 2.inline direction, but not effective to verify 3.glyph orientation."/>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
|
@ -16,27 +16,24 @@
|
|||
color: blue;
|
||||
font: 20px/1 Ahem;
|
||||
height: 3em;
|
||||
margin: 10px;
|
||||
margin: 10px;
|
||||
width: 3em;
|
||||
white-space: pre;
|
||||
}
|
||||
#test_ahem
|
||||
{
|
||||
text-orientation: sideways-left; /* This property to be tested */
|
||||
-webkit-text-orientation: sideways-left;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
}
|
||||
#control_ahem
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
-webkit-writing-mode: horizontal-tb;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
Here, the "Ahem" sub-test is in place and checks 1.block flow direction and 2.inline direction,
|
||||
Here, the "Ahem" sub-test is in place and checks 1.block flow direction and 2.inline direction,
|
||||
but not cheks 3.glyph orientation.
|
||||
-->
|
||||
<p>Test passes if a pair of rectangles is <strong>identical</strong> including <strong>layout</strong>.</p>
|
||||
|
|
|
@ -23,14 +23,11 @@
|
|||
#test_ahem
|
||||
{
|
||||
text-orientation: sideways; /* The property to be tested */
|
||||
-webkit-text-orientation: sideways;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
}
|
||||
#control_ahem
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
-webkit-writing-mode: horizontal-tb;
|
||||
}
|
||||
.view
|
||||
{
|
||||
|
@ -40,12 +37,10 @@
|
|||
margin-bottom: 10px;
|
||||
width: 3em;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
}
|
||||
#test
|
||||
{
|
||||
text-orientation: sideways; /* The property to be tested */
|
||||
-webkit-text-orientation: sideways;
|
||||
}
|
||||
#control
|
||||
{
|
||||
|
|
|
@ -23,14 +23,11 @@
|
|||
#test_ahem
|
||||
{
|
||||
text-orientation: sideways; /* The property to be tested */
|
||||
-webkit-text-orientation:sideways;
|
||||
writing-mode: vertical-lr;
|
||||
-webkit-writing-mode: vertical-lr;
|
||||
}
|
||||
#control_ahem
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
-webkit-writing-mode: horizontal-tb;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
@ -28,15 +28,7 @@
|
|||
|
||||
div#vertical
|
||||
{
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
-moz-writing-mode: vertical-rl;
|
||||
-o-writing-mode: vertical-rl;
|
||||
-ms-writing-mode: vertical-rl;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-text-orientation: mixed;
|
||||
-moz-text-orientation: mixed;
|
||||
-o-text-orientation: mixed;
|
||||
-ms-text-orientation: mixed;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
|
|
|
@ -182,12 +182,12 @@ summary {
|
|||
</div>
|
||||
<div data-block="Thai">
|
||||
<div class="line">กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภ</div>
|
||||
<div class="line">มยรฤลฦวศษสหฬอฮฯะาำ฿เแโใไๅๆ๏๐๑๒๓๔</div>
|
||||
<div class="line">๕๖๗๘๙๚๛</div>
|
||||
<div class="line">มยรฤลฦวศษสหฬอฮฯะา฿เแโใไๅๆ๏๐๑๒๓๔๕</div>
|
||||
<div class="line">๖๗๘๙๚๛</div>
|
||||
</div>
|
||||
<div data-block="Lao">
|
||||
<div class="line">ກຂຄງຈຊຍດຕຖທນບປຜຝພຟມຢຣລວສຫອຮຯະາຳຽ</div>
|
||||
<div class="line">ເແໂໃໄໆ໐໑໒໓໔໕໖໗໘໙ໜໝໞໟ</div>
|
||||
<div class="line">ກຂຄງຈຊຍດຕຖທນບປຜຝພຟມຢຣລວສຫອຮຯະາຽເ</div>
|
||||
<div class="line">ແໂໃໄໆ໐໑໒໓໔໕໖໗໘໙ໜໝໞໟ</div>
|
||||
</div>
|
||||
<div data-block="Tibetan">
|
||||
<div class="line">ༀ༁༂༃༄༅༆༇༈༉༊་༌།༎༏༐༑༒༓༔༕༖༗༚༛༜༝༞༟༠༡</div>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#2/8, 2048 code points in U+0B36-1B4A).</title>
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#2/8, 2048 code points in U+0B36-1B50).</title>
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" rel="help" />
|
||||
<meta content="Test orientation of characters where vo=R (#2/8, 2048 code points in U+0B36-1B4A)" name="assert" />
|
||||
<meta content="Test orientation of characters where vo=R (#2/8, 2048 code points in U+0B36-1B50)" name="assert" />
|
||||
<meta content="dom font" name="flags" />
|
||||
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
@ -68,12 +68,12 @@ summary {
|
|||
</div>
|
||||
<div data-block="Thai">
|
||||
<div class="line">กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภ</div>
|
||||
<div class="line">มยรฤลฦวศษสหฬอฮฯะาำ฿เแโใไๅๆ๏๐๑๒๓๔</div>
|
||||
<div class="line">๕๖๗๘๙๚๛</div>
|
||||
<div class="line">มยรฤลฦวศษสหฬอฮฯะา฿เแโใไๅๆ๏๐๑๒๓๔๕</div>
|
||||
<div class="line">๖๗๘๙๚๛</div>
|
||||
</div>
|
||||
<div data-block="Lao">
|
||||
<div class="line">ກຂຄງຈຊຍດຕຖທນບປຜຝພຟມຢຣລວສຫອຮຯະາຳຽ</div>
|
||||
<div class="line">ເແໂໃໄໆ໐໑໒໓໔໕໖໗໘໙ໜໝໞໟ</div>
|
||||
<div class="line">ກຂຄງຈຊຍດຕຖທນບປຜຝພຟມຢຣລວສຫອຮຯະາຽເ</div>
|
||||
<div class="line">ແໂໃໄໆ໐໑໒໓໔໕໖໗໘໙ໜໝໞໟ</div>
|
||||
</div>
|
||||
<div data-block="Tibetan">
|
||||
<div class="line">ༀ༁༂༃༄༅༆༇༈༉༊་༌།༎༏༐༑༒༓༔༕༖༗༚༛༜༝༞༟༠༡</div>
|
||||
|
@ -172,7 +172,7 @@ summary {
|
|||
</div>
|
||||
<div data-block="Balinese">
|
||||
<div class="line">ᬅᬆᬇᬈᬉᬊᬋᬌᬍᬎᬏᬐᬑᬒᬓᬔᬕᬖᬗᬘᬙᬚᬛᬜᬝᬞᬟᬠᬡᬢᬣᬤ</div>
|
||||
<div class="line">ᬥᬦᬧᬨᬩᬪᬫᬬᬭᬮᬯᬰᬱᬲᬳᭅᭆᭇᭈᭉᭊ</div>
|
||||
<div class="line">ᬥᬦᬧᬨᬩᬪᬫᬬᬭᬮᬯᬰᬱᬲᬳᭅᭆᭇᭈᭉᭊᭋ᭐</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#3/8, 2048 code points in U+1B4B-2896).</title>
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#3/8, 2048 code points in U+1B51-2898).</title>
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" rel="help" />
|
||||
<meta content="Test orientation of characters where vo=R (#3/8, 2048 code points in U+1B4B-2896)" name="assert" />
|
||||
<meta content="Test orientation of characters where vo=R (#3/8, 2048 code points in U+1B51-2898)" name="assert" />
|
||||
<meta content="dom font" name="flags" />
|
||||
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
@ -40,8 +40,8 @@ summary {
|
|||
<div id="container">
|
||||
<div data-vo="R" class="test">
|
||||
<div data-block="Balinese">
|
||||
<div class="line">ᭋ᭐᭑᭒᭓᭔᭕᭖᭗᭘᭙᭚᭛᭜᭝᭞᭟᭠᭡᭢᭣᭤᭥᭦᭧᭨᭩᭪᭴᭵᭶᭷</div>
|
||||
<div class="line">᭸᭹᭺᭻᭼</div>
|
||||
<div class="line">᭑᭒᭓᭔᭕᭖᭗᭘᭙᭚᭛᭜᭝᭞᭟᭠᭡᭢᭣᭤᭥᭦᭧᭨᭩᭪᭴᭵᭶᭷᭸᭹</div>
|
||||
<div class="line">᭺᭻᭼</div>
|
||||
</div>
|
||||
<div data-block="Sundanese">
|
||||
<div class="line">ᮃᮄᮅᮆᮇᮈᮉᮊᮋᮌᮍᮎᮏᮐᮑᮒᮓᮔᮕᮖᮗᮘᮙᮚᮛᮜᮝᮞᮟᮠᮮᮯ</div>
|
||||
|
@ -163,7 +163,7 @@ summary {
|
|||
<div class="line">⠠⠡⠢⠣⠤⠥⠦⠧⠨⠩⠪⠫⠬⠭⠮⠯⠰⠱⠲⠳⠴⠵⠶⠷⠸⠹⠺⠻⠼⠽⠾⠿</div>
|
||||
<div class="line">⡀⡁⡂⡃⡄⡅⡆⡇⡈⡉⡊⡋⡌⡍⡎⡏⡐⡑⡒⡓⡔⡕⡖⡗⡘⡙⡚⡛⡜⡝⡞⡟</div>
|
||||
<div class="line">⡠⡡⡢⡣⡤⡥⡦⡧⡨⡩⡪⡫⡬⡭⡮⡯⡰⡱⡲⡳⡴⡵⡶⡷⡸⡹⡺⡻⡼⡽⡾⡿</div>
|
||||
<div class="line">⢀⢁⢂⢃⢄⢅⢆⢇⢈⢉⢊⢋⢌⢍⢎⢏⢐⢑⢒⢓⢔⢕⢖</div>
|
||||
<div class="line">⢀⢁⢂⢃⢄⢅⢆⢇⢈⢉⢊⢋⢌⢍⢎⢏⢐⢑⢒⢓⢔⢕⢖⢗⢘</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#4/8, 2048 code points in U+2897-A882).</title>
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#4/8, 2048 code points in U+2899-A884).</title>
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" rel="help" />
|
||||
<meta content="Test orientation of characters where vo=R (#4/8, 2048 code points in U+2897-A882)" name="assert" />
|
||||
<meta content="Test orientation of characters where vo=R (#4/8, 2048 code points in U+2899-A884)" name="assert" />
|
||||
<meta content="dom font" name="flags" />
|
||||
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
@ -40,10 +40,10 @@ summary {
|
|||
<div id="container">
|
||||
<div data-vo="R" class="test">
|
||||
<div data-block="Braille">
|
||||
<div class="line">⢗⢘⢙⢚⢛⢜⢝⢞⢟⢠⢡⢢⢣⢤⢥⢦⢧⢨⢩⢪⢫⢬⢭⢮⢯⢰⢱⢲⢳⢴⢵⢶</div>
|
||||
<div class="line">⢷⢸⢹⢺⢻⢼⢽⢾⢿⣀⣁⣂⣃⣄⣅⣆⣇⣈⣉⣊⣋⣌⣍⣎⣏⣐⣑⣒⣓⣔⣕⣖</div>
|
||||
<div class="line">⣗⣘⣙⣚⣛⣜⣝⣞⣟⣠⣡⣢⣣⣤⣥⣦⣧⣨⣩⣪⣫⣬⣭⣮⣯⣰⣱⣲⣳⣴⣵⣶</div>
|
||||
<div class="line">⣷⣸⣹⣺⣻⣼⣽⣾⣿</div>
|
||||
<div class="line">⢙⢚⢛⢜⢝⢞⢟⢠⢡⢢⢣⢤⢥⢦⢧⢨⢩⢪⢫⢬⢭⢮⢯⢰⢱⢲⢳⢴⢵⢶⢷⢸</div>
|
||||
<div class="line">⢹⢺⢻⢼⢽⢾⢿⣀⣁⣂⣃⣄⣅⣆⣇⣈⣉⣊⣋⣌⣍⣎⣏⣐⣑⣒⣓⣔⣕⣖⣗⣘</div>
|
||||
<div class="line">⣙⣚⣛⣜⣝⣞⣟⣠⣡⣢⣣⣤⣥⣦⣧⣨⣩⣪⣫⣬⣭⣮⣯⣰⣱⣲⣳⣴⣵⣶⣷⣸</div>
|
||||
<div class="line">⣹⣺⣻⣼⣽⣾⣿</div>
|
||||
</div>
|
||||
<div data-block="Supplemental">
|
||||
<div class="line">⤀⤁⤂⤃⤄⤅⤆⤇⤈⤉⤊⤋⤌⤍⤎⤏⤐⤑⤒⤓⤔⤕⤖⤗⤘⤙⤚⤛⤜⤝⤞⤟</div>
|
||||
|
@ -154,7 +154,7 @@ summary {
|
|||
<div class="line">ꡠꡡꡢꡣꡤꡥꡦꡧꡨꡩꡪꡫꡬꡭꡮꡯꡰꡱꡲꡳ꡴꡵꡶꡷</div>
|
||||
</div>
|
||||
<div data-block="Saurashtra">
|
||||
<div class="line">ꢂ</div>
|
||||
<div class="line">ꢂꢃꢄ</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#5/8, 2048 code points in U+A883-10341).</title>
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#5/8, 2048 code points in U+A885-10343).</title>
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" rel="help" />
|
||||
<meta content="Test orientation of characters where vo=R (#5/8, 2048 code points in U+A883-10341)" name="assert" />
|
||||
<meta content="Test orientation of characters where vo=R (#5/8, 2048 code points in U+A885-10343)" name="assert" />
|
||||
<meta content="dom font" name="flags" />
|
||||
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
@ -40,8 +40,8 @@ summary {
|
|||
<div id="container">
|
||||
<div data-vo="R" class="test">
|
||||
<div data-block="Saurashtra">
|
||||
<div class="line">ꢃꢄꢅꢆꢇꢈꢉꢊꢋꢌꢍꢎꢏꢐꢑꢒꢓꢔꢕꢖꢗꢘꢙꢚꢛꢜꢝꢞꢟꢠꢡꢢ</div>
|
||||
<div class="line">ꢣꢤꢥꢦꢧꢨꢩꢪꢫꢬꢭꢮꢯꢰꢱꢲꢳ꣎꣏꣐꣑꣒꣓꣔꣕꣖꣗꣘꣙</div>
|
||||
<div class="line">ꢅꢆꢇꢈꢉꢊꢋꢌꢍꢎꢏꢐꢑꢒꢓꢔꢕꢖꢗꢘꢙꢚꢛꢜꢝꢞꢟꢠꢡꢢꢣꢤ</div>
|
||||
<div class="line">ꢥꢦꢧꢨꢩꢪꢫꢬꢭꢮꢯꢰꢱꢲꢳ꣎꣏꣐꣑꣒꣓꣔꣕꣖꣗꣘꣙</div>
|
||||
</div>
|
||||
<div data-block="Devanagari">
|
||||
<div class="line">ꣲꣳꣴꣵꣶꣷ꣸꣹꣺ꣻ</div>
|
||||
|
@ -169,7 +169,7 @@ summary {
|
|||
<div class="line">𐌠𐌡𐌢𐌣</div>
|
||||
</div>
|
||||
<div data-block="Gothic">
|
||||
<div class="line">𐌰𐌱𐌲𐌳𐌴𐌵𐌶𐌷𐌸𐌹𐌺𐌻𐌼𐌽𐌾𐌿𐍀𐍁</div>
|
||||
<div class="line">𐌰𐌱𐌲𐌳𐌴𐌵𐌶𐌷𐌸𐌹𐌺𐌻𐌼𐌽𐌾𐌿𐍀𐍁𐍂𐍃</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#6/8, 2048 code points in U+10342-1169B).</title>
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#6/8, 2048 code points in U+10344-1169D).</title>
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" rel="help" />
|
||||
<meta content="Test orientation of characters where vo=R (#6/8, 2048 code points in U+10342-1169B)" name="assert" />
|
||||
<meta content="Test orientation of characters where vo=R (#6/8, 2048 code points in U+10344-1169D)" name="assert" />
|
||||
<meta content="dom font" name="flags" />
|
||||
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
@ -40,7 +40,7 @@ summary {
|
|||
<div id="container">
|
||||
<div data-vo="R" class="test">
|
||||
<div data-block="Gothic">
|
||||
<div class="line">𐍂𐍃𐍄𐍅𐍆𐍇𐍈𐍉𐍊</div>
|
||||
<div class="line">𐍄𐍅𐍆𐍇𐍈𐍉𐍊</div>
|
||||
</div>
|
||||
<div data-block="Old">
|
||||
<div class="line">𐍐𐍑𐍒𐍓𐍔𐍕𐍖𐍗𐍘𐍙𐍚𐍛𐍜𐍝𐍞𐍟𐍠𐍡𐍢𐍣𐍤𐍥𐍦𐍧𐍨𐍩𐍪𐍫𐍬𐍭𐍮𐍯</div>
|
||||
|
@ -193,7 +193,7 @@ summary {
|
|||
<div class="line">𑘠𑘡𑘢𑘣𑘤𑘥𑘦𑘧𑘨𑘩𑘪𑘫𑘬𑘭𑘮𑘯𑙁𑙂𑙃𑙄𑙐𑙑𑙒𑙓𑙔𑙕𑙖𑙗𑙘𑙙</div>
|
||||
</div>
|
||||
<div data-block="Takri">
|
||||
<div class="line">𑚀𑚁𑚂𑚃𑚄𑚅𑚆𑚇𑚈𑚉𑚊𑚋𑚌𑚍𑚎𑚏𑚐𑚑𑚒𑚓𑚔𑚕𑚖𑚗𑚘𑚙𑚚𑚛</div>
|
||||
<div class="line">𑚀𑚁𑚂𑚃𑚄𑚅𑚆𑚇𑚈𑚉𑚊𑚋𑚌𑚍𑚎𑚏𑚐𑚑𑚒𑚓𑚔𑚕𑚖𑚗𑚘𑚙𑚚𑚛𑚜𑚝</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#7/8, 2048 code points in U+1169C-16F9E).</title>
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#7/8, 2048 code points in U+1169E-1BC00).</title>
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" rel="help" />
|
||||
<meta content="Test orientation of characters where vo=R (#7/8, 2048 code points in U+1169C-16F9E)" name="assert" />
|
||||
<meta content="Test orientation of characters where vo=R (#7/8, 2048 code points in U+1169E-1BC00)" name="assert" />
|
||||
<meta content="dom font" name="flags" />
|
||||
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
@ -40,7 +40,7 @@ summary {
|
|||
<div id="container">
|
||||
<div data-vo="R" class="test">
|
||||
<div data-block="Takri">
|
||||
<div class="line">𑚜𑚝𑚞𑚟𑚠𑚡𑚢𑚣𑚤𑚥𑚦𑚧𑚨𑚩𑚪𑛀𑛁𑛂𑛃𑛄𑛅𑛆𑛇𑛈𑛉</div>
|
||||
<div class="line">𑚞𑚟𑚠𑚡𑚢𑚣𑚤𑚥𑚦𑚧𑚨𑚩𑚪𑛀𑛁𑛂𑛃𑛄𑛅𑛆𑛇𑛈𑛉</div>
|
||||
</div>
|
||||
<div data-block="Warang">
|
||||
<div class="line">𑢠𑢡𑢢𑢣𑢤𑢥𑢦𑢧𑢨𑢩𑢪𑢫𑢬𑢭𑢮𑢯𑢰𑢱𑢲𑢳𑢴𑢵𑢶𑢷𑢸𑢹𑢺𑢻𑢼𑢽𑢾𑢿</div>
|
||||
|
@ -122,7 +122,10 @@ summary {
|
|||
<div data-block="Miao">
|
||||
<div class="line">𖼀𖼁𖼂𖼃𖼄𖼅𖼆𖼇𖼈𖼉𖼊𖼋𖼌𖼍𖼎𖼏𖼐𖼑𖼒𖼓𖼔𖼕𖼖𖼗𖼘𖼙𖼚𖼛𖼜𖼝𖼞𖼟</div>
|
||||
<div class="line">𖼠𖼡𖼢𖼣𖼤𖼥𖼦𖼧𖼨𖼩𖼪𖼫𖼬𖼭𖼮𖼯𖼰𖼱𖼲𖼳𖼴𖼵𖼶𖼷𖼸𖼹𖼺𖼻𖼼𖼽𖼾𖼿</div>
|
||||
<div class="line">𖽀𖽁𖽂𖽃𖽄𖽐𖾓𖾔𖾕𖾖𖾗𖾘𖾙𖾚𖾛𖾜𖾝𖾞</div>
|
||||
<div class="line">𖽀𖽁𖽂𖽃𖽄𖽐𖾓𖾔𖾕𖾖𖾗𖾘𖾙𖾚𖾛𖾜𖾝𖾞𖾟</div>
|
||||
</div>
|
||||
<div data-block="Duployan">
|
||||
<div class="line">𛰀</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#8/8, 1702 code points in U+16F9F-1F8AD).</title>
|
||||
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#8/8, 1700 code points in U+1BC01-1F8AD).</title>
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" rel="help" />
|
||||
<meta content="Test orientation of characters where vo=R (#8/8, 1702 code points in U+16F9F-1F8AD)" name="assert" />
|
||||
<meta content="Test orientation of characters where vo=R (#8/8, 1700 code points in U+1BC01-1F8AD)" name="assert" />
|
||||
<meta content="dom font" name="flags" />
|
||||
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
@ -39,15 +39,12 @@ summary {
|
|||
<div id="details"></div>
|
||||
<div id="container">
|
||||
<div data-vo="R" class="test">
|
||||
<div data-block="Miao">
|
||||
<div class="line">𖾟</div>
|
||||
</div>
|
||||
<div data-block="Duployan">
|
||||
<div class="line">𛰀𛰁𛰂𛰃𛰄𛰅𛰆𛰇𛰈𛰉𛰊𛰋𛰌𛰍𛰎𛰏𛰐𛰑𛰒𛰓𛰔𛰕𛰖𛰗𛰘𛰙𛰚𛰛𛰜𛰝𛰞𛰟</div>
|
||||
<div class="line">𛰠𛰡𛰢𛰣𛰤𛰥𛰦𛰧𛰨𛰩𛰪𛰫𛰬𛰭𛰮𛰯𛰰𛰱𛰲𛰳𛰴𛰵𛰶𛰷𛰸𛰹𛰺𛰻𛰼𛰽𛰾𛰿</div>
|
||||
<div class="line">𛱀𛱁𛱂𛱃𛱄𛱅𛱆𛱇𛱈𛱉𛱊𛱋𛱌𛱍𛱎𛱏𛱐𛱑𛱒𛱓𛱔𛱕𛱖𛱗𛱘𛱙𛱚𛱛𛱜𛱝𛱞𛱟</div>
|
||||
<div class="line">𛱠𛱡𛱢𛱣𛱤𛱥𛱦𛱧𛱨𛱩𛱪𛱰𛱱𛱲𛱳𛱴𛱵𛱶𛱷𛱸𛱹𛱺𛱻𛱼𛲀𛲁𛲂𛲃𛲄𛲅𛲆𛲇</div>
|
||||
<div class="line">𛲈𛲐𛲑𛲒𛲓𛲔𛲕𛲖𛲗𛲘𛲙𛲜𛲟</div>
|
||||
<div class="line">𛰁𛰂𛰃𛰄𛰅𛰆𛰇𛰈𛰉𛰊𛰋𛰌𛰍𛰎𛰏𛰐𛰑𛰒𛰓𛰔𛰕𛰖𛰗𛰘𛰙𛰚𛰛𛰜𛰝𛰞𛰟𛰠</div>
|
||||
<div class="line">𛰡𛰢𛰣𛰤𛰥𛰦𛰧𛰨𛰩𛰪𛰫𛰬𛰭𛰮𛰯𛰰𛰱𛰲𛰳𛰴𛰵𛰶𛰷𛰸𛰹𛰺𛰻𛰼𛰽𛰾𛰿𛱀</div>
|
||||
<div class="line">𛱁𛱂𛱃𛱄𛱅𛱆𛱇𛱈𛱉𛱊𛱋𛱌𛱍𛱎𛱏𛱐𛱑𛱒𛱓𛱔𛱕𛱖𛱗𛱘𛱙𛱚𛱛𛱜𛱝𛱞𛱟𛱠</div>
|
||||
<div class="line">𛱡𛱢𛱣𛱤𛱥𛱦𛱧𛱨𛱩𛱪𛱰𛱱𛱲𛱳𛱴𛱵𛱶𛱷𛱸𛱹𛱺𛱻𛱼𛲀𛲁𛲂𛲃𛲄𛲅𛲆𛲇𛲈</div>
|
||||
<div class="line">𛲐𛲑𛲒𛲓𛲔𛲕𛲖𛲗𛲘𛲙𛲜𛲟</div>
|
||||
</div>
|
||||
<div data-block="Ancient">
|
||||
<div class="line">𝈀𝈁𝈂𝈃𝈄𝈅𝈆𝈇𝈈𝈉𝈊𝈋𝈌𝈍𝈎𝈏𝈐𝈑𝈒𝈓𝈔𝈕𝈖𝈗𝈘𝈙𝈚𝈛𝈜𝈝𝈞𝈟</div>
|
||||
|
|
|
@ -28,15 +28,7 @@
|
|||
|
||||
div#vertical
|
||||
{
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
-moz-writing-mode: vertical-rl;
|
||||
-o-writing-mode: vertical-rl;
|
||||
-ms-writing-mode: vertical-rl;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-text-orientation: sideways;
|
||||
-moz-text-orientation: sideways;
|
||||
-o-text-orientation: sideways;
|
||||
-ms-text-orientation: sideways;
|
||||
text-orientation: sideways;
|
||||
}
|
||||
|
||||
|
|
|
@ -29,15 +29,7 @@
|
|||
|
||||
div#vertical
|
||||
{
|
||||
-webkit-writing-mode: vertical-lr;
|
||||
-moz-writing-mode: vertical-lr;
|
||||
-o-writing-mode: vertical-lr;
|
||||
-ms-writing-mode: vertical-lr;
|
||||
writing-mode: vertical-lr;
|
||||
-webkit-text-orientation: sideways;
|
||||
-moz-text-orientation: sideways;
|
||||
-o-text-orientation: sideways;
|
||||
-ms-text-orientation: sideways;
|
||||
text-orientation: sideways;
|
||||
}
|
||||
|
||||
|
|
|
@ -28,15 +28,7 @@
|
|||
|
||||
div#vertical
|
||||
{
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
-moz-writing-mode: vertical-rl;
|
||||
-o-writing-mode: vertical-rl;
|
||||
-ms-writing-mode: vertical-rl;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-text-orientation: sideways-left;
|
||||
-moz-text-orientation: sideways-left;
|
||||
-o-text-orientation: sideways-left;
|
||||
-ms-text-orientation: sideways-left;
|
||||
text-orientation: sideways-left;
|
||||
}
|
||||
|
||||
|
|
|
@ -28,15 +28,7 @@
|
|||
|
||||
div#vertical
|
||||
{
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
-moz-writing-mode: vertical-rl;
|
||||
-o-writing-mode: vertical-rl;
|
||||
-ms-writing-mode: vertical-rl;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-text-orientation: sideways-right;
|
||||
-moz-text-orientation: sideways-right;
|
||||
-o-text-orientation: sideways-right;
|
||||
-ms-text-orientation: sideways-right;
|
||||
text-orientation: sideways-right;
|
||||
}
|
||||
|
||||
|
|
|
@ -28,15 +28,7 @@
|
|||
|
||||
div#vertical
|
||||
{
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
-moz-writing-mode: vertical-rl;
|
||||
-o-writing-mode: vertical-rl;
|
||||
-ms-writing-mode: vertical-rl;
|
||||
writing-mode: vertical-rl;
|
||||
-webkit-text-orientation: upright;
|
||||
-moz-text-orientation: upright;
|
||||
-o-text-orientation: upright;
|
||||
-ms-text-orientation: mixed;
|
||||
text-orientation: upright;
|
||||
}
|
||||
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
<tbody id="s3">
|
||||
<tr><th><a href="chapter-3.xht">Chapter 3 -
|
||||
Introduction to Vertical Text</a></th>
|
||||
<td>(80 Tests)</td></tr>
|
||||
<td>(82 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s4">
|
||||
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
||||
|
@ -52,7 +52,7 @@
|
|||
<tbody id="s7">
|
||||
<tr><th><a href="chapter-7.xht">Chapter 7 -
|
||||
Abstract Box Layout</a></th>
|
||||
<td>(473 Tests)</td></tr>
|
||||
<td>(489 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s8">
|
||||
<tr><th><a href="chapter-8.xht">Chapter 8 -
|
||||
|
@ -62,7 +62,7 @@
|
|||
<tbody id="s9">
|
||||
<tr><th><a href="chapter-9.xht">Chapter 9 -
|
||||
Glyph Composition</a></th>
|
||||
<td>(25 Tests)</td></tr>
|
||||
<td>(27 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="sA">
|
||||
<tr><th><a href="chapter-A.xht">Appendix A -
|
||||
|
|
|
@ -1,39 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Writing Modes Test: vertical align - 'baseline' (alphabetical baseline with vertical layout)</title>
|
||||
<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="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 position of inline box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'top', the right edge of inline-box attaches the top of line-box." />
|
||||
<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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div#rl
|
||||
{
|
||||
border-right: 30px blue solid;
|
||||
color: white;
|
||||
font: 3.75em/1.5 Ahem; /* computes to 60px/90px */
|
||||
border-right: blue solid 2em;
|
||||
writing-mode: vertical-rl;
|
||||
font: 3.75em/3 Ahem; /* computes to 60px/180px */
|
||||
color: white;
|
||||
}
|
||||
|
||||
span#orange30
|
||||
span#orange
|
||||
{
|
||||
color: orange;
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
vertical-align: top;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the right edge of orange square attaches the left edge of blue square.</p>
|
||||
<p>Test passes if the right edge of an orange square touches the left edge of a blue square.</p>
|
||||
|
||||
<div id="rl">A<span id="orange30">O</span></div>
|
||||
<div id="rl">A<span id="orange">O</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<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="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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div#lr
|
||||
{
|
||||
border-right: blue solid 2em;
|
||||
writing-mode: vertical-lr;
|
||||
font: 3.75em/3 Ahem; /* computes to 60px/180px */
|
||||
color: white;
|
||||
}
|
||||
|
||||
span#orange
|
||||
{
|
||||
color: orange;
|
||||
vertical-align: top;
|
||||
line-height: 1;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the right edge of an orange square touches the left edge of a blue square.</p>
|
||||
|
||||
<div id="lr">A<span id="orange">O</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,11 +1,11 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Writing Modes Test: vertical align - 'baseline' (alphabetical baseline with vertical layout)</title>
|
||||
<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="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 position of inline box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-top', the right edge of inline-box aligned with the top of parent inline-box." />
|
||||
<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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<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="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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
div#lr
|
||||
{
|
||||
color: orange;
|
||||
font: 3.75em/1.5 Ahem; /* computes to 60px/90px */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
span#orange30
|
||||
{
|
||||
font-size: 0.5em; /* computes to 30px */
|
||||
vertical-align: text-top;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,11 +1,11 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Writing Modes Test: vertical align - 'baseline' (alphabetical baseline with vertical layout)</title>
|
||||
<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="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 position of inline box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-bottom', the left edge of inline-box aligned with the bottom of parent inline-box." />
|
||||
<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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue