mirror of
https://github.com/servo/servo.git
synced 2025-10-09 21:10:19 +01:00
111 lines
No EOL
3.2 KiB
HTML
111 lines
No EOL
3.2 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: 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> |