mirror of
https://github.com/servo/servo.git
synced 2025-10-14 23:40:26 +01:00
105 lines
No EOL
2.8 KiB
HTML
105 lines
No EOL
2.8 KiB
HTML
<!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> |