| Index: third_party/WebKit/LayoutTests/external/wpt/css/CSS2/positioning/absolute-non-replaced-width-027.xht
|
| diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/CSS2/positioning/absolute-non-replaced-width-027.xht b/third_party/WebKit/LayoutTests/external/wpt/css/CSS2/positioning/absolute-non-replaced-width-027.xht
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..57401d9c209c383bce532db0bd213b4dbee1f1e7
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/external/wpt/css/CSS2/positioning/absolute-non-replaced-width-027.xht
|
| @@ -0,0 +1,216 @@
|
| +<!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>
|
|
|
Chromium Code Reviews
Issue 2824603002:
Import css21/positioning W3C CSS Test Suite (Closed)
