mirror of
https://github.com/servo/servo.git
synced 2025-06-24 00:54:32 +01:00
216 lines
No EOL
5.8 KiB
HTML
216 lines
No EOL
5.8 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>
|
|
|
|
<title>CSS Test: absolutely positioned non-replaced element - 'auto' margins, max-width and max-height</title>
|
|
|
|
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
|
<link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" />
|
|
|
|
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
|
|
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
|
|
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
|
|
|
<meta content="" name="flags" />
|
|
<meta content="If 'width' is auto and 'left' and 'right' are not 'auto', then set 'auto' values for 'margin-left' and 'margin-right' to 0 and then solve for 'width'; the tentative width may be later constrained by max-width in which case, the algorithm must be re-entered. If 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'; the tentative height may be later constrained by max-height in which case, the algorithm must be re-entered." name="assert" />
|
|
|
|
<style type="text/css"><![CDATA[
|
|
div#rel-pos-container
|
|
{
|
|
background-color: green;
|
|
height: 100px;
|
|
position: relative;
|
|
width: 100px;
|
|
}
|
|
|
|
div#rel-pos-container > div {position: absolute;}
|
|
|
|
div#reference-red-overlapped
|
|
{
|
|
background-color: red;
|
|
height: 33px;
|
|
left: 33px;
|
|
top: 33px;
|
|
width: 33px;
|
|
}
|
|
|
|
div#test-green-overlapping
|
|
{
|
|
background-color: green;
|
|
bottom: 0;
|
|
height: auto;
|
|
left: 0;
|
|
margin: auto;
|
|
max-height: 34px;
|
|
max-width: 34px;
|
|
right: 0;
|
|
top: 0;
|
|
width: auto;
|
|
}
|
|
|
|
/*
|
|
|
|
First we set both margin-left and margin-right to 0 since
|
|
|
|
"
|
|
set 'auto' values for 'margin-left' and 'margin-right' to 0
|
|
(...)
|
|
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
|
|
"
|
|
10.3.7 Absolutely positioned, non-replaced elements
|
|
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
|
|
|
|
|
0px : left
|
|
+
|
|
0px (set) : margin-left
|
|
+
|
|
0px : border-left
|
|
+
|
|
0px : padding-left
|
|
+
|
|
(solve) : width (not constrained yet by max-width)
|
|
+
|
|
0px : padding-right
|
|
+
|
|
0px : border-right
|
|
+
|
|
0px (set) : margin-right
|
|
+
|
|
0px : right
|
|
=============
|
|
100px : width of containing block
|
|
|
|
So, (tentative) width is 100px but now we must
|
|
constrain it by computed max-width value and so we
|
|
must now re-enter the algorithm but this time,
|
|
'width' is not 'auto': therefore horizontal margins
|
|
must not be set to 0:
|
|
|
|
"
|
|
If none of the three (left, width, right) 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
|
|
"
|
|
10.3.7 Absolutely positioned, non-replaced elements
|
|
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
|
|
|
|
So:
|
|
|
|
0px : left
|
|
+
|
|
(solve) : margin-left
|
|
+
|
|
0px : border-left
|
|
+
|
|
0px : padding-left
|
|
+
|
|
34px : width (constrained by max-width)
|
|
+
|
|
0px : padding-right
|
|
+
|
|
0px : border-right
|
|
+
|
|
(solve) : margin-right
|
|
+
|
|
0px : right
|
|
=============
|
|
100px : width of containing block
|
|
|
|
Therefore, margin-left and margin-right used values are
|
|
each respectively equal to ((100px minus 34px) divided by 2) == 33px.
|
|
|
|
-----------------------------------------------
|
|
|
|
First we set both margin-top and margin-bottom to 0 since
|
|
|
|
"
|
|
5. 'height' is 'auto', 'top' and 'bottom' are not 'auto',
|
|
then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0
|
|
and solve for 'height'
|
|
"
|
|
10.6.4 Absolutely positioned, non-replaced elements
|
|
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height
|
|
|
|
0px : top
|
|
+
|
|
0px (set) : margin-top
|
|
+
|
|
0px : border-top
|
|
+
|
|
0px : padding-top
|
|
+
|
|
(solve) : height (not constrained yet by max-height)
|
|
+
|
|
0px : padding-bottom
|
|
+
|
|
0px : border-bottom
|
|
+
|
|
0px (set) : margin-bottom
|
|
+
|
|
0px : bottom
|
|
=============
|
|
100px : height of containing block
|
|
|
|
So, (tentative) height is 100px but now we must
|
|
constrain it by computed max-height value and so we
|
|
must now re-enter the algorithm but this time,
|
|
'height' is not 'auto': therefore vertical margins
|
|
must not be set to 0:
|
|
|
|
"
|
|
If none of the three (top, height, bottom) are 'auto':
|
|
If both 'margin-top' and 'margin-bottom' are 'auto',
|
|
solve the equation under the extra constraint that
|
|
the two margins get equal values.
|
|
"
|
|
10.6.4 Absolutely positioned, non-replaced elements
|
|
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height
|
|
|
|
So:
|
|
|
|
0px : top
|
|
+
|
|
(solve) : margin-top
|
|
+
|
|
0px : border-top
|
|
+
|
|
0px : padding-top
|
|
+
|
|
34px : height (constrained by max-height)
|
|
+
|
|
0px : padding-bottom
|
|
+
|
|
0px : border-bottom
|
|
+
|
|
(solve) : margin-bottom
|
|
+
|
|
0px : bottom
|
|
=============
|
|
100px : height of containing block
|
|
|
|
Therefore, margin-top and margin-bottom used values are
|
|
each respectively equal to ((100px minus 34px) divided by 2) == 33px.
|
|
|
|
*/
|
|
]]></style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
|
|
|
<div id="rel-pos-container">
|
|
|
|
<div id="reference-red-overlapped"></div>
|
|
|
|
<div id="test-green-overlapping"></div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |