Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 06:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision e102a993c37a2e0ebd549bc7d5548b006458ab34

Browse source
This commit is contained in:
Ms2ger 2015-11-23 13:14:18 +01:00
parent 037cac7353
commit a00f2d6310
479 changed files with 13629 additions and 1611 deletions
Download patch file Download diff file Expand all files Collapse all files

36
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-002.htm
View file

@ -14,9 +14,9 @@
<style type="text/css">
html
{
writing-mode: vertical-rl;
}
{
writing-mode: vertical-rl;
}
/*
"
The principal writing mode of the document is determined by the writing-mode
@ -25,22 +25,28 @@
*/
body
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.right-border { border-right: blue solid 1em; }
div.right-border
{
border-right: blue solid 1em;
}
div#left-border { border-left: blue solid 1em; }
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>

36
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-003.htm
View file

@ -14,9 +14,9 @@
<style type="text/css">
html
{
writing-mode: vertical-lr;
}
{
writing-mode: vertical-lr;
}
/*
"
The principal writing mode of the document is determined by the writing-mode
@ -25,22 +25,28 @@
*/
body
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.left-border { border-left: blue solid 1em; }
div.left-border
{
border-left: blue solid 1em;
}
div#right-border { border-right: blue solid 1em; }
div#right-border
{
border-right: blue solid 1em;
}
</style>
</head>

32
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-005.htm
View file

@ -14,23 +14,29 @@
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div#floated-left
{
background-color: blue;
border-top: blue solid 1em;
float: left;
height: 8em;
writing-mode: vertical-rl;
}
{
background-color: blue;
border-top: blue solid 1em;
float: left;
height: 8em;
writing-mode: vertical-rl;
}
div.right-border { border-right: blue solid 1em; }
div.right-border
{
border-right: blue solid 1em;
}
div#left-border { border-left: blue solid 1em; }
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>

29
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-006.htm
View file

@ -14,22 +14,25 @@
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div.floated-left
{
background-color: blue;
border-bottom: blue solid 1em;
border-left: blue solid 1em;
border-top: blue solid 1em;
float: left;
writing-mode: vertical-rl;
}
{
background-color: blue;
border-bottom: blue solid 1em;
border-left: blue solid 1em;
border-top: blue solid 1em;
float: left;
writing-mode: vertical-rl;
}
div#right-border { border-right: blue solid 1em; }
div#right-border
{
border-right: blue solid 1em;
}
</style>
</head>

32
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-007.htm
View file

@ -14,23 +14,29 @@
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div#floated-right
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
float: right;
writing-mode: vertical-lr;
}
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
float: right;
writing-mode: vertical-lr;
}
div.left-border { border-left: blue solid 1em; }
div.left-border
{
border-left: blue solid 1em;
}
div#right-border { border-right: blue solid 1em; }
div#right-border
{
border-right: blue solid 1em;
}
</style>
</head>

29
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-008.htm
View file

@ -14,22 +14,25 @@
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div.floated-right
{
background-color: blue;
border-bottom: blue solid 1em;
border-right: blue solid 1em;
border-top: blue solid 1em;
float: right;
writing-mode: vertical-lr;
}
{
background-color: blue;
border-bottom: blue solid 1em;
border-right: blue solid 1em;
border-top: blue solid 1em;
float: right;
writing-mode: vertical-lr;
}
div#left-border { border-left: blue solid 1em; }
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>

40
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-009.htm
View file

@ -14,29 +14,35 @@
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div#abs-pos
{
height: 9em;
left: auto;
position: absolute;
writing-mode: vertical-rl;
}
{
height: 9em;
left: auto;
position: absolute;
writing-mode: vertical-rl;
}
div#abs-pos > div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.right-border { border-right: blue solid 1em; }
div.right-border
{
border-right: blue solid 1em;
}
div#left-border { border-left: blue solid 1em; }
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>

40
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-010.htm
View file

@ -14,29 +14,35 @@
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div#abs-pos
{
height: 9em;
left: auto;
position: absolute;
writing-mode: vertical-lr;
}
{
height: 9em;
left: auto;
position: absolute;
writing-mode: vertical-lr;
}
div#abs-pos > div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.left-border { border-left: blue solid 1em; }
div.left-border
{
border-left: blue solid 1em;
}
div#right-border { border-right: blue solid 1em; }
div#right-border
{
border-right: blue solid 1em;
}
</style>
</head>

41
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-011.htm
View file

@ -10,36 +10,45 @@
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction." name="assert">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div#inline-block
{
background-color: blue;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
{
background-color: blue;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
/*
Why 'vertical-align: top' ?
See
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
for explanations
*/
writing-mode: vertical-rl;
}
writing-mode: vertical-rl;
}
span { display: block; }
span
{
display: block;
}
span.right-border { border-right: blue solid 1em; }
span.right-border
{
border-right: blue solid 1em;
}
span#left-border { border-left: blue solid 1em; }
span#left-border
{
border-left: blue solid 1em;
}
</style>
</head>

39
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-012.htm
View file

@ -10,38 +10,41 @@
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction." name="assert">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div#inline-block
{
background-color: blue;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
{
background-color: blue;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
/*
Why 'vertical-align: top' ?
See
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
for explanations
*/
writing-mode: vertical-rl;
}
writing-mode: vertical-rl;
}
span
{
border-right: blue solid 1em;
display: block;
}
{
border-right: blue solid 1em;
display: block;
}
span#left-border { border-left: blue solid 1em; }
span#left-border
{
border-left: blue solid 1em;
}
</style>
</head>

38
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-013.htm
View file

@ -10,35 +10,41 @@
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction." name="assert">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div.inline-block
{
background-color: blue;
border-right: blue solid 1em;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
{
background-color: blue;
border-right: blue solid 1em;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
/*
Why 'vertical-align: top' ?
See
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
for explanations
*/
writing-mode: vertical-rl;
}
writing-mode: vertical-rl;
}
span { display: block; }
span
{
display: block;
}
span#left-border { border-left: blue solid 1em; }
span#left-border
{
border-left: blue solid 1em;
}
</style>
</head>

41
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-014.htm
View file

@ -10,36 +10,45 @@
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction." name="assert">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div#inline-block
{
background-color: blue;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
{
background-color: blue;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
/*
Why 'vertical-align: top' ?
See
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
for explanations
*/
writing-mode: vertical-lr;
}
writing-mode: vertical-lr;
}
span { display: block; }
span
{
display: block;
}
span.left-border { border-left: blue solid 1em; }
span.left-border
{
border-left: blue solid 1em;
}
span#right-border { border-right: blue solid 1em; }
span#right-border
{
border-right: blue solid 1em;
}
</style>
</head>

39
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-015.htm
View file

@ -10,31 +10,34 @@
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction." name="assert">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div#inline-block
{
background-color: blue;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
writing-mode: vertical-lr;
}
{
background-color: blue;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
writing-mode: vertical-lr;
}
span
{
border-left: blue solid 1em;
display: block;
}
{
border-left: blue solid 1em;
display: block;
}
span#right-border { border-right: blue solid 1em; }
span#right-border
{
border-right: blue solid 1em;
}
</style>
</head>
@ -44,7 +47,7 @@
<div id="inline-block">
<!-- The "P" --> <span>AAAAAAA B&nbsp; C&nbsp;&nbsp; D&nbsp; E&nbsp;&nbsp; FFFF&nbsp;&nbsp;</span>
<!-- The "P" --> <span>AAAAAAA B&nbsp; C&nbsp;&nbsp; D&nbsp; E&nbsp;&nbsp; FFFF&nbsp;&nbsp;</span>
<!-- The "A" --> <span>GGGGGGG H&nbsp; J&nbsp;&nbsp; K&nbsp; L&nbsp;&nbsp; MMMMMMM</span>

38
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-016.htm
View file

@ -10,35 +10,41 @@
<link rel="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction." name="assert">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div.inline-block
{
background-color: blue;
border-left: blue solid 1em;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
{
background-color: blue;
border-left: blue solid 1em;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
/*
Why 'vertical-align: top' ?
See
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
for explanations
*/
writing-mode: vertical-lr;
}
writing-mode: vertical-lr;
}
span { display: block; }
span
{
display: block;
}
span#right-border { border-right: blue solid 1em; }
span#right-border
{
border-right: blue solid 1em;
}
</style>
</head>

42
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-017.htm
View file

@ -5,10 +5,6 @@
<title>CSS Writing Modes Test: table-cell and 'vertical-rl' - block flow direction of block-level boxes</title>
<!--
2015-05-31: Trying to reset test results for that test: hello Koji!
-->
<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="match" href="reference/block-flow-direction-001-ref.htm">
@ -18,28 +14,34 @@
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div#table-cell
{
display: table-cell;
height: 9em;
writing-mode: vertical-rl;
}
{
display: table-cell;
height: 9em;
writing-mode: vertical-rl;
}
div#table-cell > div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.right-border { border-right: blue solid 1em; }
div.right-border
{
border-right: blue solid 1em;
}
div#left-border { border-left: blue solid 1em; }
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>

38
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-018.htm
View file

@ -14,28 +14,34 @@
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div#table-cell
{
display: table-cell;
height: 9em;
writing-mode: vertical-lr;
}
{
display: table-cell;
height: 9em;
writing-mode: vertical-lr;
}
div#table-cell > div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.left-border { border-left: blue solid 1em; }
div.left-border
{
border-left: blue solid 1em;
}
div#right-border { border-right: blue solid 1em; }
div#right-border
{
border-right: blue solid 1em;
}
</style>
</head>

38
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-019.htm
View file

@ -14,28 +14,34 @@
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div#table-caption
{
display: table-caption;
height: 9em;
writing-mode: vertical-rl;
}
{
display: table-caption;
height: 9em;
writing-mode: vertical-rl;
}
div#table-caption > div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.right-border { border-right: blue solid 1em; }
div.right-border
{
border-right: blue solid 1em;
}
div#left-border { border-left: blue solid 1em; }
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>

38
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-020.htm
View file

@ -14,28 +14,34 @@
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
{
color: yellow;
font: 20px/1 Ahem;
}
div#table-caption
{
display: table-caption;
height: 9em;
writing-mode: vertical-lr;
}
{
display: table-caption;
height: 9em;
writing-mode: vertical-lr;
}
div#table-caption > div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.left-border { border-left: blue solid 1em; }
div.left-border
{
border-left: blue solid 1em;
}
div#right-border { border-right: blue solid 1em; }
div#right-border
{
border-right: blue solid 1em;
}
</style>
</head>

40
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-021.htm
View file

@ -14,9 +14,9 @@
<style type="text/css">
html
{
writing-mode: vertical-rl;
}
{
writing-mode: vertical-rl;
}
/*
"
The principal writing mode of the document is determined by the writing-mode
@ -25,24 +25,30 @@
*/
body
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
ul
{
background-color: blue;
border-bottom: blue solid 1em;
list-style: none outside url("support/blue1x1.png");
margin: 0em;
padding-top: 1em; /* overriding default padding-start: 40px in several browsers */
}
{
background-color: blue;
border-bottom: blue solid 1em;
list-style: none outside url("support/blue1x1.png");
margin: 0em;
padding-top: 1em; /* overriding default padding-start: 40px in several browsers */
}
ul.right-border { border-right: blue solid 1em; }
ul.right-border
{
border-right: blue solid 1em;
}
ul#left-border { border-left: blue solid 1em; }
ul#left-border
{
border-left: blue solid 1em;
}
</style>
</head>

40
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-022.htm
View file

@ -14,9 +14,9 @@
<style type="text/css">
html
{
writing-mode: vertical-lr;
}
{
writing-mode: vertical-lr;
}
/*
"
The principal writing mode of the document is determined by the writing-mode
@ -25,24 +25,30 @@
*/
body
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
ul
{
background-color: blue;
border-bottom: blue solid 1em;
list-style: none outside url("support/blue1x1.png");
margin: 0em;
padding-top: 1em; /* overriding default 40px in several browsers */
}
{
background-color: blue;
border-bottom: blue solid 1em;
list-style: none outside url("support/blue1x1.png");
margin: 0em;
padding-top: 1em; /* overriding default 40px in several browsers */
}
ul.left-border { border-left: blue solid 1em; }
ul.left-border
{
border-left: blue solid 1em;
}
ul#right-border { border-right: blue solid 1em; }
ul#right-border
{
border-right: blue solid 1em;
}
</style>
</head>

31
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-023.htm
View file

@ -18,9 +18,9 @@
<style type="text/css">
html
{
writing-mode: vertical-lr;
}
{
writing-mode: vertical-lr;
}
/*
"
The principal writing mode of the document is determined by the writing-mode
@ -29,20 +29,23 @@
*/
body
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
div
{
background-color: blue;
border: blue solid 1em;
border-right: blue none 0em;
}
{
background-color: blue;
border: blue solid 1em;
border-right: blue none 0em;
}
div#right-most { border-right: blue solid 1em; }
div#right-most
{
border-right: blue solid 1em;
}
</style>
</head>

33
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-024.htm
View file

@ -18,9 +18,9 @@
<style type="text/css">
html
{
writing-mode: vertical-rl;
}
{
writing-mode: vertical-rl;
}
/*
"
The principal writing mode of the document is determined by the writing-mode
@ -29,21 +29,24 @@
*/
body
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
div
{
background-color: blue;
border-bottom: blue solid 1em;
border-right: blue solid 1em;
border-top: blue solid 1em;
}
{
background-color: blue;
border-bottom: blue solid 1em;
border-right: blue solid 1em;
border-top: blue solid 1em;
}
div#left-border { border-left: blue solid 1em; }
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>

94
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-042.htm Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: sideways-rl - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-002-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one, then the 2nd block is juxtaposed at its left-hand side, then the 3rd block is juxtaposed at the 2nd block on its left-hand side, etc... " name="assert">
<style type="text/css">
html
{
writing-mode: sideways-rl;
}
/*
"
The principal writing mode of the document is determined by the writing-mode
and direction values specified on the root element.
"
*/
body
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.right-border
{
border-right: blue solid 1em;
}
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>
<body>
<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
</body>
</html>

94
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-043.htm Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: sideways-lr - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-043-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and, then the 2nd block is juxtaposed at the right-hand side of 1st block, then the 3rd block is juxtaposed at the 2nd block on its right-hand side, etc... " name="assert">
<style type="text/css">
html
{
writing-mode: sideways-lr;
}
/*
"
The principal writing mode of the document is determined by the writing-mode
and direction values specified on the root element.
"
*/
body
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.left-border
{
border-left: blue solid 1em;
}
div#right-border
{
border-right: blue solid 1em;
}
</style>
</head>
<body>
<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
<!-- The 2nd left-most line of "P" --> <div>&nbsp;&nbsp; B &nbsp;C</div>
<!-- The 3rd left-most line of "P" --> <div>&nbsp;&nbsp; D &nbsp;E</div>
<!-- The 4th left-most line of "P" --> <div>&nbsp;&nbsp; FFFF</div>
<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
<!-- The 2nd left-most line of "A" --> <div>&nbsp;&nbsp; H &nbsp;J</div>
<!-- The 3rd left-most line of "A" --> <div>&nbsp;&nbsp; K &nbsp;L</div>
<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
<!-- The 1st left-most line of left-most "S" --> <div class="left-border">N&nbsp; QQQQ</div>
<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
<!-- The 4th left-most line of left-most "S" --> <div>XXXX &nbsp;Y</div>
<!-- The left-most line of right-most "S" --> <div class="left-border">a&nbsp; bbbb</div>
<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj &nbsp;k</div>
</body>
</html>

88
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-045.htm Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: 'float: left' and 'sideways-rl' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that a left-floated box with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div#floated-left
{
background-color: blue;
border-top: blue solid 1em;
float: left;
height: 8em;
writing-mode: sideways-rl;
}
div.right-border
{
border-right: blue solid 1em;
}
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>
<body>
<div id="floated-left">
<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
</div>
</body>
</html>

90
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-046.htm Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: 'float: left' and 'sideways-rl' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that left-floated boxes with 'writing-mode' set to 'sideways-rl' establish block formating contexts with a right-to-left block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div.floated-left
{
background-color: blue;
border-bottom: blue solid 1em;
border-left: blue solid 1em;
border-top: blue solid 1em;
float: left;
writing-mode: sideways-rl;
}
div#right-border
{
border-right: blue solid 1em;
}
</style>
</head>
<body>
<div class="floated-left">
<!-- The right-most line of "P" --> <div>eeee&nbsp;&nbsp;</div>
<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp;</div>
<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp;</div>
<!-- The 4th right-most line of "P" --> <div>kkkkkkk</div>
</div>
<div class="floated-left">
<!-- The right-most line of "A" --> <div>YYYYYYY</div>
<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp;</div>
<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp;</div>
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
</div>
<div class="floated-left">
<!-- The right-most line of left-most "S" --> <div>L&nbsp; MMMM</div>
<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
</div>
<div class="floated-left" id="right-border">
<!-- The right-most line of right-most "S" --> <div>A&nbsp; BBBB</div>
<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
</div>
</body>
</html>

88
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-047.htm Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: 'float: right' and 'sideways-lr' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-002-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that a right-floated box with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div#floated-right
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
float: right;
writing-mode: sideways-lr;
}
div.left-border
{
border-left: blue solid 1em;
}
div#right-border
{
border-right: blue solid 1em;
}
</style>
</head>
<body>
<div id="floated-right">
<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
<!-- The 2nd left-most line of "P" --> <div>&nbsp;&nbsp; B &nbsp;C</div>
<!-- The 3rd left-most line of "P" --> <div>&nbsp;&nbsp; D &nbsp;E</div>
<!-- The 4th left-most line of "P" --> <div>&nbsp;&nbsp; FFFF</div>
<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
<!-- The 2nd left-most line of "A" --> <div>&nbsp;&nbsp; H &nbsp;J</div>
<!-- The 3rd left-most line of "A" --> <div>&nbsp;&nbsp; K &nbsp;L</div>
<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
<!-- The 1st left-most line of left-most "S" --> <div class="left-border">N&nbsp; QQQQ</div>
<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
<!-- The 4th left-most line of left-most "S" --> <div>XXXX &nbsp;Y</div>
<!-- The left-most line of right-most "S" --> <div class="left-border">a&nbsp; bbbb</div>
<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj &nbsp;k</div>
</div>
</body>
</html>

90
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-048.htm Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: 'float: right' and 'sideways-lr' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-002-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that right-floated boxes with 'writing-mode' set to 'sideways-lr' establish block formating contexts with a left-to-right block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div.floated-right
{
background-color: blue;
border-bottom: blue solid 1em;
border-right: blue solid 1em;
border-top: blue solid 1em;
float: right;
writing-mode: sideways-lr;
}
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>
<body>
<div class="floated-right">
<!-- The left-most line of right-most "S" --> <div>a &nbsp;bbbb</div>
<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
<!-- The 4th left-most line of right-most "S" --> <div>jjjj &nbsp;k</div>
</div>
<div class="floated-right">
<!-- The 1st left-most line of left-most "S" --> <div>N &nbsp;QQQQ</div>
<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
<!-- The 4th left-most line of left-most "S" --> <div>XXXX &nbsp;Y</div>
</div>
<div class="floated-right">
<!-- The left-most line of "A" --> <div>GGGGGGG</div>
<!-- The 2nd left-most line of "A" --> <div>&nbsp;&nbsp; H &nbsp;J</div>
<!-- The 3rd left-most line of "A" --> <div>&nbsp;&nbsp; K &nbsp;L</div>
<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
</div>
<div class="floated-right" id="left-border">
<!-- The 1st left-most line of "P" --> <div>AAAAAAA</div>
<!-- The 2nd left-most line of "P" --> <div>&nbsp;&nbsp; B &nbsp;C</div>
<!-- The 3rd left-most line of "P" --> <div>&nbsp;&nbsp; D &nbsp;E</div>
<!-- The 4th left-most line of "P" --> <div>&nbsp;&nbsp; FFFF</div>
</div>
</body>
</html>

94
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-049.htm Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: position absolute and 'sideways-rl' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an absolutely positioned box with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div#abs-pos
{
height: 9em;
left: auto;
position: absolute;
writing-mode: sideways-rl;
}
div#abs-pos > div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.right-border
{
border-right: blue solid 1em;
}
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>
<body>
<div id="abs-pos">
<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
</div>
</body>
</html>

94
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-050.htm Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: position absolute and 'sideways-lr' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an absolutely positioned box with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div#abs-pos
{
height: 9em;
left: auto;
position: absolute;
writing-mode: sideways-lr;
}
div#abs-pos > div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.left-border
{
border-left: blue solid 1em;
}
div#right-border
{
border-right: blue solid 1em;
}
</style>
</head>
<body>
<div id="abs-pos">
<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
<!-- The 2nd left-most line of "P" --> <div>&nbsp;&nbsp; B &nbsp;C</div>
<!-- The 3rd left-most line of "P" --> <div>&nbsp;&nbsp; D &nbsp;E</div>
<!-- The 4th left-most line of "P" --> <div>&nbsp;&nbsp; FFFF</div>
<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
<!-- The 2nd left-most line of "A" --> <div>&nbsp;&nbsp; H &nbsp;J</div>
<!-- The 3rd left-most line of "A" --> <div>&nbsp;&nbsp; K &nbsp;L</div>
<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
<!-- The 1st left-most line of left-most "S" --> <div class="left-border">N&nbsp; QQQQ</div>
<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
<!-- The 4th left-most line of left-most "S" --> <div>XXXX &nbsp;Y</div>
<!-- The left-most line of right-most "S" --> <div class="left-border">a&nbsp; bbbb</div>
<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj &nbsp;k</div>
</div>
</body>
</html>

104
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-051.htm Normal file
View file

@ -0,0 +1,104 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: inline-block and 'sideways-rl' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div#inline-block
{
background-color: blue;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
/*
Why 'vertical-align: top' ?
See
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
for explanations
*/
writing-mode: sideways-rl;
}
span
{
display: block;
}
span.right-border
{
border-right: blue solid 1em;
}
span#left-border
{
border-left: blue solid 1em;
}
</style>
</head>
<body>
<div>
<div id="inline-block">
<!-- The right-most line of right-most "S" --> <span class="right-border">A&nbsp; BBBB</span>
<!-- The 2nd right-most line of right-most "S" --> <span>C&nbsp; D&nbsp; E</span>
<!-- The 3rd right-most line of right-most "S" --> <span>F&nbsp; G&nbsp; H</span>
<!-- The 4th right-most line of right-most "S" --> <span>JJJJ&nbsp; K</span>
<!-- The right-most line of left-most "S" --> <span class="right-border">L&nbsp; MMMM</span>
<!-- The 2nd right-most line of left-most "S" --> <span>Q&nbsp; R&nbsp; S</span>
<!-- The 3rd right-most line of left-most "S" --> <span>T&nbsp; U&nbsp; V</span>
<!-- The 4th right-most line of left-most "S" --> <span>WWWW&nbsp; X</span>
<!-- The right-most line of "A" --> <span class="right-border">YYYYYYY</span>
<!-- The 2nd right-most line of "A" --> <span>Z&nbsp; a&nbsp;&nbsp; </span>
<!-- The 3rd right-most line of "A" --> <span>b&nbsp; c&nbsp;&nbsp; </span>
<!-- The 4th right-most line of "A" --> <span>ddddddd</span>
<!-- The right-most line of "P" --> <span class="right-border">eeee&nbsp;&nbsp; </span>
<!-- The 2nd right-most line of "P" --> <span>f&nbsp; g&nbsp;&nbsp; </span>
<!-- The 3rd right-most line of "P" --> <span>h&nbsp; j&nbsp;&nbsp; </span>
<!-- The 4th right-most line of "P" --> <span id="left-border">kkkkkkk</span>
</div>
</div>
</body>
</html>

70
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-052.htm Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: inline-block and 'sideways-rl' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div#inline-block
{
background-color: blue;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
/*
Why 'vertical-align: top' ?
See
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
for explanations
*/
writing-mode: sideways-rl;
}
span
{
border-right: blue solid 1em;
display: block;
}
span#left-border
{
border-left: blue solid 1em;
}
</style>
</head>
<body>
<div>
<div id="inline-block">
<!-- The right-most "S" --> <span>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K</span>
<!-- The left-most "S" --> <span>L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X</span>
<!-- The "A" --> <span>YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd</span>
<!-- The "P" --> <span id="left-border">eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</span>
</div>
</div>
</body>
</html>

100
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-053.htm Normal file
View file

@ -0,0 +1,100 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: inline-block and 'sideways-rl' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div.inline-block
{
background-color: blue;
border-right: blue solid 1em;
border-top: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
/*
Why 'vertical-align: top' ?
See
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
for explanations
*/
writing-mode: sideways-rl;
}
span
{
display: block;
}
span#left-border
{
border-left: blue solid 1em;
}
</style>
</head>
<body>
<div>
<div class="inline-block">
<!-- The right-most line of "P" --> <span>eeee&nbsp;&nbsp; </span>
<!-- The 2nd right-most line of "P" --> <span>f&nbsp; g&nbsp;&nbsp; </span>
<!-- The 3rd right-most line of "P" --> <span>h&nbsp; j&nbsp;&nbsp; </span>
<!-- The 4th right-most line of "P" --> <span id="left-border">kkkkkkk</span>
</div><div class="inline-block">
<!-- The right-most line of "A" --> <span>YYYYYYY</span>
<!-- The 2nd right-most line of "A" --> <span>Z&nbsp; a&nbsp;&nbsp; </span>
<!-- The 3rd right-most line of "A" --> <span>b&nbsp; c&nbsp;&nbsp; </span>
<!-- The 4th right-most line of "A" --> <span>ddddddd</span>
</div><div class="inline-block">
<!-- The right-most line of left-most "S" --> <span>L&nbsp; MMMM</span>
<!-- The 2nd right-most line of left-most "S" --> <span>Q&nbsp; R&nbsp; S</span>
<!-- The 3rd right-most line of left-most "S" --> <span>T&nbsp; U&nbsp; V</span>
<!-- The 4th right-most line of left-most "S" --> <span>WWWW&nbsp; X</span>
</div><div class="inline-block">
<!-- The right-most line of right-most "S" --> <span>A&nbsp; BBBB</span>
<!-- The 2nd right-most line of right-most "S" --> <span>C&nbsp; D&nbsp; E</span>
<!-- The 3rd right-most line of right-most "S" --> <span>F&nbsp; G&nbsp; H</span>
<!-- The 4th right-most line of right-most "S" --> <span>JJJJ&nbsp; K</span>
</div>
</div>
</body>
</html>

104
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-054.htm Normal file
View file

@ -0,0 +1,104 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: inline-block and 'sideways-lr' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div#inline-block
{
background-color: blue;
border-bottom: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
/*
Why 'vertical-align: top' ?
See
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
for explanations
*/
writing-mode: sideways-lr;
}
span
{
display: block;
}
span.left-border
{
border-left: blue solid 1em;
}
span#right-border
{
border-right: blue solid 1em;
}
</style>
</head>
<body>
<div>
<div id="inline-block">
<!-- The 1st left-most line of "P" --> <span class="left-border">AAAAAAA</span>
<!-- The 2nd left-most line of "P" --> <span>&nbsp;&nbsp; B &nbsp;C</span>
<!-- The 3rd left-most line of "P" --> <span>&nbsp;&nbsp; D &nbsp;E</span>
<!-- The 4th left-most line of "P" --> <span>&nbsp;&nbsp; FFFF</span>
<!-- The left-most line of "A" --> <span class="left-border">GGGGGGG</span>
<!-- The 2nd left-most line of "A" --> <span>&nbsp;&nbsp; H &nbsp;J</span>
<!-- The 3rd left-most line of "A" --> <span>&nbsp;&nbsp; K &nbsp;L</span>
<!-- The 4th left-most line of "A" --> <span>MMMMMMM</span>
<!-- The 1st left-most line of left-most "S" --> <span class="left-border">N&nbsp; QQQQ</span>
<!-- The 2nd left-most line of left-most "S" --> <span>R&nbsp; S&nbsp; T</span>
<!-- The 3rd left-most line of left-most "S" --> <span>U&nbsp; V&nbsp; W</span>
<!-- The 4th left-most line of left-most "S" --> <span>XXXX &nbsp;Y</span>
<!-- The left-most line of right-most "S" --> <span class="left-border">a&nbsp; bbbb</span>
<!-- The 2nd left-most line of right-most "S" --> <span>c&nbsp; d&nbsp; e</span>
<!-- The 3rd left-most line of right-most "S" --> <span>f&nbsp; g&nbsp; h</span>
<!-- The 4th left-most line of right-most "S" --> <span id="right-border">jjjj &nbsp;k</span>
</div>
</div>
</body>
</html>

63
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-055.htm Normal file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: inline-block and 'sideways-lr' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div#inline-block
{
background-color: blue;
border-bottom: blue solid 1em;
display: inline-block;
height: 8em;
writing-mode: sideways-lr;
}
span
{
border-left: blue solid 1em;
display: block;
}
span#right-border
{
border-right: blue solid 1em;
}
</style>
</head>
<body>
<div>
<div id="inline-block">
<!-- The "P" --> <span>AAAAAAA &nbsp;&nbsp; B &nbsp;C &nbsp;&nbsp; D &nbsp;E &nbsp;&nbsp; FFFF</span>
<!-- The "A" --> <span>GGGGGGG &nbsp;&nbsp; H &nbsp;J &nbsp;&nbsp; K &nbsp;L MMMMMMM</span>
<!-- The left-most "S" --> <span>N&nbsp; QQQQ R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W XXXX &nbsp;Y</span>
<!-- The right-most "S" --> <span id="right-border">a&nbsp; bbbb c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h jjjj &nbsp;k</span>
</div>
</div>
</body>
</html>

100
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-056.htm Normal file
View file

@ -0,0 +1,100 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: inline-block and 'sideways-lr' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that an inline-block with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div.inline-block
{
background-color: blue;
border-bottom: blue solid 1em;
border-left: blue solid 1em;
display: inline-block;
height: 8em;
vertical-align: top;
/*
Why 'vertical-align: top' ?
See
http://lists.w3.org/Archives/Public/public-css-testsuite/2014Dec/0013.html
for explanations
*/
writing-mode: sideways-lr;
}
span
{
display: block;
}
span#right-border
{
border-right: blue solid 1em;
}
</style>
</head>
<body>
<div>
<div class="inline-block">
<!-- The 1st left-most line of "P" --> <span>AAAAAAA</span>
<!-- The 2nd left-most line of "P" --> <span>&nbsp;&nbsp; B &nbsp;C</span>
<!-- The 3rd left-most line of "P" --> <span>&nbsp;&nbsp; D &nbsp;E</span>
<!-- The 4th left-most line of "P" --> <span>&nbsp;&nbsp; FFFF</span>
</div><div class="inline-block">
<!-- The left-most line of "A" --> <span>GGGGGGG</span>
<!-- The 2nd left-most line of "A" --> <span>&nbsp;&nbsp; H &nbsp;J</span>
<!-- The 3rd left-most line of "A" --> <span>&nbsp;&nbsp; K &nbsp;L</span>
<!-- The 4th left-most line of "A" --> <span>MMMMMMM</span>
</div><div class="inline-block">
<!-- The 1st left-most line of left-most "S" --> <span>N&nbsp; QQQQ</span>
<!-- The 2nd left-most line of left-most "S" --> <span>R&nbsp; S&nbsp; T</span>
<!-- The 3rd left-most line of left-most "S" --> <span>U&nbsp; V&nbsp; W</span>
<!-- The 4th left-most line of left-most "S" --> <span>XXXX &nbsp;Y</span>
</div><div class="inline-block">
<!-- The left-most line of right-most "S" --> <span>a&nbsp; bbbb</span>
<!-- The 2nd left-most line of right-most "S" --> <span>c&nbsp; d&nbsp; e</span>
<!-- The 3rd left-most line of right-most "S" --> <span>f&nbsp; g&nbsp; h</span>
<!-- The 4th left-most line of right-most "S" --> <span id="right-border">jjjj &nbsp;k</span>
</div>
</div>
</body>
</html>

93
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-057.htm Normal file
View file

@ -0,0 +1,93 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: table-cell and 'sideways-rl' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that a table-cell with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div#table-cell
{
display: table-cell;
height: 9em;
writing-mode: sideways-rl;
}
div#table-cell > div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.right-border
{
border-right: blue solid 1em;
}
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>
<body>
<div id="table-cell">
<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
</div>
</body>
</html>

92
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-058.htm Normal file
View file

@ -0,0 +1,92 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: table-cell and 'sideways-lr' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that a table-cell with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div#table-cell
{
display: table-cell;
height: 9em;
writing-mode: sideways-lr;
}
div#table-cell > div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.left-border
{
border-left: blue solid 1em;
}
div#right-border
{
border-right: blue solid 1em;
}
</style>
</head>
<body>
<div id="table-cell">
<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
<!-- The 2nd left-most line of "P" --> <div>&nbsp;&nbsp; B &nbsp;C</div>
<!-- The 3rd left-most line of "P" --> <div>&nbsp;&nbsp; D &nbsp;E</div>
<!-- The 4th left-most line of "P" --> <div>&nbsp;&nbsp; FFFF</div>
<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
<!-- The 2nd left-most line of "A" --> <div>&nbsp;&nbsp; H &nbsp;J</div>
<!-- The 3rd left-most line of "A" --> <div>&nbsp;&nbsp; K &nbsp;L</div>
<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
<!-- The 1st left-most line of left-most "S" --> <div class="left-border">N&nbsp; QQQQ</div>
<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
<!-- The 4th left-most line of left-most "S" --> <div>XXXX &nbsp;Y</div>
<!-- The left-most line of right-most "S" --> <div class="left-border">a&nbsp; bbbb</div>
<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj &nbsp;k</div>
</div>
</body>
</html>

93
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-059.htm Normal file
View file

@ -0,0 +1,93 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: table-caption and 'sideways-rl' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that a table-caption with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div#table-caption
{
display: table-caption;
height: 9em;
writing-mode: sideways-rl;
}
div#table-caption > div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.right-border
{
border-right: blue solid 1em;
}
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>
<body>
<div id="table-caption">
<!-- The right-most line of right-most "S" --> <div class="right-border">A&nbsp; BBBB</div>
<!-- The 2nd right-most line of right-most "S" --> <div>C&nbsp; D&nbsp; E</div>
<!-- The 3rd right-most line of right-most "S" --> <div>F&nbsp; G&nbsp; H</div>
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ&nbsp; K</div>
<!-- The right-most line of left-most "S" --> <div class="right-border">L&nbsp; MMMM</div>
<!-- The 2nd right-most line of left-most "S" --> <div>Q&nbsp; R&nbsp; S</div>
<!-- The 3rd right-most line of left-most "S" --> <div>T&nbsp; U&nbsp; V</div>
<!-- The 4th right-most line of left-most "S" --> <div>WWWW&nbsp; X</div>
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
<!-- The 2nd right-most line of "A" --> <div>Z&nbsp; a&nbsp;&nbsp; </div>
<!-- The 3rd right-most line of "A" --> <div>b&nbsp; c&nbsp;&nbsp; </div>
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
<!-- The right-most line of "P" --> <div class="right-border">eeee&nbsp;&nbsp; </div>
<!-- The 2nd right-most line of "P" --> <div>f&nbsp; g&nbsp;&nbsp; </div>
<!-- The 3rd right-most line of "P" --> <div>h&nbsp; j&nbsp;&nbsp; </div>
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
</div>
</body>
</html>

92
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-060.htm Normal file
View file

@ -0,0 +1,92 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: table-caption and 'sideways-lr' - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-001-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that a table-caption with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction." name="assert">
<style type="text/css">
body
{
color: yellow;
font: 20px/1 Ahem;
}
div#table-caption
{
display: table-caption;
height: 9em;
writing-mode: sideways-lr;
}
div#table-caption > div
{
background-color: blue;
border-bottom: blue solid 1em;
border-top: blue solid 1em;
}
div.left-border
{
border-left: blue solid 1em;
}
div#right-border
{
border-right: blue solid 1em;
}
</style>
</head>
<body>
<div id="table-caption">
<!-- The 1st left-most line of "P" --> <div class="left-border">AAAAAAA</div>
<!-- The 2nd left-most line of "P" --> <div>&nbsp;&nbsp; B &nbsp;C</div>
<!-- The 3rd left-most line of "P" --> <div>&nbsp;&nbsp; D &nbsp;E</div>
<!-- The 4th left-most line of "P" --> <div>&nbsp;&nbsp; FFFF</div>
<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
<!-- The 2nd left-most line of "A" --> <div>&nbsp;&nbsp; H &nbsp;J</div>
<!-- The 3rd left-most line of "A" --> <div>&nbsp;&nbsp; K &nbsp;L</div>
<!-- The 4th left-most line of "A" --> <div>MMMMMMM</div>
<!-- The 1st left-most line of left-most "S" --> <div class="left-border">N&nbsp; QQQQ</div>
<!-- The 2nd left-most line of left-most "S" --> <div>R&nbsp; S&nbsp; T</div>
<!-- The 3rd left-most line of left-most "S" --> <div>U&nbsp; V&nbsp; W</div>
<!-- The 4th left-most line of left-most "S" --> <div>XXXX &nbsp;Y</div>
<!-- The left-most line of right-most "S" --> <div class="left-border">a&nbsp; bbbb</div>
<!-- The 2nd left-most line of right-most "S" --> <div>c&nbsp; d&nbsp; e</div>
<!-- The 3rd left-most line of right-most "S" --> <div>f&nbsp; g&nbsp; h</div>
<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj &nbsp;k</div>
</div>
</body>
</html>

96
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-061.htm Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: list and sideways-rl - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-002-ref.htm">
<meta content="ahem image" name="flags">
<meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one and then the 2nd block is juxtaposed to its left-hand side, the 3rd block is juxtaposed to the 2nd block on its left-hand side, etc... " name="assert">
<style type="text/css">
html
{
writing-mode: sideways-rl;
}
/*
"
The principal writing mode of the document is determined by the writing-mode
and direction values specified on the root element.
"
*/
body
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
ul
{
background-color: blue;
border-bottom: blue solid 1em;
list-style: none outside url("support/blue1x1.png");
margin: 0em;
padding-top: 1em; /* overriding default padding-start: 40px in several browsers */
}
ul.right-border
{
border-right: blue solid 1em;
}
ul#left-border
{
border-left: blue solid 1em;
}
</style>
</head>
<body>
<!-- The right-most line of right-most "S" --> <ul class="right-border"><li>A&nbsp; BBBB</li></ul>
<!-- The 2nd right-most line of right-most "S" --> <ul><li>C&nbsp; D&nbsp; E</li></ul>
<!-- The 3rd right-most line of right-most "S" --> <ul><li>F&nbsp; G&nbsp; H</li></ul>
<!-- The 4th right-most line of right-most "S" --> <ul><li>JJJJ&nbsp; K</li></ul>
<!-- The right-most line of left-most "S" --> <ul class="right-border"><li>L&nbsp; MMMM</li></ul>
<!-- The 2nd right-most line of left-most "S" --> <ul><li>Q&nbsp; R&nbsp; S</li></ul>
<!-- The 3rd right-most line of left-most "S" --> <ul><li>T&nbsp; U&nbsp; V</li></ul>
<!-- The 4th right-most line of left-most "S" --> <ul><li>WWWW&nbsp; X</li></ul>
<!-- The right-most line of "A" --> <ul class="right-border"><li>YYYYYYY</li></ul>
<!-- The 2nd right-most line of "A" --> <ul><li>Z&nbsp; a&nbsp;&nbsp; </li></ul>
<!-- The 3rd right-most line of "A" --> <ul><li>b&nbsp; c&nbsp;&nbsp; </li></ul>
<!-- The 4th right-most line of "A" --> <ul><li>ddddddd</li></ul>
<!-- The right-most line of "P" --> <ul class="right-border"><li>eeee&nbsp;&nbsp; </li></ul>
<!-- The 2nd right-most line of "P" --> <ul><li>f&nbsp; g&nbsp;&nbsp; </li></ul>
<!-- The 3rd right-most line of "P" --> <ul><li>h&nbsp; j&nbsp;&nbsp; </li></ul>
<!-- The 4th right-most line of "P" --> <ul id="left-border"><li>kkkkkkk</li></ul>
</body>
</html>

96
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-062.htm Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: list and sideways-lr - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-043-ref.htm">
<meta content="ahem image" name="flags">
<meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and then the 2nd block is juxtaposed to the right-hand side of 1st block, the 3rd block is juxtaposed to the 2nd block on its right-hand side, etc... " name="assert">
<style type="text/css">
html
{
writing-mode: sideways-lr;
}
/*
"
The principal writing mode of the document is determined by the writing-mode
and direction values specified on the root element.
"
*/
body
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
ul
{
background-color: blue;
border-top: blue solid 1em;
list-style: none outside url("support/blue1x1.png");
margin: 0em;
padding-bottom: 1em; /* overriding default 40px in several browsers */
}
ul.left-border
{
border-left: blue solid 1em;
}
ul#right-border
{
border-right: blue solid 1em;
}
</style>
</head>
<body>
<!-- The 1st left-most line of "P" --> <ul class="left-border"><li>AAAAAAA</li></ul>
<!-- The 2nd left-most line of "P" --> <ul><li>&nbsp;&nbsp; B &nbsp;C</li></ul>
<!-- The 3rd left-most line of "P" --> <ul><li>&nbsp;&nbsp; D &nbsp;E</li></ul>
<!-- The 4th left-most line of "P" --> <ul><li>&nbsp;&nbsp; FFFF</li></ul>
<!-- The left-most line of "A" --> <ul class="left-border"><li>GGGGGGG</li></ul>
<!-- The 2nd left-most line of "A" --> <ul><li>&nbsp;&nbsp; H &nbsp;J</li></ul>
<!-- The 3rd left-most line of "A" --> <ul><li>&nbsp;&nbsp; K &nbsp;L</li></ul>
<!-- The 4th left-most line of "A" --> <ul><li>MMMMMMM</li></ul>
<!-- The 1st left-most line of left-most "S" --> <ul class="left-border"><li>N&nbsp; QQQQ</li></ul>
<!-- The 2nd left-most line of left-most "S" --> <ul><li>R&nbsp; S&nbsp; T</li></ul>
<!-- The 3rd left-most line of left-most "S" --> <ul><li>U&nbsp; V&nbsp; W</li></ul>
<!-- The 4th left-most line of left-most "S" --> <ul><li>XXXX &nbsp;Y</li></ul>
<!-- The left-most line of right-most "S" --> <ul class="left-border"><li>a&nbsp; bbbb</li></ul>
<!-- The 2nd left-most line of right-most "S" --> <ul><li>c&nbsp; d&nbsp; e</li></ul>
<!-- The 3rd left-most line of right-most "S" --> <ul><li>f&nbsp; g&nbsp; h</li></ul>
<!-- The 4th left-most line of right-most "S" --> <ul id="right-border"><li>jjjj &nbsp;k</li></ul>
</body>
</html>

63
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-063.htm Normal file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: sideways-lr - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-043-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and, then the 2nd block is juxtaposed at the right-hand side of 1st block, then the 3rd block is juxtaposed at the 2nd block on its right-hand side, etc... " name="assert">
<!--
This test is a variation of block-flow-direction-003 test.
-->
<style type="text/css">
html
{
writing-mode: sideways-lr;
}
/*
"
The principal writing mode of the document is determined by the writing-mode
and direction values specified on the root element.
"
*/
body
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
div
{
background-color: blue;
border: blue solid 1em;
border-right: blue none 0em;
}
div#right-most
{
border-right: blue solid 1em;
}
</style>
</head>
<body>
<!-- The "P" --> <div>AAAAAAA &nbsp;&nbsp; B &nbsp;C &nbsp;&nbsp; D &nbsp;E &nbsp;&nbsp; FFFF</div>
<!-- The "A" --> <div>GGGGGGG &nbsp;&nbsp; H &nbsp;J &nbsp;&nbsp; K &nbsp;L MMMMMMM</div>
<!-- The left-most "S" --> <div>N&nbsp; QQQQ R&nbsp; S&nbsp; T U&nbsp; V&nbsp; W XXXX &nbsp;Y</div>
<!-- The right-most "S" --> <div id="right-most">a&nbsp; bbbb c&nbsp; d&nbsp; e f&nbsp; g&nbsp; h jjjj &nbsp;k</div>
</body>
</html>

64
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-064.htm Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: sideways-rl - block flow direction of block-level boxes</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="match" href="reference/block-flow-direction-002-ref.htm">
<meta content="ahem" name="flags">
<meta content="This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one, then the 2nd block is juxtaposed at its left-hand side, then the 3rd block is juxtaposed at the 2nd block on its left-hand side, etc... " name="assert">
<!--
This test is a variation of block-flow-direction-002 test.
-->
<style type="text/css">
html
{
writing-mode: sideways-rl;
}
/*
"
The principal writing mode of the document is determined by the writing-mode
and direction values specified on the root element.
"
*/
body
{
color: yellow;
font: 20px/1 Ahem;
height: 9em;
}
div
{
background-color: blue;
border-bottom: blue solid 1em;
border-right: blue solid 1em;
border-top: blue solid 1em;
}
div#left-border
{
border-left: blue solid 1em;
}
</style>
</head>
<body>
<!-- The right-most "S" --> <div>A&nbsp; BBBB C&nbsp; D&nbsp; E F&nbsp; G&nbsp; H JJJJ&nbsp; K</div>
<!-- The left-most "S" --> <div>L&nbsp; MMMM Q&nbsp; R&nbsp; S T&nbsp; U&nbsp; V WWWW&nbsp; X</div>
<!-- The "A" --> <div>YYYYYYY Z&nbsp; a&nbsp;&nbsp; b&nbsp; c&nbsp;&nbsp; ddddddd</div>
<!-- The "P" --> <div id="left-border">eeee&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp; h&nbsp; j&nbsp;&nbsp; kkkkkkk</div>
</body>
</html>

38
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-065.htm Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: writing mode (sideways-rl) of document - horizontal position of first block</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/2011/REC-CSS2-20110607/visuren.html#block-formatting" title="9.4.1 Block formatting contexts">
<link rel="match" href="reference/block-flow-direction-025-ref.htm">
<meta content="image" name="flags">
<meta content="This test checks that, when 'writing-mode' value of the root element is set to 'sideways-rl', then its block boxes are laid out leftwardedly (from right to left) one after the other beginning at its righthand side. Also, the inline flow direction is 'bottomwardedly', that is inline boxes in the line box flow from the top toward the bottom; inline boxes are laid out vertically, one after the other, starting at the physical top side of its containing block." name="assert">
<style type="text/css">
html
{
writing-mode: sideways-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled"></p>
</body>
</html>

44
tests/wpt/css-tests/css-writing-modes-3_dev/html/block-flow-direction-066.htm Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: writing mode (sideways-lr) of document - horizontal position of first block</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/2011/REC-CSS2-20110607/visuren.html#block-formatting" title="9.4.1 Block formatting contexts">
<link rel="match" href="reference/block-flow-direction-066-ref.htm">
<meta content="image" name="flags">
<meta content="This test checks that, when 'writing-mode' value of the root element is set to 'sideways-lr', then its block boxes are laid out rightwardedly (from left to right) one after the other beginning at its lefthand side. Also, the inline flow direction is 'topwardedly', that is inline boxes in the line box flow from the bottom toward the top; inline boxes are laid out vertically, one after the other, starting at the physical bottom side of its containing block." name="assert">
<style type="text/css">
html
{
writing-mode: sideways-lr;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<p><img src="support/block-flow-direction-066-exp-res.png" width="358" height="36" alt="Image download support must be enabled"></p>
<!--
The image says:
Test passes if there is a blue square in the
<strong>bottom-left corner</strong> of the page.
-->
</body>
</html>

268
tests/wpt/css-tests/css-writing-modes-3_dev/html/chapter-3.htm
View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
<h2>Introduction to Vertical Text (89 tests)</h2>
<h2>Introduction to Vertical Text (113 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -40,7 +40,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.1">+</a>
<a href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode">3.1 Block Flow Direction: the writing-mode property</a></th></tr>
<!-- 74 tests -->
<!-- 98 tests -->
<tr id="block-flow-direction-001-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-001.htm">block-flow-direction-001</a></strong></td>
@ -316,6 +316,270 @@
</ul>
</td>
</tr>
<tr id="block-flow-direction-042-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-042.htm">block-flow-direction-042</a></strong></td>
<td><a href="reference/block-flow-direction-002-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>sideways-rl - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one, then the 2nd block is juxtaposed at its left-hand side, then the 3rd block is juxtaposed at the 2nd block on its left-hand side, etc...</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-043-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-043.htm">block-flow-direction-043</a></strong></td>
<td><a href="reference/block-flow-direction-043-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>sideways-lr - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and, then the 2nd block is juxtaposed at the right-hand side of 1st block, then the 3rd block is juxtaposed at the 2nd block on its right-hand side, etc...</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-045-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-045.htm">block-flow-direction-045</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'float: left' and 'sideways-rl' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that a left-floated box with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-046-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-046.htm">block-flow-direction-046</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'float: left' and 'sideways-rl' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that left-floated boxes with 'writing-mode' set to 'sideways-rl' establish block formating contexts with a right-to-left block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-047-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-047.htm">block-flow-direction-047</a></strong></td>
<td><a href="reference/block-flow-direction-002-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'float: right' and 'sideways-lr' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that a right-floated box with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-048-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-048.htm">block-flow-direction-048</a></strong></td>
<td><a href="reference/block-flow-direction-002-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'float: right' and 'sideways-lr' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that right-floated boxes with 'writing-mode' set to 'sideways-lr' establish block formating contexts with a left-to-right block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-049-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-049.htm">block-flow-direction-049</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>position absolute and 'sideways-rl' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that an absolutely positioned box with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-050-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-050.htm">block-flow-direction-050</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>position absolute and 'sideways-lr' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that an absolutely positioned box with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-051-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-051.htm">block-flow-direction-051</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>inline-block and 'sideways-rl' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that an inline-block with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-052-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-052.htm">block-flow-direction-052</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>inline-block and 'sideways-rl' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that an inline-block with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-053-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-053.htm">block-flow-direction-053</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>inline-block and 'sideways-rl' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that an inline-block with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-054-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-054.htm">block-flow-direction-054</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>inline-block and 'sideways-lr' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that an inline-block with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-055-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-055.htm">block-flow-direction-055</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>inline-block and 'sideways-lr' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that an inline-block with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-056-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-056.htm">block-flow-direction-056</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>inline-block and 'sideways-lr' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that an inline-block with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-057-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-057.htm">block-flow-direction-057</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>table-cell and 'sideways-rl' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that a table-cell with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-058-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-058.htm">block-flow-direction-058</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>table-cell and 'sideways-lr' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that a table-cell with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-059-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-059.htm">block-flow-direction-059</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>table-caption and 'sideways-rl' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that a table-caption with its 'writing-mode' set to 'sideways-rl' establishes a block formating context with a right-to-left block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-060-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-060.htm">block-flow-direction-060</a></strong></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>table-caption and 'sideways-lr' - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that a table-caption with its 'writing-mode' set to 'sideways-lr' establishes a block formating context with a left-to-right block flow direction.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-061-3.1" class="primary ahem image">
<td><strong>
<a href="block-flow-direction-061.htm">block-flow-direction-061</a></strong></td>
<td><a href="reference/block-flow-direction-002-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>list and sideways-rl - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one and then the 2nd block is juxtaposed to its left-hand side, the 3rd block is juxtaposed to the 2nd block on its left-hand side, etc...</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-062-3.1" class="primary ahem image">
<td><strong>
<a href="block-flow-direction-062.htm">block-flow-direction-062</a></strong></td>
<td><a href="reference/block-flow-direction-043-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>list and sideways-lr - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and then the 2nd block is juxtaposed to the right-hand side of 1st block, the 3rd block is juxtaposed to the 2nd block on its right-hand side, etc...</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-063-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-063.htm">block-flow-direction-063</a></strong></td>
<td><a href="reference/block-flow-direction-043-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>sideways-lr - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and, then the 2nd block is juxtaposed at the right-hand side of 1st block, then the 3rd block is juxtaposed at the 2nd block on its right-hand side, etc...</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-064-3.1" class="primary ahem">
<td><strong>
<a href="block-flow-direction-064.htm">block-flow-direction-064</a></strong></td>
<td><a href="reference/block-flow-direction-002-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>sideways-rl - block flow direction of block-level boxes
<ul class="assert">
<li>This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'sideways-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one, then the 2nd block is juxtaposed at its left-hand side, then the 3rd block is juxtaposed at the 2nd block on its left-hand side, etc...</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-065-3.1" class="primary image">
<td><strong>
<a href="block-flow-direction-065.htm">block-flow-direction-065</a></strong></td>
<td><a href="reference/block-flow-direction-025-ref.htm">=</a> </td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>writing mode (sideways-rl) of document - horizontal position of first block
<ul class="assert">
<li>This test checks that, when 'writing-mode' value of the root element is set to 'sideways-rl', then its block boxes are laid out leftwardedly (from right to left) one after the other beginning at its righthand side. Also, the inline flow direction is 'bottomwardedly', that is inline boxes in the line box flow from the top toward the bottom; inline boxes are laid out vertically, one after the other, starting at the physical top side of its containing block.</li>
</ul>
</td>
</tr>
<tr id="block-flow-direction-066-3.1" class="primary image">
<td><strong>
<a href="block-flow-direction-066.htm">block-flow-direction-066</a></strong></td>
<td><a href="reference/block-flow-direction-066-ref.htm">=</a> </td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>writing mode (sideways-lr) of document - horizontal position of first block
<ul class="assert">
<li>This test checks that, when 'writing-mode' value of the root element is set to 'sideways-lr', then its block boxes are laid out rightwardedly (from left to right) one after the other beginning at its lefthand side. Also, the inline flow direction is 'topwardedly', that is inline boxes in the line box flow from the bottom toward the top; inline boxes are laid out vertically, one after the other, starting at the physical bottom side of its containing block.</li>
</ul>
</td>
</tr>
<tr id="different-block-flow-dir-001-3.1" class="primary">
<td><strong>
<a href="different-block-flow-dir-001.htm">different-block-flow-dir-001</a></strong></td>

28
tests/wpt/css-tests/css-writing-modes-3_dev/html/chapter-7.htm
View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Writing Modes Module Level 3 CR Test Suite</h1>
<h2>Abstract Box Layout (519 tests)</h2>
<h2>Abstract Box Layout (522 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -37,7 +37,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.1">+</a>
<a href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout">7.1 Principles of Layout in Vertical Writing Modes</a></th></tr>
<!-- 355 tests -->
<!-- 358 tests -->
<tr id="abs-pos-non-replaced-icb-vlr-003-7.1" class="primary">
<td><strong>
<a href="abs-pos-non-replaced-icb-vlr-003.htm">abs-pos-non-replaced-icb-vlr-003</a></strong></td>
@ -3623,6 +3623,14 @@
</ul>
</td>
</tr>
<tr id="outline-inline-block-vrl-006-7.1" class="primary ahem">
<td><strong>
<a href="outline-inline-block-vrl-006.htm">outline-inline-block-vrl-006</a></strong></td>
<td><a href="reference/outline-inline-block-vrl-006.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>outline layout and inline-block and vertical-rl writing-mode
</td>
</tr>
<tr id="outline-inline-slr-005-7.1" class="primary">
<td><strong>
<a href="outline-inline-slr-005.htm">outline-inline-slr-005</a></strong></td>
@ -3647,6 +3655,14 @@
<td>outline layout and non-replaced inline in vertical-lr writing-mode
</td>
</tr>
<tr id="outline-inline-vlr-006-7.1" class="primary ahem">
<td><strong>
<a href="outline-inline-vlr-006.htm">outline-inline-vlr-006</a></strong></td>
<td><a href="reference/outline-inline-vlr-006.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>outline layout and non-replaced inline and vertical-lr writing-mode
</td>
</tr>
<tr id="outline-inline-vrl-002-7.1" class="primary">
<td><strong>
<a href="outline-inline-vrl-002.htm">outline-inline-vrl-002</a></strong></td>
@ -3655,6 +3671,14 @@
<td>outline layout and non-replaced inline and vertical-rl writing-mode
</td>
</tr>
<tr id="outline-inline-vrl-006-7.1" class="primary ahem">
<td><strong>
<a href="outline-inline-vrl-006.htm">outline-inline-vrl-006</a></strong></td>
<td><a href="reference/outline-inline-vrl-006.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>outline layout and non-replaced inline and vertical-rl writing-mode
</td>
</tr>
<tr id="padding-vlr-005-7.1" class="primary image">
<td><strong>
<a href="padding-vlr-005.htm">padding-vlr-005</a></strong></td>

33
tests/wpt/css-tests/css-writing-modes-3_dev/html/outline-inline-block-vrl-006.htm Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html><head><title>CSS Writing Modes Test: outline layout and inline-block and vertical-rl writing-mode</title>
<link href="reference/outline-inline-block-vrl-006.htm" rel="match">
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii">
<link href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" rel="help" title="7.1. Principles of Layout in Vertical Writing Modes">
<link href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" rel="help" title="18.4 Dynamic outlines: the 'outline' property">
<meta content="ahem" name="flags">
<style>
.container {
color:transparent;
font:50px/1 Ahem;
height:6em;
writing-mode:vertical-rl;
}
.outline {
color:orange;
display:inline-block;
outline:blue solid 2px;
}
</style>
</head><body><p>Test passes if inside of blue rectangles are orange.
</p><div class="container">
<!--
Additional div to ensure that the origin of the containing block of the
outline span is different from the origin of the writing mode root.
-->
<div>123<span class="outline">XXX</span></div>
<div>12345 6<span class="outline">XX</span></div>
<div>1</div>
<div><span class="outline">1</span></div>
<div>1</div>
</div>
</body></html>

25
tests/wpt/css-tests/css-writing-modes-3_dev/html/outline-inline-vlr-006.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html><head><title>CSS Writing Modes Test: outline layout and non-replaced inline and vertical-lr writing-mode</title>
<link href="reference/outline-inline-vlr-006.htm" rel="match">
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii">
<link href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" rel="help" title="7.1. Principles of Layout in Vertical Writing Modes">
<link href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" rel="help" title="18.4 Dynamic outlines: the 'outline' property">
<meta content="ahem" name="flags">
<style>
div {
color:transparent;
font:50px/1 Ahem;
width:2em;
height:5em;
}
.vlr {
writing-mode:vertical-lr;
}
.outline {
color:orange;
outline:blue solid 2px;
}
</style>
</head><body><p>Test passes if inside of blue rectangles are orange.
</p><div class="vlr">1234<span class="outline">5 6</span>7890</div>
</body></html>

32
tests/wpt/css-tests/css-writing-modes-3_dev/html/outline-inline-vrl-006.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head><title>CSS Writing Modes Test: outline layout and non-replaced inline and vertical-rl writing-mode</title>
<link href="reference/outline-inline-vrl-006.htm" rel="match">
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii">
<link href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" rel="help" title="7.1. Principles of Layout in Vertical Writing Modes">
<link href="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" rel="help" title="18.4 Dynamic outlines: the 'outline' property">
<meta content="ahem" name="flags">
<style>
.container {
color:transparent;
font:50px/1 Ahem;
height:5em;
writing-mode:vertical-rl;
}
.outline {
color:orange;
outline:blue solid 2px;
}
</style>
</head><body><p>Test passes if inside of blue rectangles are orange.
</p><div class="container">
<!--
Additional div to ensure that the origin of the containing block of the
outline span is different from the origin of the writing mode root.
-->
<div>1</div>
<div>1234<span class="outline">5 6</span>7890</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
</body></html>

49
tests/wpt/css-tests/css-writing-modes-3_dev/html/reference/block-flow-direction-043-ref.htm Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-11-22 -->
<!-- This reference file is the bottom-left-corner version of
block-flow-direction-001-ref.xht
-->
<meta name="flags" content="image">
<style type="text/css">
div
{
background-color: yellow;
bottom: 8px;
font: 20px/1 Ahem;
left: 8px;
position: absolute;
width: 21em;
}
img
{
vertical-align: top;
}
</style>
</head>
<body>
<div><img src="support/blue20x20.png" width="420" height="20" alt="Image download support must be enabled">
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled">
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled">
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
<img src="support/blue20x20.png" width="420" height="20" alt="Image download support must be enabled">
</div>
</body>
</html>

43
tests/wpt/css-tests/css-writing-modes-3_dev/html/reference/block-flow-direction-066-ref.htm Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<meta content="image" name="flags">
<style type="text/css">
p
{
bottom: 8px;
margin-bottom: 0px;
position: absolute;
}
img
{
vertical-align: bottom;
}
img + img
{
padding-left: 16px;
}
</style>
</head>
<body>
<p><img src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"><img src="support/block-flow-direction-066-exp-res.png" width="358" height="36" alt="Image download support must be enabled"></p>
<!--
The image says:
Test passes if there is a blue square in the
<strong>bottom-left corner</strong> of the page.
-->
</body>
</html>

22
tests/wpt/css-tests/css-writing-modes-3_dev/html/reference/outline-inline-block-vrl-006.htm Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html><head><title>CSS Writing Modes Test: outline layout and non-replaced inline and vertical-rl writing-mode</title>
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii">
<meta content="ahem" name="flags">
<style>
.container {
color:transparent;
font:50px/1 Ahem;
}
.outline {
color:orange;
display:inline-block;
outline:blue solid 2px;
}
</style>
</head><body><p>Test passes if inside of blue rectangles are orange.
</p><div class="container">
<span style="margin-left:1em" class="outline">1</span><br>
<span style="margin-left:3em" class="outline">1<br>2</span><br>
<span style="margin-left:5em" class="outline">1<br>2<br>X</span>
</div>
</body></html>

19
tests/wpt/css-tests/css-writing-modes-3_dev/html/reference/outline-inline-vlr-006.htm Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html><head><title>CSS Writing Modes Test: outline layout and non-replaced inline and vertical-lr writing-mode</title>
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii">
<meta content="ahem" name="flags">
<style>
div {
color:transparent;
font:50px/1 Ahem;
width:2em;
height:5em;
}
.outline {
color:orange;
outline:blue solid 2px;
}
</style>
</head><body><p>Test passes if inside of blue rectangles are orange.
</p><div>1<span class="outline">2</span> 34 56 78 <span class="outline">9</span>0</div>
</body></html>

23
tests/wpt/css-tests/css-writing-modes-3_dev/html/reference/outline-inline-vrl-006.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html><head><title>CSS Writing Modes Test: outline layout and non-replaced inline and vertical-rl writing-mode</title>
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii">
<meta content="ahem" name="flags">
<style>
.container {
color:transparent;
font:50px/1 Ahem;
}
.outline {
color:orange;
outline:blue solid 2px;
}
</style>
</head><body><p>Test passes if inside of blue rectangles are orange.
</p><div class="container">
<div>111<span class="outline">1</span></div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1111<span class="outline">1</span></div>
</div>
</body></html>

BIN
tests/wpt/css-tests/css-writing-modes-3_dev/html/reference/support/block-flow-direction-066-exp-res.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

216
tests/wpt/css-tests/css-writing-modes-3_dev/html/reftest-toc.htm
View file

@ -3248,6 +3248,198 @@
<td rowspan="1"><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-042" class="ahem">
<tr>
<td rowspan="1" title="sideways-rl - block flow direction of block-level boxes">
<a href="block-flow-direction-042.htm">block-flow-direction-042</a></td>
<td><a href="reference/block-flow-direction-002-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-043" class="ahem">
<tr>
<td rowspan="1" title="sideways-lr - block flow direction of block-level boxes">
<a href="block-flow-direction-043.htm">block-flow-direction-043</a></td>
<td><a href="reference/block-flow-direction-043-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-045" class="ahem">
<tr>
<td rowspan="1" title="'float: left' and 'sideways-rl' - block flow direction of block-level boxes">
<a href="block-flow-direction-045.htm">block-flow-direction-045</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-046" class="ahem">
<tr>
<td rowspan="1" title="'float: left' and 'sideways-rl' - block flow direction of block-level boxes">
<a href="block-flow-direction-046.htm">block-flow-direction-046</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-047" class="ahem">
<tr>
<td rowspan="1" title="'float: right' and 'sideways-lr' - block flow direction of block-level boxes">
<a href="block-flow-direction-047.htm">block-flow-direction-047</a></td>
<td><a href="reference/block-flow-direction-002-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-048" class="ahem">
<tr>
<td rowspan="1" title="'float: right' and 'sideways-lr' - block flow direction of block-level boxes">
<a href="block-flow-direction-048.htm">block-flow-direction-048</a></td>
<td><a href="reference/block-flow-direction-002-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-049" class="ahem">
<tr>
<td rowspan="1" title="position absolute and 'sideways-rl' - block flow direction of block-level boxes">
<a href="block-flow-direction-049.htm">block-flow-direction-049</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-050" class="ahem">
<tr>
<td rowspan="1" title="position absolute and 'sideways-lr' - block flow direction of block-level boxes">
<a href="block-flow-direction-050.htm">block-flow-direction-050</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-051" class="ahem">
<tr>
<td rowspan="1" title="inline-block and 'sideways-rl' - block flow direction of block-level boxes">
<a href="block-flow-direction-051.htm">block-flow-direction-051</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-052" class="ahem">
<tr>
<td rowspan="1" title="inline-block and 'sideways-rl' - block flow direction of block-level boxes">
<a href="block-flow-direction-052.htm">block-flow-direction-052</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-053" class="ahem">
<tr>
<td rowspan="1" title="inline-block and 'sideways-rl' - block flow direction of block-level boxes">
<a href="block-flow-direction-053.htm">block-flow-direction-053</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-054" class="ahem">
<tr>
<td rowspan="1" title="inline-block and 'sideways-lr' - block flow direction of block-level boxes">
<a href="block-flow-direction-054.htm">block-flow-direction-054</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-055" class="ahem">
<tr>
<td rowspan="1" title="inline-block and 'sideways-lr' - block flow direction of block-level boxes">
<a href="block-flow-direction-055.htm">block-flow-direction-055</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-056" class="ahem">
<tr>
<td rowspan="1" title="inline-block and 'sideways-lr' - block flow direction of block-level boxes">
<a href="block-flow-direction-056.htm">block-flow-direction-056</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-057" class="ahem">
<tr>
<td rowspan="1" title="table-cell and 'sideways-rl' - block flow direction of block-level boxes">
<a href="block-flow-direction-057.htm">block-flow-direction-057</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-058" class="ahem">
<tr>
<td rowspan="1" title="table-cell and 'sideways-lr' - block flow direction of block-level boxes">
<a href="block-flow-direction-058.htm">block-flow-direction-058</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-059" class="ahem">
<tr>
<td rowspan="1" title="table-caption and 'sideways-rl' - block flow direction of block-level boxes">
<a href="block-flow-direction-059.htm">block-flow-direction-059</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-060" class="ahem">
<tr>
<td rowspan="1" title="table-caption and 'sideways-lr' - block flow direction of block-level boxes">
<a href="block-flow-direction-060.htm">block-flow-direction-060</a></td>
<td><a href="reference/block-flow-direction-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-061" class="ahem image">
<tr>
<td rowspan="1" title="list and sideways-rl - block flow direction of block-level boxes">
<a href="block-flow-direction-061.htm">block-flow-direction-061</a></td>
<td><a href="reference/block-flow-direction-002-ref.htm">=</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="block-flow-direction-062" class="ahem image">
<tr>
<td rowspan="1" title="list and sideways-lr - block flow direction of block-level boxes">
<a href="block-flow-direction-062.htm">block-flow-direction-062</a></td>
<td><a href="reference/block-flow-direction-043-ref.htm">=</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="block-flow-direction-063" class="ahem">
<tr>
<td rowspan="1" title="sideways-lr - block flow direction of block-level boxes">
<a href="block-flow-direction-063.htm">block-flow-direction-063</a></td>
<td><a href="reference/block-flow-direction-043-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-064" class="ahem">
<tr>
<td rowspan="1" title="sideways-rl - block flow direction of block-level boxes">
<a href="block-flow-direction-064.htm">block-flow-direction-064</a></td>
<td><a href="reference/block-flow-direction-002-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-065" class="image">
<tr>
<td rowspan="1" title="writing mode (sideways-rl) of document - horizontal position of first block">
<a href="block-flow-direction-065.htm">block-flow-direction-065</a></td>
<td><a href="reference/block-flow-direction-025-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="block-flow-direction-066" class="image">
<tr>
<td rowspan="1" title="writing mode (sideways-lr) of document - horizontal position of first block">
<a href="block-flow-direction-066.htm">block-flow-direction-066</a></td>
<td><a href="reference/block-flow-direction-066-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="block-override-001" class="">
<tr>
<td rowspan="1" title="direction: div override rtl">
@ -4936,6 +5128,30 @@
<td rowspan="1"><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="outline-inline-block-vrl-006" class="ahem">
<tr>
<td rowspan="1" title="outline layout and inline-block and vertical-rl writing-mode">
<a href="outline-inline-block-vrl-006.htm">outline-inline-block-vrl-006</a></td>
<td><a href="reference/outline-inline-block-vrl-006.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="outline-inline-vlr-006" class="ahem">
<tr>
<td rowspan="1" title="outline layout and non-replaced inline and vertical-lr writing-mode">
<a href="outline-inline-vlr-006.htm">outline-inline-vlr-006</a></td>
<td><a href="reference/outline-inline-vlr-006.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="outline-inline-vrl-006" class="ahem">
<tr>
<td rowspan="1" title="outline layout and non-replaced inline and vertical-rl writing-mode">
<a href="outline-inline-vrl-006.htm">outline-inline-vrl-006</a></td>
<td><a href="reference/outline-inline-vrl-006.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="padding-vlr-005" class="image">
<tr>
<td rowspan="1" title="padding in 'vertical-lr' writing-mode context">

27
tests/wpt/css-tests/css-writing-modes-3_dev/html/reftest.list
View file

@ -402,6 +402,30 @@ block-flow-direction-022.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-023.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-024.htm == reference/block-flow-direction-002-ref.htm
block-flow-direction-025.htm == reference/block-flow-direction-025-ref.htm
block-flow-direction-042.htm == reference/block-flow-direction-002-ref.htm
block-flow-direction-043.htm == reference/block-flow-direction-043-ref.htm
block-flow-direction-045.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-046.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-047.htm == reference/block-flow-direction-002-ref.htm
block-flow-direction-048.htm == reference/block-flow-direction-002-ref.htm
block-flow-direction-049.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-050.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-051.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-052.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-053.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-054.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-055.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-056.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-057.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-058.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-059.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-060.htm == reference/block-flow-direction-001-ref.htm
block-flow-direction-061.htm == reference/block-flow-direction-002-ref.htm
block-flow-direction-062.htm == reference/block-flow-direction-043-ref.htm
block-flow-direction-063.htm == reference/block-flow-direction-043-ref.htm
block-flow-direction-064.htm == reference/block-flow-direction-002-ref.htm
block-flow-direction-065.htm == reference/block-flow-direction-025-ref.htm
block-flow-direction-066.htm == reference/block-flow-direction-066-ref.htm
block-override-001.htm == reference/block-override-001.htm
block-override-002.htm == reference/block-override-002.htm
block-override-003.htm == reference/block-override-003.htm
@ -613,6 +637,9 @@ margin-collapse-vrl-034.htm == reference/ref-filled-green-100px-square.htm
margin-collapse-vrl-036.htm == reference/ref-filled-green-100px-square.htm
margin-vlr-003.htm == reference/margin-vrl-002-ref.htm
margin-vrl-002.htm == reference/margin-vrl-002-ref.htm
outline-inline-block-vrl-006.htm == reference/outline-inline-block-vrl-006.htm
outline-inline-vlr-006.htm == reference/outline-inline-vlr-006.htm
outline-inline-vrl-006.htm == reference/outline-inline-vrl-006.htm
padding-vlr-005.htm == reference/margin-vrl-002-ref.htm
padding-vrl-004.htm == reference/margin-vrl-002-ref.htm
percent-margin-vlr-003.htm == reference/margin-vrl-002-ref.htm

BIN
tests/wpt/css-tests/css-writing-modes-3_dev/html/support/block-flow-direction-066-exp-res.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

4
tests/wpt/css-tests/css-writing-modes-3_dev/html/toc.htm
View file

@ -32,7 +32,7 @@
<tbody id="s3">
<tr><th><a href="chapter-3.htm">Chapter 3 -
Introduction to Vertical Text</a></th>
<td>(89 Tests)</td></tr>
<td>(113 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.htm">Chapter 4 -
@ -52,7 +52,7 @@
<tbody id="s7">
<tr><th><a href="chapter-7.htm">Chapter 7 -
Abstract Box Layout</a></th>
<td>(519 Tests)</td></tr>
<td>(522 Tests)</td></tr>
</tbody>
<tbody id="s8">
<tr><th><a href="chapter-8.htm">Chapter 8 -