mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Update CSS tests to revision e102a993c37a2e0ebd549bc7d5548b006458ab34
This commit is contained in:
Ms2ger
parent
037cac7353
commit
a00f2d6310
479 changed files with 13629 additions and 1611 deletions
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 C D E FFFF </span>
|
||||
<!-- The "P" --> <span>AAAAAAA B C D E FFFF </span>
|
||||
|
||||
<!-- The "A" --> <span>GGGGGGG H J K L MMMMMMM</span>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 BBBB</div>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <div>C D E</div>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <div>F G H</div>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ K</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of left-most "S" --> <div class="right-border">L MMMM</div>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <div>Q R S</div>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <div>T U V</div>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <div>WWWW X</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
|
||||
|
||||
<!-- The 2nd right-most line of "A" --> <div>Z a </div>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <div>b c </div>
|
||||
|
||||
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "P" --> <div class="right-border">eeee </div>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <div>f g </div>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <div>h j </div>
|
||||
|
||||
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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> B C</div>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <div> D E</div>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <div> FFFF</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <div> H J</div>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <div> K 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 QQQQ</div>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <div>R S T</div>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <div>U V W</div>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <div>XXXX Y</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <div class="left-border">a bbbb</div>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <div>c d e</div>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <div>f g h</div>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj k</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 BBBB</div>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <div>C D E</div>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <div>F G H</div>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ K</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of left-most "S" --> <div class="right-border">L MMMM</div>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <div>Q R S</div>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <div>T U V</div>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <div>WWWW X</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
|
||||
|
||||
<!-- The 2nd right-most line of "A" --> <div>Z a </div>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <div>b c </div>
|
||||
|
||||
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "P" --> <div class="right-border">eeee </div>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <div>f g </div>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <div>h j </div>
|
||||
|
||||
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 </div>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <div>f g </div>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <div>h j </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 a </div>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <div>b c </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 MMMM</div>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <div>Q R S</div>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <div>T U V</div>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <div>WWWW X</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="floated-left" id="right-border">
|
||||
|
||||
<!-- The right-most line of right-most "S" --> <div>A BBBB</div>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <div>C D E</div>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <div>F G H</div>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ K</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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> B C</div>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <div> D E</div>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <div> FFFF</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <div> H J</div>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <div> K 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 QQQQ</div>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <div>R S T</div>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <div>U V W</div>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <div>XXXX Y</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <div class="left-border">a bbbb</div>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <div>c d e</div>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <div>f g h</div>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj k</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 bbbb</div>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <div>c d e</div>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <div>f g h</div>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <div>jjjj k</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="floated-right">
|
||||
|
||||
<!-- The 1st left-most line of left-most "S" --> <div>N QQQQ</div>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <div>R S T</div>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <div>U V W</div>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <div>XXXX Y</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="floated-right">
|
||||
|
||||
<!-- The left-most line of "A" --> <div>GGGGGGG</div>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <div> H J</div>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <div> K 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> B C</div>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <div> D E</div>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <div> FFFF</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 BBBB</div>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <div>C D E</div>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <div>F G H</div>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ K</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of left-most "S" --> <div class="right-border">L MMMM</div>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <div>Q R S</div>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <div>T U V</div>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <div>WWWW X</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
|
||||
|
||||
<!-- The 2nd right-most line of "A" --> <div>Z a </div>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <div>b c </div>
|
||||
|
||||
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "P" --> <div class="right-border">eeee </div>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <div>f g </div>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <div>h j </div>
|
||||
|
||||
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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> B C</div>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <div> D E</div>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <div> FFFF</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <div> H J</div>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <div> K 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 QQQQ</div>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <div>R S T</div>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <div>U V W</div>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <div>XXXX Y</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <div class="left-border">a bbbb</div>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <div>c d e</div>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <div>f g h</div>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj k</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 BBBB</span>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <span>C D E</span>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <span>F G H</span>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <span>JJJJ K</span>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of left-most "S" --> <span class="right-border">L MMMM</span>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <span>Q R S</span>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <span>T U V</span>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <span>WWWW X</span>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "A" --> <span class="right-border">YYYYYYY</span>
|
||||
|
||||
<!-- The 2nd right-most line of "A" --> <span>Z a </span>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <span>b c </span>
|
||||
|
||||
<!-- The 4th right-most line of "A" --> <span>ddddddd</span>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "P" --> <span class="right-border">eeee </span>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <span>f g </span>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <span>h j </span>
|
||||
|
||||
<!-- The 4th right-most line of "P" --> <span id="left-border">kkkkkkk</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 BBBB C D E F G H JJJJ K</span>
|
||||
|
||||
<!-- The left-most "S" --> <span>L MMMM Q R S T U V WWWW X</span>
|
||||
|
||||
<!-- The "A" --> <span>YYYYYYY Z a b c ddddddd</span>
|
||||
|
||||
<!-- The "P" --> <span id="left-border">eeee f g h j kkkkkkk</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 </span>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <span>f g </span>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <span>h j </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 a </span>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <span>b c </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 MMMM</span>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <span>Q R S</span>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <span>T U V</span>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <span>WWWW X</span>
|
||||
|
||||
</div><div class="inline-block">
|
||||
|
||||
<!-- The right-most line of right-most "S" --> <span>A BBBB</span>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <span>C D E</span>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <span>F G H</span>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <span>JJJJ K</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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> B C</span>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <span> D E</span>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <span> FFFF</span>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of "A" --> <span class="left-border">GGGGGGG</span>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <span> H J</span>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <span> K 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 QQQQ</span>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <span>R S T</span>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <span>U V W</span>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <span>XXXX Y</span>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <span class="left-border">a bbbb</span>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <span>c d e</span>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <span>f g h</span>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <span id="right-border">jjjj k</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 B C D E FFFF</span>
|
||||
|
||||
<!-- The "A" --> <span>GGGGGGG H J K L MMMMMMM</span>
|
||||
|
||||
<!-- The left-most "S" --> <span>N QQQQ R S T U V W XXXX Y</span>
|
||||
|
||||
<!-- The right-most "S" --> <span id="right-border">a bbbb c d e f g h jjjj k</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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> B C</span>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <span> D E</span>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <span> FFFF</span>
|
||||
|
||||
</div><div class="inline-block">
|
||||
|
||||
<!-- The left-most line of "A" --> <span>GGGGGGG</span>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <span> H J</span>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <span> K 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 QQQQ</span>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <span>R S T</span>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <span>U V W</span>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <span>XXXX Y</span>
|
||||
|
||||
</div><div class="inline-block">
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <span>a bbbb</span>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <span>c d e</span>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <span>f g h</span>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <span id="right-border">jjjj k</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 BBBB</div>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <div>C D E</div>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <div>F G H</div>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ K</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of left-most "S" --> <div class="right-border">L MMMM</div>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <div>Q R S</div>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <div>T U V</div>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <div>WWWW X</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
|
||||
|
||||
<!-- The 2nd right-most line of "A" --> <div>Z a </div>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <div>b c </div>
|
||||
|
||||
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "P" --> <div class="right-border">eeee </div>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <div>f g </div>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <div>h j </div>
|
||||
|
||||
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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> B C</div>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <div> D E</div>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <div> FFFF</div>
|
||||
|
||||
|
||||
<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <div> H J</div>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <div> K 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 QQQQ</div>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <div>R S T</div>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <div>U V W</div>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <div>XXXX Y</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <div class="left-border">a bbbb</div>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <div>c d e</div>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <div>f g h</div>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj k</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 BBBB</div>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <div>C D E</div>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <div>F G H</div>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ K</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of left-most "S" --> <div class="right-border">L MMMM</div>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <div>Q R S</div>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <div>T U V</div>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <div>WWWW X</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
|
||||
|
||||
<!-- The 2nd right-most line of "A" --> <div>Z a </div>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <div>b c </div>
|
||||
|
||||
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "P" --> <div class="right-border">eeee </div>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <div>f g </div>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <div>h j </div>
|
||||
|
||||
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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> B C</div>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <div> D E</div>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <div> FFFF</div>
|
||||
|
||||
|
||||
<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <div> H J</div>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <div> K 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 QQQQ</div>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <div>R S T</div>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <div>U V W</div>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <div>XXXX Y</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <div class="left-border">a bbbb</div>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <div>c d e</div>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <div>f g h</div>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj k</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 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 BBBB</li></ul>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <ul><li>C D E</li></ul>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <ul><li>F G H</li></ul>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <ul><li>JJJJ K</li></ul>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of left-most "S" --> <ul class="right-border"><li>L MMMM</li></ul>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <ul><li>Q R S</li></ul>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <ul><li>T U V</li></ul>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <ul><li>WWWW 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 a </li></ul>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <ul><li>b c </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 </li></ul>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <ul><li>f g </li></ul>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <ul><li>h j </li></ul>
|
||||
|
||||
<!-- The 4th right-most line of "P" --> <ul id="left-border"><li>kkkkkkk</li></ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 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> B C</li></ul>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <ul><li> D E</li></ul>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <ul><li> 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> H J</li></ul>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <ul><li> K 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 QQQQ</li></ul>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <ul><li>R S T</li></ul>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <ul><li>U V W</li></ul>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <ul><li>XXXX Y</li></ul>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <ul class="left-border"><li>a bbbb</li></ul>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <ul><li>c d e</li></ul>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <ul><li>f g h</li></ul>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <ul id="right-border"><li>jjjj k</li></ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 B C D E FFFF</div>
|
||||
|
||||
<!-- The "A" --> <div>GGGGGGG H J K L MMMMMMM</div>
|
||||
|
||||
<!-- The left-most "S" --> <div>N QQQQ R S T U V W XXXX Y</div>
|
||||
|
||||
<!-- The right-most "S" --> <div id="right-most">a bbbb c d e f g h jjjj k</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 BBBB C D E F G H JJJJ K</div>
|
||||
|
||||
<!-- The left-most "S" --> <div>L MMMM Q R S T U V WWWW X</div>
|
||||
|
||||
<!-- The "A" --> <div>YYYYYYY Z a b c ddddddd</div>
|
||||
|
||||
<!-- The "P" --> <div id="left-border">eeee f g h j kkkkkkk</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/blue20x20.png" width="20" height="20" alt="Image download support must be enabled">
|
||||
|
||||
<img src="support/blue20x20.png" width="420" height="20" alt="Image download support must be enabled">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4 KiB |
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4 KiB |
|
|
@ -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 -
|
||||
|
|
|
|||
|
|
@ -809,54 +809,102 @@ html/block-embed-003.htm 5a2ea65cfd1fccd182350cb160caaadd6d17a02d ?
|
|||
xhtml1/block-embed-003.xht 5a2ea65cfd1fccd182350cb160caaadd6d17a02d ?
|
||||
html/block-flow-direction-001.htm 44f3f900314ac5af53fd9014c41c853b7bb96e93 ?
|
||||
xhtml1/block-flow-direction-001.xht 44f3f900314ac5af53fd9014c41c853b7bb96e93 ?
|
||||
html/block-flow-direction-002.htm f76c85033e7f77641067f179e9cb6c2a257993b9 ?
|
||||
xhtml1/block-flow-direction-002.xht f76c85033e7f77641067f179e9cb6c2a257993b9 ?
|
||||
html/block-flow-direction-003.htm ae8c2d3023d90bfcb87f9c1a377b8325418d9186 ?
|
||||
xhtml1/block-flow-direction-003.xht ae8c2d3023d90bfcb87f9c1a377b8325418d9186 ?
|
||||
html/block-flow-direction-002.htm 5c9e8af7d012391a0cf3e467c18cd28aa0362ee9 ?
|
||||
xhtml1/block-flow-direction-002.xht 5c9e8af7d012391a0cf3e467c18cd28aa0362ee9 ?
|
||||
html/block-flow-direction-003.htm 04de4c62ecb1d2fc240821c80b6be58b3479f864 ?
|
||||
xhtml1/block-flow-direction-003.xht 04de4c62ecb1d2fc240821c80b6be58b3479f864 ?
|
||||
html/block-flow-direction-004.htm 87224a4f647a5e688530ed22fe4fa2703adab3ef ?
|
||||
xhtml1/block-flow-direction-004.xht 87224a4f647a5e688530ed22fe4fa2703adab3ef ?
|
||||
html/block-flow-direction-005.htm 48c141df0f86b4e5b40e84a9a8498ed955b4c091 ?
|
||||
xhtml1/block-flow-direction-005.xht 48c141df0f86b4e5b40e84a9a8498ed955b4c091 ?
|
||||
html/block-flow-direction-006.htm 5c2da4f5b3e4dba9916cb630999350307b23fb3e ?
|
||||
xhtml1/block-flow-direction-006.xht 5c2da4f5b3e4dba9916cb630999350307b23fb3e ?
|
||||
html/block-flow-direction-007.htm 155352d758a86e7454a7a663272d1274bee8b49f ?
|
||||
xhtml1/block-flow-direction-007.xht 155352d758a86e7454a7a663272d1274bee8b49f ?
|
||||
html/block-flow-direction-008.htm f71d5f561a80b14032671961cd37a017d2268df0 ?
|
||||
xhtml1/block-flow-direction-008.xht f71d5f561a80b14032671961cd37a017d2268df0 ?
|
||||
html/block-flow-direction-009.htm b048a48983e46cd9c110fc4261e544dd14ae46a6 ?
|
||||
xhtml1/block-flow-direction-009.xht b048a48983e46cd9c110fc4261e544dd14ae46a6 ?
|
||||
html/block-flow-direction-010.htm 3b0ca5bca3d31338df307188ac75bd4dd5e00664 ?
|
||||
xhtml1/block-flow-direction-010.xht 3b0ca5bca3d31338df307188ac75bd4dd5e00664 ?
|
||||
html/block-flow-direction-011.htm 461dd467e43b124e96be1d4ac8ffae9494df3361 ?
|
||||
xhtml1/block-flow-direction-011.xht 461dd467e43b124e96be1d4ac8ffae9494df3361 ?
|
||||
html/block-flow-direction-012.htm 2df3eb21a2ece981c5168ada830b4353aa4385f5 ?
|
||||
xhtml1/block-flow-direction-012.xht 2df3eb21a2ece981c5168ada830b4353aa4385f5 ?
|
||||
html/block-flow-direction-013.htm c20c2f47fd7c59884b794ad025d9c47c395e6248 ?
|
||||
xhtml1/block-flow-direction-013.xht c20c2f47fd7c59884b794ad025d9c47c395e6248 ?
|
||||
html/block-flow-direction-014.htm b44acfc65ec31f4ea17dd56c9e7379ec86df7ea2 ?
|
||||
xhtml1/block-flow-direction-014.xht b44acfc65ec31f4ea17dd56c9e7379ec86df7ea2 ?
|
||||
html/block-flow-direction-015.htm 9af49e6edee9fe3a8cc8ed1a4b61eb86e9db6a28 ?
|
||||
xhtml1/block-flow-direction-015.xht 9af49e6edee9fe3a8cc8ed1a4b61eb86e9db6a28 ?
|
||||
html/block-flow-direction-016.htm 0687ecb763842c4937f50b991b135fdb61ba1a21 ?
|
||||
xhtml1/block-flow-direction-016.xht 0687ecb763842c4937f50b991b135fdb61ba1a21 ?
|
||||
html/block-flow-direction-017.htm 7f600cd4a4fce114a2698658b317d444af89e2b0 ?
|
||||
xhtml1/block-flow-direction-017.xht 7f600cd4a4fce114a2698658b317d444af89e2b0 ?
|
||||
html/block-flow-direction-018.htm 5cc2e0394ee9fc2e8c4393d1fca9b964111413ce ?
|
||||
xhtml1/block-flow-direction-018.xht 5cc2e0394ee9fc2e8c4393d1fca9b964111413ce ?
|
||||
html/block-flow-direction-019.htm 38faffff4ffff208f0179399778e99f7d361e62a ?
|
||||
xhtml1/block-flow-direction-019.xht 38faffff4ffff208f0179399778e99f7d361e62a ?
|
||||
html/block-flow-direction-020.htm 4d431792ca25bd32b7f1afd91295cb1bce0b8e16 ?
|
||||
xhtml1/block-flow-direction-020.xht 4d431792ca25bd32b7f1afd91295cb1bce0b8e16 ?
|
||||
html/block-flow-direction-021.htm b651e390189799fd3ba5645a387bb0076143fcbd ?
|
||||
xhtml1/block-flow-direction-021.xht b651e390189799fd3ba5645a387bb0076143fcbd ?
|
||||
html/block-flow-direction-022.htm b5558106d1fd33be280c620b17a771f8b8b04561 ?
|
||||
xhtml1/block-flow-direction-022.xht b5558106d1fd33be280c620b17a771f8b8b04561 ?
|
||||
html/block-flow-direction-023.htm 47ff826dfb1a902d348cc85684500d3213eca3a0 ?
|
||||
xhtml1/block-flow-direction-023.xht 47ff826dfb1a902d348cc85684500d3213eca3a0 ?
|
||||
html/block-flow-direction-024.htm dd2c95409479bbec764e167cd07fe185d8677107 ?
|
||||
xhtml1/block-flow-direction-024.xht dd2c95409479bbec764e167cd07fe185d8677107 ?
|
||||
html/block-flow-direction-005.htm 19d6c862abd4bbb497a79b7854ff36a92e359bb9 ?
|
||||
xhtml1/block-flow-direction-005.xht 19d6c862abd4bbb497a79b7854ff36a92e359bb9 ?
|
||||
html/block-flow-direction-006.htm 69944fcf1c68c9d9601789ff315ebfff67af335f ?
|
||||
xhtml1/block-flow-direction-006.xht 69944fcf1c68c9d9601789ff315ebfff67af335f ?
|
||||
html/block-flow-direction-007.htm 5762555012033e263d15589c1761c7f162522cf6 ?
|
||||
xhtml1/block-flow-direction-007.xht 5762555012033e263d15589c1761c7f162522cf6 ?
|
||||
html/block-flow-direction-008.htm 3aced69861609275f621ac3fb95ad5447670e790 ?
|
||||
xhtml1/block-flow-direction-008.xht 3aced69861609275f621ac3fb95ad5447670e790 ?
|
||||
html/block-flow-direction-009.htm a54cced47078b3a68d3eb38dfa7fc2acc31e4985 ?
|
||||
xhtml1/block-flow-direction-009.xht a54cced47078b3a68d3eb38dfa7fc2acc31e4985 ?
|
||||
html/block-flow-direction-010.htm 92cc02cb3b4ad46fed8890ec471e4a95daebfd51 ?
|
||||
xhtml1/block-flow-direction-010.xht 92cc02cb3b4ad46fed8890ec471e4a95daebfd51 ?
|
||||
html/block-flow-direction-011.htm 00641510869b1e4ae2e4f11100696408b80bdf7f ?
|
||||
xhtml1/block-flow-direction-011.xht 00641510869b1e4ae2e4f11100696408b80bdf7f ?
|
||||
html/block-flow-direction-012.htm dcd7145988194f22139d18ff39769a279dc69930 ?
|
||||
xhtml1/block-flow-direction-012.xht dcd7145988194f22139d18ff39769a279dc69930 ?
|
||||
html/block-flow-direction-013.htm 11e9fff1bccd00695d7199c7cc4b3a747c423b31 ?
|
||||
xhtml1/block-flow-direction-013.xht 11e9fff1bccd00695d7199c7cc4b3a747c423b31 ?
|
||||
html/block-flow-direction-014.htm d381dd732d4cb52cad4c95278dc064b07c07745c ?
|
||||
xhtml1/block-flow-direction-014.xht d381dd732d4cb52cad4c95278dc064b07c07745c ?
|
||||
html/block-flow-direction-015.htm 0ad39ff63db30d1857570edd044ab52330df0842 ?
|
||||
xhtml1/block-flow-direction-015.xht 0ad39ff63db30d1857570edd044ab52330df0842 ?
|
||||
html/block-flow-direction-016.htm dc77235c2c9b519a945f9e4aacaa4a97ec8d878c ?
|
||||
xhtml1/block-flow-direction-016.xht dc77235c2c9b519a945f9e4aacaa4a97ec8d878c ?
|
||||
html/block-flow-direction-017.htm b754020995f81dd4bdc7724a11d3e5627bd4635a ?
|
||||
xhtml1/block-flow-direction-017.xht b754020995f81dd4bdc7724a11d3e5627bd4635a ?
|
||||
html/block-flow-direction-018.htm b4846a278087e245afa7906739ebc29bd064b0c3 ?
|
||||
xhtml1/block-flow-direction-018.xht b4846a278087e245afa7906739ebc29bd064b0c3 ?
|
||||
html/block-flow-direction-019.htm d9411cf53b2d5939eba25f07d0df0e5dac4f4975 ?
|
||||
xhtml1/block-flow-direction-019.xht d9411cf53b2d5939eba25f07d0df0e5dac4f4975 ?
|
||||
html/block-flow-direction-020.htm 9ee8ac4727f563cb12230fdeca50995ee079f05d ?
|
||||
xhtml1/block-flow-direction-020.xht 9ee8ac4727f563cb12230fdeca50995ee079f05d ?
|
||||
html/block-flow-direction-021.htm 26cfe2621ebbba3fc203d83162c2d82d366f718d ?
|
||||
xhtml1/block-flow-direction-021.xht 26cfe2621ebbba3fc203d83162c2d82d366f718d ?
|
||||
html/block-flow-direction-022.htm 1ded5744a815d3f8a7a92507ea990296d6a6b097 ?
|
||||
xhtml1/block-flow-direction-022.xht 1ded5744a815d3f8a7a92507ea990296d6a6b097 ?
|
||||
html/block-flow-direction-023.htm 798374964b006150956da1e531b9b8dc193c6d2e ?
|
||||
xhtml1/block-flow-direction-023.xht 798374964b006150956da1e531b9b8dc193c6d2e ?
|
||||
html/block-flow-direction-024.htm 615663a35f0f8883842a5bcbf77cf8e788fbdc48 ?
|
||||
xhtml1/block-flow-direction-024.xht 615663a35f0f8883842a5bcbf77cf8e788fbdc48 ?
|
||||
html/block-flow-direction-025.htm 6b3673477ab3c066dec96f347d5c1f6aaafc0622 ?
|
||||
xhtml1/block-flow-direction-025.xht 6b3673477ab3c066dec96f347d5c1f6aaafc0622 ?
|
||||
html/block-flow-direction-042.htm df94875e12886f6dc69caf83f9753f9e854de4ca ?
|
||||
xhtml1/block-flow-direction-042.xht df94875e12886f6dc69caf83f9753f9e854de4ca ?
|
||||
html/block-flow-direction-043.htm d620513327a1baf327a3a34c8a2cf6e3fbd25f68 ?
|
||||
xhtml1/block-flow-direction-043.xht d620513327a1baf327a3a34c8a2cf6e3fbd25f68 ?
|
||||
html/block-flow-direction-045.htm cb0b9aa5f9924a5c63a1b29f5f0ac7b99fbf97b1 ?
|
||||
xhtml1/block-flow-direction-045.xht cb0b9aa5f9924a5c63a1b29f5f0ac7b99fbf97b1 ?
|
||||
html/block-flow-direction-046.htm bc17e76d85e2e708fb04751460b57a60ce5c0a86 ?
|
||||
xhtml1/block-flow-direction-046.xht bc17e76d85e2e708fb04751460b57a60ce5c0a86 ?
|
||||
html/block-flow-direction-047.htm 6ab3fc6d4944e8a48966ffaa85142b9b19468617 ?
|
||||
xhtml1/block-flow-direction-047.xht 6ab3fc6d4944e8a48966ffaa85142b9b19468617 ?
|
||||
html/block-flow-direction-048.htm 2b2a96a6cb128b020a40650a17603b9ed9a1efa7 ?
|
||||
xhtml1/block-flow-direction-048.xht 2b2a96a6cb128b020a40650a17603b9ed9a1efa7 ?
|
||||
html/block-flow-direction-049.htm fb772f83f079e3a9320d1a93246f6e34b99e9267 ?
|
||||
xhtml1/block-flow-direction-049.xht fb772f83f079e3a9320d1a93246f6e34b99e9267 ?
|
||||
html/block-flow-direction-050.htm a6ff9d8832f3a99a1a890745066e7d8988911ea4 ?
|
||||
xhtml1/block-flow-direction-050.xht a6ff9d8832f3a99a1a890745066e7d8988911ea4 ?
|
||||
html/block-flow-direction-051.htm 1b211d57083d0e48effa803b3740386763b47a83 ?
|
||||
xhtml1/block-flow-direction-051.xht 1b211d57083d0e48effa803b3740386763b47a83 ?
|
||||
html/block-flow-direction-052.htm 200e1135bd938e8c1884b482831da93745ce205b ?
|
||||
xhtml1/block-flow-direction-052.xht 200e1135bd938e8c1884b482831da93745ce205b ?
|
||||
html/block-flow-direction-053.htm 51069f50da4611b4937f16d27e7632d6af6b9182 ?
|
||||
xhtml1/block-flow-direction-053.xht 51069f50da4611b4937f16d27e7632d6af6b9182 ?
|
||||
html/block-flow-direction-054.htm 77529af0b060562d96c95e9ba69d5b027ebf0ea3 ?
|
||||
xhtml1/block-flow-direction-054.xht 77529af0b060562d96c95e9ba69d5b027ebf0ea3 ?
|
||||
html/block-flow-direction-055.htm 41718dc593a80f58ead3335ee8741c44948938df ?
|
||||
xhtml1/block-flow-direction-055.xht 41718dc593a80f58ead3335ee8741c44948938df ?
|
||||
html/block-flow-direction-056.htm 35282509954f2e32b8e2d08f01c769b2c6ccfae6 ?
|
||||
xhtml1/block-flow-direction-056.xht 35282509954f2e32b8e2d08f01c769b2c6ccfae6 ?
|
||||
html/block-flow-direction-057.htm 0f660ee8f6d45c27f3cb0b303a2782fcbb0f8405 ?
|
||||
xhtml1/block-flow-direction-057.xht 0f660ee8f6d45c27f3cb0b303a2782fcbb0f8405 ?
|
||||
html/block-flow-direction-058.htm 141e410db8a069da0026072d00aa78275580965f ?
|
||||
xhtml1/block-flow-direction-058.xht 141e410db8a069da0026072d00aa78275580965f ?
|
||||
html/block-flow-direction-059.htm dcbac90bb1e96e626d0c0c0766971df2d2455b6a ?
|
||||
xhtml1/block-flow-direction-059.xht dcbac90bb1e96e626d0c0c0766971df2d2455b6a ?
|
||||
html/block-flow-direction-060.htm 32411bf7a80af4400d47a685ffea28e86f4ca544 ?
|
||||
xhtml1/block-flow-direction-060.xht 32411bf7a80af4400d47a685ffea28e86f4ca544 ?
|
||||
html/block-flow-direction-061.htm f24099feb05a2d8860e9c2e8a5b4adff52f9c6c5 ?
|
||||
xhtml1/block-flow-direction-061.xht f24099feb05a2d8860e9c2e8a5b4adff52f9c6c5 ?
|
||||
html/block-flow-direction-062.htm 4790f1a71d513e51935cfa8e6f4d5ae8df8ade46 ?
|
||||
xhtml1/block-flow-direction-062.xht 4790f1a71d513e51935cfa8e6f4d5ae8df8ade46 ?
|
||||
html/block-flow-direction-063.htm 1f3ef0d5b047336ae444f036209e66fde393ffd3 ?
|
||||
xhtml1/block-flow-direction-063.xht 1f3ef0d5b047336ae444f036209e66fde393ffd3 ?
|
||||
html/block-flow-direction-064.htm 4ce9e308161754d6f5293e0d28b94f8316f5caca ?
|
||||
xhtml1/block-flow-direction-064.xht 4ce9e308161754d6f5293e0d28b94f8316f5caca ?
|
||||
html/block-flow-direction-065.htm 023ff8747304789a30ff10a1bca125ec74d665db ?
|
||||
xhtml1/block-flow-direction-065.xht 023ff8747304789a30ff10a1bca125ec74d665db ?
|
||||
html/block-flow-direction-066.htm 172e1587f1d5af4a41e87f5010fa2046053ba0c6 ?
|
||||
xhtml1/block-flow-direction-066.xht 172e1587f1d5af4a41e87f5010fa2046053ba0c6 ?
|
||||
html/block-override-001.htm c9f01a298fdc3c1c6eaceefc08c1f134078a0c61 ?
|
||||
xhtml1/block-override-001.xht c9f01a298fdc3c1c6eaceefc08c1f134078a0c61 ?
|
||||
html/block-override-002.htm 1c72e7aa6e1d313b0e23b11e9e637b1f77dd39f4 ?
|
||||
|
|
@ -1347,14 +1395,20 @@ html/orthogonal-parent-shrink-to-fit-001w.htm 42a695a9c6f4336a806d7ee4cc4fee15c1
|
|||
xhtml1/orthogonal-parent-shrink-to-fit-001w.xht 42a695a9c6f4336a806d7ee4cc4fee15c1221e76 ?
|
||||
html/orthogonal-parent-shrink-to-fit-001x.htm 7cee4685013bbd4ae5c8d547e28661c88967e548 ?
|
||||
xhtml1/orthogonal-parent-shrink-to-fit-001x.xht 7cee4685013bbd4ae5c8d547e28661c88967e548 ?
|
||||
html/outline-inline-block-vrl-006.htm 8e4288e8f27ab96c2cf1df2d52d7e8c1d93d9318 ?
|
||||
xhtml1/outline-inline-block-vrl-006.xht 8e4288e8f27ab96c2cf1df2d52d7e8c1d93d9318 ?
|
||||
html/outline-inline-slr-005.htm feefed7bb113e47f3bbb347eec4dac1a3f9310ec ?
|
||||
xhtml1/outline-inline-slr-005.xht feefed7bb113e47f3bbb347eec4dac1a3f9310ec ?
|
||||
html/outline-inline-srl-004.htm 78586049cea376c528cb91f51fb496b83c9ad4d1 ?
|
||||
xhtml1/outline-inline-srl-004.xht 78586049cea376c528cb91f51fb496b83c9ad4d1 ?
|
||||
html/outline-inline-vlr-003.htm aa78e4d2270903852d387b3d25cc21a7af73d8a9 ?
|
||||
xhtml1/outline-inline-vlr-003.xht aa78e4d2270903852d387b3d25cc21a7af73d8a9 ?
|
||||
html/outline-inline-vlr-006.htm ceeb41816beb13ced78157d67b074a3296998c4d ?
|
||||
xhtml1/outline-inline-vlr-006.xht ceeb41816beb13ced78157d67b074a3296998c4d ?
|
||||
html/outline-inline-vrl-002.htm 74c5379d6fd8c46ca528d9f91df735b584cb9a55 ?
|
||||
xhtml1/outline-inline-vrl-002.xht 74c5379d6fd8c46ca528d9f91df735b584cb9a55 ?
|
||||
html/outline-inline-vrl-006.htm 9d51bfd03596b89289a8ed3012654e9df32b40d3 ?
|
||||
xhtml1/outline-inline-vrl-006.xht 9d51bfd03596b89289a8ed3012654e9df32b40d3 ?
|
||||
html/padding-vlr-005.htm 4c16042900e00793d562c3b4f5c39a3df16b1f95 ?
|
||||
xhtml1/padding-vlr-005.xht 4c16042900e00793d562c3b4f5c39a3df16b1f95 ?
|
||||
html/padding-vrl-004.htm 43a0740c77fa25671e5831c88555b884e75216ee ?
|
||||
|
|
|
|||
|
|
@ -402,30 +402,54 @@ block-embed-001 reference/block-embed-001 direction: div direction rtl http://w
|
|||
block-embed-002 reference/block-embed-002 direction: div direction ltr http://www.w3.org/TR/css-writing-modes-3/#text-direction 5069f35597f779fbb548ebf2f2ee2e5cc5416bcf `Richard Ishida`<mailto:ishida@w3.org> If direction is applied to a block element containing mixed direction text, the text in that element will be displayed in the expected order.
|
||||
block-embed-003 reference/block-embed-003 direction: div direction rtl http://www.w3.org/TR/css-writing-modes-3/#text-direction 5a2ea65cfd1fccd182350cb160caaadd6d17a02d `Richard Ishida`<mailto:ishida@w3.org> If direction is applied to a block element, contained block elements inherit that direction.
|
||||
block-flow-direction-001 reference/block-flow-direction-001-ref horizontal-tb - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 44f3f900314ac5af53fd9014c41c853b7bb96e93 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that block-level boxes in a 'horizontal-tb' writing mode are laid out one after the other, vertically, with the first beginning at the top of a containing block; they are ordered from top to bottom meaning that the 1st block box is the topmost one, then the 2nd block is juxtaposed at its bottom, then the 3rd block is juxtaposed to the 2nd block at its bottom, etc...
|
||||
block-flow-direction-002 reference/block-flow-direction-002-ref vertical-rl - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode f76c85033e7f77641067f179e9cb6c2a257993b9 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-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...
|
||||
block-flow-direction-003 reference/block-flow-direction-001-ref vertical-lr - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode ae8c2d3023d90bfcb87f9c1a377b8325418d9186 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-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...
|
||||
block-flow-direction-002 reference/block-flow-direction-002-ref vertical-rl - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 5c9e8af7d012391a0cf3e467c18cd28aa0362ee9 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-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...
|
||||
block-flow-direction-003 reference/block-flow-direction-001-ref vertical-lr - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 04de4c62ecb1d2fc240821c80b6be58b3479f864 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-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...
|
||||
block-flow-direction-004 reference/block-flow-direction-001-ref 'writing-mode' - initial value is 'horizontal-tb' ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 87224a4f647a5e688530ed22fe4fa2703adab3ef `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that the default, initial value of writing-mode is 'horizontal-tb'.
|
||||
block-flow-direction-005 reference/block-flow-direction-001-ref 'float: left' and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 48c141df0f86b4e5b40e84a9a8498ed955b4c091 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that a left-floated box with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
|
||||
block-flow-direction-006 reference/block-flow-direction-001-ref 'float: left' and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 5c2da4f5b3e4dba9916cb630999350307b23fb3e `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that left-floated boxes with 'writing-mode' set to 'vertical-rl' establish block formating contexts with a right-to-left block flow direction.
|
||||
block-flow-direction-007 reference/block-flow-direction-002-ref 'float: right' and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 155352d758a86e7454a7a663272d1274bee8b49f `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that a right-floated box with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
|
||||
block-flow-direction-008 reference/block-flow-direction-002-ref 'float: right' and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode f71d5f561a80b14032671961cd37a017d2268df0 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that right-floated boxes with 'writing-mode' set to 'vertical-lr' establish block formating contexts with a left-to-right block flow direction.
|
||||
block-flow-direction-009 reference/block-flow-direction-001-ref position absolute and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode b048a48983e46cd9c110fc4261e544dd14ae46a6 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that an absolutely positioned box with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
|
||||
block-flow-direction-010 reference/block-flow-direction-001-ref position absolute and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 3b0ca5bca3d31338df307188ac75bd4dd5e00664 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that an absolutely positioned box with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
|
||||
block-flow-direction-011 reference/block-flow-direction-001-ref inline-block and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 461dd467e43b124e96be1d4ac8ffae9494df3361 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-012 reference/block-flow-direction-001-ref inline-block and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 2df3eb21a2ece981c5168ada830b4353aa4385f5 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-013 reference/block-flow-direction-001-ref inline-block and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode c20c2f47fd7c59884b794ad025d9c47c395e6248 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-014 reference/block-flow-direction-001-ref inline-block and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode b44acfc65ec31f4ea17dd56c9e7379ec86df7ea2 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-015 reference/block-flow-direction-001-ref inline-block and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 9af49e6edee9fe3a8cc8ed1a4b61eb86e9db6a28 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-016 reference/block-flow-direction-001-ref inline-block and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 0687ecb763842c4937f50b991b135fdb61ba1a21 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-017 reference/block-flow-direction-001-ref table-cell and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 7f600cd4a4fce114a2698658b317d444af89e2b0 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that a table-cell with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
|
||||
block-flow-direction-018 reference/block-flow-direction-001-ref table-cell and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 5cc2e0394ee9fc2e8c4393d1fca9b964111413ce `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that a table-cell with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
|
||||
block-flow-direction-019 reference/block-flow-direction-001-ref table-caption and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 38faffff4ffff208f0179399778e99f7d361e62a `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that a table-caption with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
|
||||
block-flow-direction-020 reference/block-flow-direction-001-ref table-caption and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 4d431792ca25bd32b7f1afd91295cb1bce0b8e16 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that a table-caption with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
|
||||
block-flow-direction-021 reference/block-flow-direction-002-ref list and vertical-rl - block flow direction of block-level boxes ahem,image http://www.w3.org/TR/css-writing-modes-3/#writing-mode b651e390189799fd3ba5645a387bb0076143fcbd `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-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...
|
||||
block-flow-direction-022 reference/block-flow-direction-001-ref list and vertical-lr - block flow direction of block-level boxes ahem,image http://www.w3.org/TR/css-writing-modes-3/#writing-mode b5558106d1fd33be280c620b17a771f8b8b04561 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-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...
|
||||
block-flow-direction-023 reference/block-flow-direction-001-ref vertical-lr - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 47ff826dfb1a902d348cc85684500d3213eca3a0 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-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...
|
||||
block-flow-direction-024 reference/block-flow-direction-002-ref vertical-rl - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode dd2c95409479bbec764e167cd07fe185d8677107 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-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...
|
||||
block-flow-direction-005 reference/block-flow-direction-001-ref 'float: left' and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 19d6c862abd4bbb497a79b7854ff36a92e359bb9 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that a left-floated box with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
|
||||
block-flow-direction-006 reference/block-flow-direction-001-ref 'float: left' and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 69944fcf1c68c9d9601789ff315ebfff67af335f `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that left-floated boxes with 'writing-mode' set to 'vertical-rl' establish block formating contexts with a right-to-left block flow direction.
|
||||
block-flow-direction-007 reference/block-flow-direction-002-ref 'float: right' and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 5762555012033e263d15589c1761c7f162522cf6 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that a right-floated box with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
|
||||
block-flow-direction-008 reference/block-flow-direction-002-ref 'float: right' and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 3aced69861609275f621ac3fb95ad5447670e790 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that right-floated boxes with 'writing-mode' set to 'vertical-lr' establish block formating contexts with a left-to-right block flow direction.
|
||||
block-flow-direction-009 reference/block-flow-direction-001-ref position absolute and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode a54cced47078b3a68d3eb38dfa7fc2acc31e4985 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that an absolutely positioned box with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
|
||||
block-flow-direction-010 reference/block-flow-direction-001-ref position absolute and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 92cc02cb3b4ad46fed8890ec471e4a95daebfd51 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that an absolutely positioned box with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
|
||||
block-flow-direction-011 reference/block-flow-direction-001-ref inline-block and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 00641510869b1e4ae2e4f11100696408b80bdf7f `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-012 reference/block-flow-direction-001-ref inline-block and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode dcd7145988194f22139d18ff39769a279dc69930 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-013 reference/block-flow-direction-001-ref inline-block and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 11e9fff1bccd00695d7199c7cc4b3a747c423b31 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-014 reference/block-flow-direction-001-ref inline-block and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode d381dd732d4cb52cad4c95278dc064b07c07745c `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-015 reference/block-flow-direction-001-ref inline-block and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 0ad39ff63db30d1857570edd044ab52330df0842 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-016 reference/block-flow-direction-001-ref inline-block and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode dc77235c2c9b519a945f9e4aacaa4a97ec8d878c `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-017 reference/block-flow-direction-001-ref table-cell and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode b754020995f81dd4bdc7724a11d3e5627bd4635a `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that a table-cell with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
|
||||
block-flow-direction-018 reference/block-flow-direction-001-ref table-cell and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode b4846a278087e245afa7906739ebc29bd064b0c3 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that a table-cell with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
|
||||
block-flow-direction-019 reference/block-flow-direction-001-ref table-caption and 'vertical-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode d9411cf53b2d5939eba25f07d0df0e5dac4f4975 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that a table-caption with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
|
||||
block-flow-direction-020 reference/block-flow-direction-001-ref table-caption and 'vertical-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 9ee8ac4727f563cb12230fdeca50995ee079f05d `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that a table-caption with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
|
||||
block-flow-direction-021 reference/block-flow-direction-002-ref list and vertical-rl - block flow direction of block-level boxes ahem,image http://www.w3.org/TR/css-writing-modes-3/#writing-mode 26cfe2621ebbba3fc203d83162c2d82d366f718d `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-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...
|
||||
block-flow-direction-022 reference/block-flow-direction-001-ref list and vertical-lr - block flow direction of block-level boxes ahem,image http://www.w3.org/TR/css-writing-modes-3/#writing-mode 1ded5744a815d3f8a7a92507ea990296d6a6b097 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-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...
|
||||
block-flow-direction-023 reference/block-flow-direction-001-ref vertical-lr - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 798374964b006150956da1e531b9b8dc193c6d2e `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-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...
|
||||
block-flow-direction-024 reference/block-flow-direction-002-ref vertical-rl - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 615663a35f0f8883842a5bcbf77cf8e788fbdc48 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-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...
|
||||
block-flow-direction-025 reference/block-flow-direction-025-ref writing mode of document - horizontal position of first block image http://www.w3.org/TR/css-writing-modes-3/#writing-mode,http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#block-formatting 6b3673477ab3c066dec96f347d5c1f6aaafc0622 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that, when 'writing-mode' value of the root element is set to 'vertical-rl', then its block boxes are laid out leftwardedly (from right to left) one after the other beginning at its righthand side.
|
||||
block-flow-direction-042 reference/block-flow-direction-002-ref sideways-rl - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode df94875e12886f6dc69caf83f9753f9e854de4ca `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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...
|
||||
block-flow-direction-043 reference/block-flow-direction-043-ref sideways-lr - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode d620513327a1baf327a3a34c8a2cf6e3fbd25f68 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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...
|
||||
block-flow-direction-045 reference/block-flow-direction-001-ref 'float: left' and 'sideways-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode cb0b9aa5f9924a5c63a1b29f5f0ac7b99fbf97b1 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-046 reference/block-flow-direction-001-ref 'float: left' and 'sideways-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode bc17e76d85e2e708fb04751460b57a60ce5c0a86 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-047 reference/block-flow-direction-002-ref 'float: right' and 'sideways-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 6ab3fc6d4944e8a48966ffaa85142b9b19468617 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-048 reference/block-flow-direction-002-ref 'float: right' and 'sideways-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 2b2a96a6cb128b020a40650a17603b9ed9a1efa7 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-049 reference/block-flow-direction-001-ref position absolute and 'sideways-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode fb772f83f079e3a9320d1a93246f6e34b99e9267 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-050 reference/block-flow-direction-001-ref position absolute and 'sideways-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode a6ff9d8832f3a99a1a890745066e7d8988911ea4 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-051 reference/block-flow-direction-001-ref inline-block and 'sideways-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 1b211d57083d0e48effa803b3740386763b47a83 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-052 reference/block-flow-direction-001-ref inline-block and 'sideways-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 200e1135bd938e8c1884b482831da93745ce205b `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-053 reference/block-flow-direction-001-ref inline-block and 'sideways-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 51069f50da4611b4937f16d27e7632d6af6b9182 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-054 reference/block-flow-direction-001-ref inline-block and 'sideways-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 77529af0b060562d96c95e9ba69d5b027ebf0ea3 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-055 reference/block-flow-direction-001-ref inline-block and 'sideways-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 41718dc593a80f58ead3335ee8741c44948938df `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-056 reference/block-flow-direction-001-ref inline-block and 'sideways-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 35282509954f2e32b8e2d08f01c769b2c6ccfae6 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-057 reference/block-flow-direction-001-ref table-cell and 'sideways-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 0f660ee8f6d45c27f3cb0b303a2782fcbb0f8405 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-058 reference/block-flow-direction-001-ref table-cell and 'sideways-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 141e410db8a069da0026072d00aa78275580965f `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-059 reference/block-flow-direction-001-ref table-caption and 'sideways-rl' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode dcbac90bb1e96e626d0c0c0766971df2d2455b6a `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-060 reference/block-flow-direction-001-ref table-caption and 'sideways-lr' - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 32411bf7a80af4400d47a685ffea28e86f4ca544 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-061 reference/block-flow-direction-002-ref list and sideways-rl - block flow direction of block-level boxes ahem,image http://www.w3.org/TR/css-writing-modes-3/#writing-mode f24099feb05a2d8860e9c2e8a5b4adff52f9c6c5 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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...
|
||||
block-flow-direction-062 reference/block-flow-direction-043-ref list and sideways-lr - block flow direction of block-level boxes ahem,image http://www.w3.org/TR/css-writing-modes-3/#writing-mode 4790f1a71d513e51935cfa8e6f4d5ae8df8ade46 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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...
|
||||
block-flow-direction-063 reference/block-flow-direction-043-ref sideways-lr - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 1f3ef0d5b047336ae444f036209e66fde393ffd3 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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...
|
||||
block-flow-direction-064 reference/block-flow-direction-002-ref sideways-rl - block flow direction of block-level boxes ahem http://www.w3.org/TR/css-writing-modes-3/#writing-mode 4ce9e308161754d6f5293e0d28b94f8316f5caca `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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...
|
||||
block-flow-direction-065 reference/block-flow-direction-025-ref writing mode (sideways-rl) of document - horizontal position of first block image http://www.w3.org/TR/css-writing-modes-3/#writing-mode,http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#block-formatting 023ff8747304789a30ff10a1bca125ec74d665db `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-flow-direction-066 reference/block-flow-direction-066-ref writing mode (sideways-lr) of document - horizontal position of first block image http://www.w3.org/TR/css-writing-modes-3/#writing-mode,http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#block-formatting 172e1587f1d5af4a41e87f5010fa2046053ba0c6 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> 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.
|
||||
block-override-001 reference/block-override-001 direction: div override rtl http://www.w3.org/TR/css-writing-modes-3/#text-direction c9f01a298fdc3c1c6eaceefc08c1f134078a0c61 `Richard Ishida`<mailto:ishida@w3.org> If unicode-bidi:bidi-override is applied to a block element, characters are displayed strictly in sequence according to the direction property.
|
||||
block-override-002 reference/block-override-002 direction: div override ltr http://www.w3.org/TR/css-writing-modes-3/#text-direction 1c72e7aa6e1d313b0e23b11e9e637b1f77dd39f4 `Richard Ishida`<mailto:ishida@w3.org> If unicode-bidi:bidi-override is applied to a block element, characters are displayed strictly in sequence according to the direction property.
|
||||
block-override-003 reference/block-override-003 direction: div direction ltr http://www.w3.org/TR/css-writing-modes-3/#text-direction 2cb8aa89ffc3dba127564bb84e4bdb28bd208d26 `Richard Ishida`<mailto:ishida@w3.org> If unicode-bidi:bidi-override is applied to a block element with no direction value set, characters are displayed strictly in sequence, in ltr order.
|
||||
|
|
@ -671,10 +695,13 @@ orthogonal-parent-shrink-to-fit-001u Shrink-to-fit table-cell with a child of o
|
|||
orthogonal-parent-shrink-to-fit-001v Shrink-to-fit table-cell with a child of orthogonal inline in inline-block ahem,script http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows 85976e84a05546df77e17c38ea94e8166b5ad54d `Koji Ishii`<mailto:kojiishi@gmail.com> Shrink-to-fit table-cell with a child of orthogonal inline in inline-block
|
||||
orthogonal-parent-shrink-to-fit-001w Shrink-to-fit table-cell with a child of orthogonal block with borders in inline-block ahem,script http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows 42a695a9c6f4336a806d7ee4cc4fee15c1221e76 `Koji Ishii`<mailto:kojiishi@gmail.com> Shrink-to-fit table-cell with a child of orthogonal block with borders in inline-block
|
||||
orthogonal-parent-shrink-to-fit-001x Shrink-to-fit table-cell with a child of orthogonal inline with borders in inline-block ahem,script http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows 7cee4685013bbd4ae5c8d547e28661c88967e548 `Koji Ishii`<mailto:kojiishi@gmail.com> Shrink-to-fit table-cell with a child of orthogonal inline with borders in inline-block
|
||||
outline-inline-block-vrl-006 reference/outline-inline-block-vrl-006 outline layout and inline-block and vertical-rl writing-mode ahem http://www.w3.org/TR/css-writing-modes-3/#vertical-layout,http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines 8e4288e8f27ab96c2cf1df2d52d7e8c1d93d9318 `Koji Ishii`<mailto:kojiishi@gmail.com>
|
||||
outline-inline-slr-005 outline layout and non-replaced inline in sideways-lr writing-mode http://www.w3.org/TR/css-writing-modes-3/#vertical-layout,http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines feefed7bb113e47f3bbb347eec4dac1a3f9310ec `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/>
|
||||
outline-inline-srl-004 outline layout and non-replaced inline and sideways-rl writing-mode http://www.w3.org/TR/css-writing-modes-3/#vertical-layout,http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines 78586049cea376c528cb91f51fb496b83c9ad4d1 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/>
|
||||
outline-inline-vlr-003 outline layout and non-replaced inline in vertical-lr writing-mode http://www.w3.org/TR/css-writing-modes-3/#vertical-layout,http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines aa78e4d2270903852d387b3d25cc21a7af73d8a9 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/>
|
||||
outline-inline-vlr-006 reference/outline-inline-vlr-006 outline layout and non-replaced inline and vertical-lr writing-mode ahem http://www.w3.org/TR/css-writing-modes-3/#vertical-layout,http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines ceeb41816beb13ced78157d67b074a3296998c4d `Koji Ishii`<mailto:kojiishi@gmail.com>
|
||||
outline-inline-vrl-002 outline layout and non-replaced inline and vertical-rl writing-mode http://www.w3.org/TR/css-writing-modes-3/#vertical-layout,http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines 74c5379d6fd8c46ca528d9f91df735b584cb9a55 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/>
|
||||
outline-inline-vrl-006 reference/outline-inline-vrl-006 outline layout and non-replaced inline and vertical-rl writing-mode ahem http://www.w3.org/TR/css-writing-modes-3/#vertical-layout,http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines 9d51bfd03596b89289a8ed3012654e9df32b40d3 `Koji Ishii`<mailto:kojiishi@gmail.com>
|
||||
padding-vlr-005 reference/margin-vrl-002-ref padding in 'vertical-lr' writing-mode context image http://www.w3.org/TR/css-writing-modes-3/#vertical-layout 4c16042900e00793d562c3b4f5c39a3df16b1f95 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that padding-left, padding-right, padding-top and padding-bottom do not change in vertical writing-mode. The padding-left property of a box still affects the lefthand padding of such box.
|
||||
padding-vrl-004 reference/margin-vrl-002-ref padding in 'vertical-rl' writing-mode context image http://www.w3.org/TR/css-writing-modes-3/#vertical-layout 43a0740c77fa25671e5831c88555b884e75216ee `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that padding-left, padding-right, padding-top and padding-bottom do not change in vertical writing-mode. The padding-left property of a box still affects the lefthand padding of such box.
|
||||
page-flow-direction-002 'writing-mode: vertical-rl' - default page flow (progression) direction image,paged http://www.w3.org/TR/css-writing-modes-3/#writing-mode 517eb88ec0066fc5b6f14a1602fa5383364ecb3c `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that when 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is right-to-left.
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,23 +14,29 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,22 +14,25 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,23 +14,29 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,22 +14,25 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,29 +14,35 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,29 +14,35 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,36 +10,45 @@
|
|||
<link rel="match" href="reference/block-flow-direction-001-ref.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,38 +10,41 @@
|
|||
<link rel="match" href="reference/block-flow-direction-001-ref.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,35 +10,41 @@
|
|||
<link rel="match" href="reference/block-flow-direction-001-ref.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,36 +10,45 @@
|
|||
<link rel="match" href="reference/block-flow-direction-001-ref.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,31 +10,34 @@
|
|||
<link rel="match" href="reference/block-flow-direction-001-ref.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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 C D E FFFF </span>
|
||||
<!-- The "P" --> <span>AAAAAAA B C D E FFFF </span>
|
||||
|
||||
<!-- The "A" --> <span>GGGGGGG H J K L MMMMMMM</span>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,35 +10,41 @@
|
|||
<link rel="match" href="reference/block-flow-direction-001-ref.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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.xht" />
|
||||
|
|
@ -18,28 +14,34 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,28 +14,34 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,28 +14,34 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,28 +14,34 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@
|
|||
|
||||
<style type="text/css"><![CDATA[
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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 BBBB</div>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <div>C D E</div>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <div>F G H</div>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ K</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of left-most "S" --> <div class="right-border">L MMMM</div>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <div>Q R S</div>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <div>T U V</div>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <div>WWWW X</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
|
||||
|
||||
<!-- The 2nd right-most line of "A" --> <div>Z a </div>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <div>b c </div>
|
||||
|
||||
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "P" --> <div class="right-border">eeee </div>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <div>f g </div>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <div>h j </div>
|
||||
|
||||
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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> B C</div>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <div> D E</div>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <div> FFFF</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <div> H J</div>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <div> K 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 QQQQ</div>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <div>R S T</div>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <div>U V W</div>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <div>XXXX Y</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <div class="left-border">a bbbb</div>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <div>c d e</div>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <div>f g h</div>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj k</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: '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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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 BBBB</div>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <div>C D E</div>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <div>F G H</div>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ K</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of left-most "S" --> <div class="right-border">L MMMM</div>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <div>Q R S</div>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <div>T U V</div>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <div>WWWW X</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
|
||||
|
||||
<!-- The 2nd right-most line of "A" --> <div>Z a </div>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <div>b c </div>
|
||||
|
||||
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "P" --> <div class="right-border">eeee </div>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <div>f g </div>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <div>h j </div>
|
||||
|
||||
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: '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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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 </div>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <div>f g </div>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <div>h j </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 a </div>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <div>b c </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 MMMM</div>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <div>Q R S</div>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <div>T U V</div>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <div>WWWW X</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="floated-left" id="right-border">
|
||||
|
||||
<!-- The right-most line of right-most "S" --> <div>A BBBB</div>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <div>C D E</div>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <div>F G H</div>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ K</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: '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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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> B C</div>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <div> D E</div>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <div> FFFF</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <div> H J</div>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <div> K 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 QQQQ</div>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <div>R S T</div>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <div>U V W</div>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <div>XXXX Y</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <div class="left-border">a bbbb</div>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <div>c d e</div>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <div>f g h</div>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj k</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: '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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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 bbbb</div>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <div>c d e</div>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <div>f g h</div>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <div>jjjj k</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="floated-right">
|
||||
|
||||
<!-- The 1st left-most line of left-most "S" --> <div>N QQQQ</div>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <div>R S T</div>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <div>U V W</div>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <div>XXXX Y</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="floated-right">
|
||||
|
||||
<!-- The left-most line of "A" --> <div>GGGGGGG</div>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <div> H J</div>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <div> K 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> B C</div>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <div> D E</div>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <div> FFFF</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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 BBBB</div>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <div>C D E</div>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <div>F G H</div>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ K</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of left-most "S" --> <div class="right-border">L MMMM</div>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <div>Q R S</div>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <div>T U V</div>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <div>WWWW X</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
|
||||
|
||||
<!-- The 2nd right-most line of "A" --> <div>Z a </div>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <div>b c </div>
|
||||
|
||||
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "P" --> <div class="right-border">eeee </div>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <div>f g </div>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <div>h j </div>
|
||||
|
||||
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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> B C</div>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <div> D E</div>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <div> FFFF</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of "A" --> <div class="left-border">GGGGGGG</div>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <div> H J</div>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <div> K 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 QQQQ</div>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <div>R S T</div>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <div>U V W</div>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <div>XXXX Y</div>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <div class="left-border">a bbbb</div>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <div>c d e</div>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <div>f g h</div>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <div id="right-border">jjjj k</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: inline-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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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 BBBB</span>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <span>C D E</span>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <span>F G H</span>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <span>JJJJ K</span>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of left-most "S" --> <span class="right-border">L MMMM</span>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <span>Q R S</span>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <span>T U V</span>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <span>WWWW X</span>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "A" --> <span class="right-border">YYYYYYY</span>
|
||||
|
||||
<!-- The 2nd right-most line of "A" --> <span>Z a </span>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <span>b c </span>
|
||||
|
||||
<!-- The 4th right-most line of "A" --> <span>ddddddd</span>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "P" --> <span class="right-border">eeee </span>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <span>f g </span>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <span>h j </span>
|
||||
|
||||
<!-- The 4th right-most line of "P" --> <span id="left-border">kkkkkkk</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: inline-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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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 BBBB C D E F G H JJJJ K</span>
|
||||
|
||||
<!-- The left-most "S" --> <span>L MMMM Q R S T U V WWWW X</span>
|
||||
|
||||
<!-- The "A" --> <span>YYYYYYY Z a b c ddddddd</span>
|
||||
|
||||
<!-- The "P" --> <span id="left-border">eeee f g h j kkkkkkk</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: inline-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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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 </span>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <span>f g </span>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <span>h j </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 a </span>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <span>b c </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 MMMM</span>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <span>Q R S</span>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <span>T U V</span>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <span>WWWW X</span>
|
||||
|
||||
</div><div class="inline-block">
|
||||
|
||||
<!-- The right-most line of right-most "S" --> <span>A BBBB</span>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <span>C D E</span>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <span>F G H</span>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <span>JJJJ K</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: inline-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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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> B C</span>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <span> D E</span>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <span> FFFF</span>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of "A" --> <span class="left-border">GGGGGGG</span>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <span> H J</span>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <span> K 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 QQQQ</span>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <span>R S T</span>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <span>U V W</span>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <span>XXXX Y</span>
|
||||
|
||||
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <span class="left-border">a bbbb</span>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <span>c d e</span>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <span>f g h</span>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <span id="right-border">jjjj k</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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 B C D E FFFF</span>
|
||||
|
||||
<!-- The "A" --> <span>GGGGGGG H J K L MMMMMMM</span>
|
||||
|
||||
<!-- The left-most "S" --> <span>N QQQQ R S T U V W XXXX Y</span>
|
||||
|
||||
<!-- The right-most "S" --> <span id="right-border">a bbbb c d e f g h jjjj k</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: inline-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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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> B C</span>
|
||||
|
||||
<!-- The 3rd left-most line of "P" --> <span> D E</span>
|
||||
|
||||
<!-- The 4th left-most line of "P" --> <span> FFFF</span>
|
||||
|
||||
</div><div class="inline-block">
|
||||
|
||||
<!-- The left-most line of "A" --> <span>GGGGGGG</span>
|
||||
|
||||
<!-- The 2nd left-most line of "A" --> <span> H J</span>
|
||||
|
||||
<!-- The 3rd left-most line of "A" --> <span> K 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 QQQQ</span>
|
||||
|
||||
<!-- The 2nd left-most line of left-most "S" --> <span>R S T</span>
|
||||
|
||||
<!-- The 3rd left-most line of left-most "S" --> <span>U V W</span>
|
||||
|
||||
<!-- The 4th left-most line of left-most "S" --> <span>XXXX Y</span>
|
||||
|
||||
</div><div class="inline-block">
|
||||
|
||||
<!-- The left-most line of right-most "S" --> <span>a bbbb</span>
|
||||
|
||||
<!-- The 2nd left-most line of right-most "S" --> <span>c d e</span>
|
||||
|
||||
<!-- The 3rd left-most line of right-most "S" --> <span>f g h</span>
|
||||
|
||||
<!-- The 4th left-most line of right-most "S" --> <span id="right-border">jjjj k</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>CSS Writing Modes Test: 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.xht" />
|
||||
|
||||
<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"><![CDATA[
|
||||
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 BBBB</div>
|
||||
|
||||
<!-- The 2nd right-most line of right-most "S" --> <div>C D E</div>
|
||||
|
||||
<!-- The 3rd right-most line of right-most "S" --> <div>F G H</div>
|
||||
|
||||
<!-- The 4th right-most line of right-most "S" --> <div>JJJJ K</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of left-most "S" --> <div class="right-border">L MMMM</div>
|
||||
|
||||
<!-- The 2nd right-most line of left-most "S" --> <div>Q R S</div>
|
||||
|
||||
<!-- The 3rd right-most line of left-most "S" --> <div>T U V</div>
|
||||
|
||||
<!-- The 4th right-most line of left-most "S" --> <div>WWWW X</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "A" --> <div class="right-border">YYYYYYY</div>
|
||||
|
||||
<!-- The 2nd right-most line of "A" --> <div>Z a </div>
|
||||
|
||||
<!-- The 3rd right-most line of "A" --> <div>b c </div>
|
||||
|
||||
<!-- The 4th right-most line of "A" --> <div>ddddddd</div>
|
||||
|
||||
|
||||
|
||||
<!-- The right-most line of "P" --> <div class="right-border">eeee </div>
|
||||
|
||||
<!-- The 2nd right-most line of "P" --> <div>f g </div>
|
||||
|
||||
<!-- The 3rd right-most line of "P" --> <div>h j </div>
|
||||
|
||||
<!-- The 4th right-most line of "P" --> <div id="left-border">kkkkkkk</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue