<!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:[email protected]" />
<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="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>
Codebase Browser
chromium