mirror of
https://github.com/servo/servo.git
synced 2025-10-17 16:59:27 +01:00
113 lines
No EOL
3.5 KiB
HTML
113 lines
No EOL
3.5 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 '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> |