mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab
This commit is contained in:
James Graham
parent
1a81b18b9f
commit
2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-003-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are 'auto', then the height becomes shrink-to-fit and then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
|
||||
"
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, §10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
0px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
0px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 240px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are 'auto', then the width becomes shrink-to-fit and then solve for 'right'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: auto;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
|
||||
"
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
|
||||
CSS2.1, §10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
0px : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
0px : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 240px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-007-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are 'auto', then the height becomes shrink-to-fit and then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
|
||||
"
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
0px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
0px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 240px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are 'auto', then the height becomes shrink-to-fit and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
|
||||
"
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
0px : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
0px : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 240px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are 'auto', then the width becomes shrink-to-fit and then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: auto;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
|
||||
"
|
||||
|
||||
"
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-013-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are 'auto', then the height becomes shrink-to-fit and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
|
||||
"
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
0px : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
0px : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 240px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' are 'auto' and bottom is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' are 'auto' and bottom is not 'auto', then the height becomes shrink-to-fit and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
|
||||
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-003-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width becomes shrink-to-fit and then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: auto;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
|
||||
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'height' are 'auto and 'bottom' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-013-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'height' are 'auto and 'bottom' is not 'auto', then the height becomes shrink-to-fit and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
|
||||
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'height' are 'auto and 'bottom' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'height' are 'auto and 'bottom' is not 'auto', then the height becomes shrink-to-fit and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
|
||||
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width becomes shrink-to-fit and then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: auto;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
|
||||
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-013-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height becomes shrink-to-fit and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
|
||||
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'bottom are 'auto' and 'height' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-003-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'bottom are 'auto' and 'height' is not 'auto', then set 'top' to static position and solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
160px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto', then set 'left' to the static position and then solve for 'right'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: 1em;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
160px : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
160px : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'bottom are 'auto' and 'height' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-007-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'bottom are 'auto' and 'height' is not 'auto', then set 'top' to static position and solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
160px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'bottom' are 'auto and 'height' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'bottom' to static position and solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto', then set 'right' to the static position and then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: 1em;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-013-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'bottom' to static position and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height becomes shrink-to-fit and then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width becomes shrink-to-fit and then solve for 'right'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 1em;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: auto;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
80px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
80px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-013-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height becomes shrink-to-fit and then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height becomes shrink-to-fit and then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width becomes shrink-to-fit and then solve for 'right'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 1em;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: auto;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
80px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
80px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-013-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height becomes shrink-to-fit and then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px: top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
80px: top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-003-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' is 'auto', 'width' and 'right' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
width: 1em;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
80px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-007-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-003-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left', then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
width: 1em;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
4.'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
80px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-007-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-003-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then then solve for 'height'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(solve) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed height value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' is 'auto', 'left' and 'right' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 2em;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
width: auto;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
160px : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(solve) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
80px : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed width value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-007-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then solve for 'height'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(solve) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed height value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-003-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then solve for 'height'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(solve) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed height value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' is 'auto', 'left' and 'right' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 2em;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
width: auto;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
160px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(solve) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
80px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed width value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-007-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then then solve for 'height'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(solve) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed height value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'right' is 'auto', 'left' and 'width' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 1em;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: 1em;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
80px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 160px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-013-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'right' is 'auto', 'left' and 'width' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 1em;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: 1em;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
80px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 160px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-013-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-003-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'bottom' and solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
margin-bottom: 0em;
|
||||
margin-top: 0em;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
(solve) : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are not 'auto' (overconstrained)</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are not 'auto' (overconstrained), then ignore 'right' and then solve for 'right'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 2em;
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
position: absolute;
|
||||
right: 2em;
|
||||
width: 1em;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
160px : left
|
||||
+
|
||||
0px : margin-left
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
160px : left
|
||||
+
|
||||
0px : margin-left
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-007-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'bottom' and solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
margin-bottom: 0em;
|
||||
margin-top: 0em;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
(solve) : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'top' and solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
margin-bottom: 0em;
|
||||
margin-top: 0em;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are not 'auto' and if the values are overconstrained, then ignore 'left' and then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 2em;
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
position: absolute;
|
||||
right: 2em;
|
||||
width: 1em;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
160px : left
|
||||
+
|
||||
0px : margin-left
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : left
|
||||
+
|
||||
0px : margin-left
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-013-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'top' and solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
margin-bottom: 0em;
|
||||
margin-top: 0em;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-002-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are 'auto', then the height becomes shrink-to-fit and then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
|
||||
"
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
0px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
0px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 240px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are 'auto', then the width becomes shrink-to-fit and then solve for 'right'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: auto;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
|
||||
"
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
0px : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
0px : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 240px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-006-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are 'auto', then the height becomes shrink-to-fit and then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
|
||||
"
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
0px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
0px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 240px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are 'auto', then the height becomes shrink-to-fit and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
|
||||
"
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
0px : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
0px : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 240px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are 'auto', then the width becomes shrink-to-fit and then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: auto;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
|
||||
"
|
||||
|
||||
"
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-012-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are 'auto', then the height becomes shrink-to-fit and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
|
||||
"
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
0px : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
0px : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 240px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' are 'auto' and bottom is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' are 'auto' and 'bottom' is not 'auto', then the height becomes shrink-to-fit and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
|
||||
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-003-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width becomes shrink-to-fit and then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: 2em;
|
||||
width: auto;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
|
||||
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'height' are 'auto and 'bottom' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-012-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'height' are 'auto and 'bottom' is not 'auto', then the height becomes shrink-to-fit and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
|
||||
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'height' are 'auto and 'bottom' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'height' are 'auto and 'bottom' is not 'auto', then the height becomes shrink-to-fit and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
|
||||
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width becomes shrink-to-fit and then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: 2em;
|
||||
width: auto;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
|
||||
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-012-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height becomes shrink-to-fit and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
|
||||
|
||||
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'bottom are 'auto' and 'height' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-002-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'bottom are 'auto' and 'height' is not 'auto', then set 'top' to static position and solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
160px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto', then set 'left' to the static position and then solve for 'right'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: 1em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
160px : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
160px : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top' and 'bottom are 'auto' and 'height' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-006-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'bottom are 'auto' and 'height' is not 'auto', then set 'top' to static position and solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
160px : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'bottom' are 'auto and 'height' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.xht-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'bottom' to static position and solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'left' and 'right' are 'auto' and 'width' is not 'auto', then set 'right' to the static position and then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: 1em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-012-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'bottom' to static position and then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height becomes shrink-to-fit and then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width becomes shrink-to-fit and then solve for 'right'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 1em;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: auto;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
80px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
80px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-012-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height becomes shrink-to-fit and then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height becomes shrink-to-fit and then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width becomes shrink-to-fit and then solve for 'right'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 1em;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: auto;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
80px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
80px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-012-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height becomes shrink-to-fit and then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : (shrink-to-fit) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-002-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
"
|
||||
4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' is 'auto', 'width' and 'right' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
width: 1em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
80px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-006-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-002-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left', then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
width: 1em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
4.'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
(solve) : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
80px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-006-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
(solve) : top: auto
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 160px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-002-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then then solve for 'height'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(solve) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed height value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'width' is 'auto', 'left' and 'right' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 2em;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
width: auto;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
160px : left: auto
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(solve) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
80px : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed width value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-006-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then solve for 'height'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(solve) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed height value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-002-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then solve for 'height'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(solve) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed height value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'width' is 'auto', 'left' and 'right' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 2em;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
width: auto;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
160px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(solve) : width: auto
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
80px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed width value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-006-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then then solve for 'height'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 1em;
|
||||
color: green;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
(solve) : height: auto
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
80px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed height value must be 80px.
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'right' is 'auto', 'left' and 'width' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 1em;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: 1em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
80px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 160px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-012-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'right' is 'auto', 'left' and 'width' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 1em;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
width: 1em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
80px : left
|
||||
+
|
||||
0px : margin-left: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 160px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></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: absolutely positioned non-replaced element - 'direction: rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-012-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'bottom' is 'auto' and 'top' and 'height' are not 'auto', then solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: auto;
|
||||
color: green;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
80px : top
|
||||
+
|
||||
0px : margin-top: auto
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom: auto
|
||||
+
|
||||
(solve) : bottom: auto
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 160px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-002-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'bottom' and solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
margin-bottom: 0em;
|
||||
margin-top: 0em;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
(solve) : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left', 'width' and 'right' are not 'auto' (overconstrained)</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'left', 'width' and 'right' are not 'auto' (overconstrained), then ignore 'right' and then solve for 'right'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 2em;
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
position: absolute;
|
||||
right: 2em;
|
||||
width: 1em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
160px : left
|
||||
+
|
||||
0px : margin-left
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
160px : left
|
||||
+
|
||||
0px : margin-left
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right
|
||||
+
|
||||
(solve) : right: auto
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed right value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-006-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'bottom' and solve for 'bottom'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-3row-320x320.png");
|
||||
color: transparent;
|
||||
direction: ltr;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
margin-bottom: 0em;
|
||||
margin-top: 0em;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
(solve) : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed bottom value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are not 'auto' (overconstrained)</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-004-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'top' and solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
margin-bottom: 0em;
|
||||
margin-top: 0em;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'left', 'width' and 'right' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vlr-009-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'left', 'width' and 'right' are not 'auto' and if the values are overconstrained, then ignore 'left' and then solve for 'left'.">
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-2col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
color: green;
|
||||
left: 2em;
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
position: absolute;
|
||||
right: 2em;
|
||||
width: 1em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
So:
|
||||
|
||||
160px : left
|
||||
+
|
||||
0px : margin-left
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : left
|
||||
+
|
||||
0px : margin-left
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : width
|
||||
+
|
||||
0px : padding-right
|
||||
+
|
||||
0px : border-right-width
|
||||
+
|
||||
0px : margin-right: auto
|
||||
+
|
||||
160px : right
|
||||
=====================
|
||||
320px : width of containing block
|
||||
|
||||
And so computed left value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: rtl' and 'top', 'height' and 'bottom' are not 'auto'</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<link rel="match" href="reference/abs-pos-non-replaced-vrl-012-ref.htm">
|
||||
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="When 'direction' is 'rtl' and 'top', 'height' and 'bottom' are not 'auto' and if the values are overconstrained, then ignore 'top' and solve for 'top'.">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div#containing-block
|
||||
{
|
||||
background: red url("support/bg-red-3col-2row-320x320.png");
|
||||
color: transparent;
|
||||
direction: rtl;
|
||||
font: 80px/1 Ahem;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
div#containing-block > span
|
||||
{
|
||||
background-color: red;
|
||||
bottom: 2em;
|
||||
color: green;
|
||||
height: 1em;
|
||||
margin-bottom: 0em;
|
||||
margin-top: 0em;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
"
|
||||
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
|
||||
"
|
||||
|
||||
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
|
||||
CSS2.1, § 10.3.7 Absolutely positioned, non-replaced elements
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
||||
|
||||
"
|
||||
Layout rules that refer to the *-left and *-right box properties (border, margin, padding) use *-top and *-bottom instead, and vice versa. Which side of the box the property applies to doesn't change: only which values are inputs to which layout calculations changes.
|
||||
"
|
||||
7.1 Principles of Layout in Vertical Writing Modes
|
||||
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
|
||||
|
||||
So:
|
||||
|
||||
160px : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
gives us:
|
||||
|
||||
(solve) : top
|
||||
+
|
||||
0px : margin-top
|
||||
+
|
||||
0px : border-top-width
|
||||
+
|
||||
0px : padding-top
|
||||
+
|
||||
80px : height
|
||||
+
|
||||
0px : padding-bottom
|
||||
+
|
||||
0px : border-bottom-width
|
||||
+
|
||||
0px : margin-bottom
|
||||
+
|
||||
160px : bottom
|
||||
=====================
|
||||
320px : height of containing block
|
||||
|
||||
And so computed top value must be 80px;
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled"></p>
|
||||
|
||||
<div id="containing-block">1 2 34<span>X</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Regions: Auto-height regions with vertical writing mode in auto-height flexbox</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<link href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" rel="help">
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="Test checks that auto-height regions having content with vertical writing mode are
|
||||
sized correctly when placed inside a flex container. The flowed content should be displayed as a horizontal
|
||||
green stripe." name="assert">
|
||||
<link href="reference/autoheight-regions-in-autoheight-flexbox-002-ref.htm" rel="match">
|
||||
<style>
|
||||
.content {
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
font-family: Ahem;
|
||||
flow-into: flow;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.region {
|
||||
background-color: green;
|
||||
flow-from: flow;
|
||||
}
|
||||
|
||||
.region > p {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a horizontal green stripe.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="content">
|
||||
XX<br>
|
||||
XX<br>
|
||||
XX<br>
|
||||
XX<br>
|
||||
XX
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'background-position: left top' and 'vertical-lr'</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings">
|
||||
|
||||
<meta content="image interact" name="flags">
|
||||
<meta content="This test checks that 'background-position: left top' will make background-image start at upper left corner of page (even in case there is an horizontal resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
background-color: white;
|
||||
background-image: url("support/cat.png");
|
||||
background-position: left top;
|
||||
background-repeat: repeat-x;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
margin-top: 99px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div><img src="support/pass-cdts-bg-pos-vrl-002.png" width="333" height="93" alt="Image download support must be enabled"></div>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
|
||||
Test passes if there is a row of cats
|
||||
above and if one of the cats starts
|
||||
<strong>exactly inside the top left corner</strong> of
|
||||
the page. This should remain true even
|
||||
after resizing the window.
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'background-position: left bottom' and 'vertical-lr'</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings">
|
||||
|
||||
<meta content="image interact" name="flags">
|
||||
<meta content="This test checks that 'background-position: left bottom' will make background-image start at lower right corner of page (even in case there is an horizontal resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
background-color: white;
|
||||
background-image: url("support/cat.png");
|
||||
background-position: left bottom;
|
||||
background-repeat: repeat-x;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div><img src="support/pass-cdts-bg-pos-vrl-004.png" width="397" height="95" alt="Image download support must be enabled"></div>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
|
||||
Test passes if there is a row of cats at the
|
||||
bottom of the page and if one of the cats
|
||||
starts <strong>exactly inside the top left corner</strong>
|
||||
of the page. This should remain true even
|
||||
after resizing the window.
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'background-position: right top' and 'vertical-lr'</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings">
|
||||
|
||||
<meta content="image interact" name="flags">
|
||||
<meta content="This test checks that 'background-position: right top' will make background-image start at upper right corner of page (even in case there is an horizontal resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
html
|
||||
{
|
||||
background-color: white;
|
||||
background-image: url("support/cat.png");
|
||||
background-position: right top;
|
||||
background-repeat: repeat-x;
|
||||
width: 100%;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
margin-top: 99px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div><img src="support/pass-cdts-bg-pos-vrl-006.png" width="343" height="93" alt="Image download support must be enabled"></div>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
|
||||
Test passes if there is a row of cats
|
||||
above and if one of the cats starts
|
||||
<strong>exactly inside the top right corner</strong> of
|
||||
the page. This should remain true even
|
||||
after resizing the window.
|
||||
-->
|
||||
|
||||
</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