| Index: third_party/WebKit/LayoutTests/external/wpt/css/CSS2/positioning/top-offset-percentage-002.xht
|
| diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/CSS2/positioning/top-offset-percentage-002.xht b/third_party/WebKit/LayoutTests/external/wpt/css/CSS2/positioning/top-offset-percentage-002.xht
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..fea4a2b5cac5c08302630aa8379e4ced80bbb475
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/external/wpt/css/CSS2/positioning/top-offset-percentage-002.xht
|
| @@ -0,0 +1,87 @@
|
| +<!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: position absolute - top offset percentage and inherit</title>
|
| +
|
| + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
| + <link rel="help" title="6.2.1 The 'inherit' value" href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit" />
|
| + <link rel="help" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" />
|
| + <link rel="match" href="left-offset-percentage-002-ref.xht" />
|
| +
|
| + <meta content="'top: inherit' makes the top property take the same computed value as the top property for the element's parent; in the case of a percentage value, the computed value is the specified percentage value. 'top: [percentage]' refers to height of containing block." name="assert" />
|
| + <meta content="" name="flags" />
|
| +
|
| + <style type="text/css"><![CDATA[
|
| + div {position: absolute;}
|
| +
|
| + #grand-parent-abs-pos
|
| + {
|
| + height: 400px;
|
| + width: 600px;
|
| + }
|
| +
|
| + #red-abs-pos-overlapped
|
| + {
|
| + background-color: red;
|
| + color: white;
|
| + height: 100px;
|
| + left: 300px;
|
| + top: 100px;
|
| + width: 100px;
|
| + }
|
| +
|
| + #parent-abs-pos
|
| + {
|
| + height: 0px;
|
| + left: 50%; /* 50% x 600px == 300px */
|
| + /* 'left: [percentage]' refers to width of containing block. */
|
| + top: 25%; /* 25% x 400px == 100px */
|
| + /* 'top: [percentage]' refers to height of containing block. */
|
| + width: 0px;
|
| + }
|
| +
|
| + #green-child-abs-pos-inherit-overlapping
|
| + {
|
| + background-color: green;
|
| + left: 0px;
|
| + top: inherit;
|
| + /*
|
| + =====================================
|
| + top: inherit should resolve as top: 25% because
|
| + "the property takes the same computed value as the
|
| + property for the element's parent"
|
| + CSS 2.1, section 6.2.1 The 'inherit' value
|
| + http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit
|
| + and
|
| + "Computed value: (...) if specified as a percentage, [then]
|
| + the specified [percentage] value"
|
| + http://www.w3.org/TR/CSS21/visuren.html#position-props
|
| +
|
| + So, the top offset of #green-child-abs-pos-inherit-overlapping
|
| + should be 25%, which is 25% of the height of its containing
|
| + block (#parent-abs-pos) which is 0px.
|
| + =====================================
|
| + */
|
| + height: 100px;
|
| + width: 100px;
|
| + }
|
| + ]]></style>
|
| +
|
| + </head>
|
| +
|
| + <body>
|
| +
|
| + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
| +
|
| + <div id="grand-parent-abs-pos">
|
| + <div id="red-abs-pos-overlapped">test FAILED</div>
|
| + <div id="parent-abs-pos">
|
| + <div id="green-child-abs-pos-inherit-overlapping"></div>
|
| + </div>
|
| + </div>
|
| +
|
| + </body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 2824603002:
Import css21/positioning W3C CSS Test Suite (Closed)
