mirror of
https://github.com/servo/servo
synced 2026-05-05 06:32:13 +02:00
114 lines
3.4 KiB
HTML
114 lines
3.4 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
<title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</title>
|
|
<style type="text/css">
|
|
@page { font: italic 8pt sans-serif; color: gray;
|
|
margin: 7%;
|
|
counter-increment: page;
|
|
@top-left { content: "CSS Writing Modes Module Level 3 CR Test Suite"; }
|
|
@top-right { content: "Test abs-pos-non-replaced-vrl-028"; }
|
|
@bottom-right { content: counter(page); }
|
|
}
|
|
</style>
|
|
|
|
<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" />
|
|
|
|
<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"><![CDATA[
|
|
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> |