Status: FAIL | Duration: 12ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi
/css/CSS2/positioning/absolute-non-replaced-width-027.xht
<!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="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>
/css/CSS2/reference/ref-filled-green-100px-square.xht
<!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 Reftest Reference</title> <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <style type="text/css"><![CDATA[ div { background-color: green; height: 100px; width: 100px; } ]]></style> </head> <body> <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> <div></div> </body> </html>