diff options
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-027.xht')
| -rw-r--r-- | testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-027.xht | 215 |
1 files changed, 215 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-027.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-027.xht new file mode 100644 index 0000000000..969da955af --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-027.xht @@ -0,0 +1,215 @@ +<!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>
\ No newline at end of file |