summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/CSS2/margin-padding-clear/margin-collapse-041.xht
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/margin-padding-clear/margin-collapse-041.xht')
-rw-r--r--testing/web-platform/tests/css/CSS2/margin-padding-clear/margin-collapse-041.xht107
1 files changed, 107 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/margin-padding-clear/margin-collapse-041.xht b/testing/web-platform/tests/css/CSS2/margin-padding-clear/margin-collapse-041.xht
new file mode 100644
index 0000000000..742d93f4a6
--- /dev/null
+++ b/testing/web-platform/tests/css/CSS2/margin-padding-clear/margin-collapse-041.xht
@@ -0,0 +1,107 @@
+<!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: margin collapsing - clear with descendants margins</title>
+
+ <!--
+ Inspired by
+ http://test.csswg.org/suites/css2.1/20110323/html4/c5525-fltmult-000.htm
+ -->
+
+ <link rel="author" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <link rel="reviewer" title="Arron Eicholz" href="arronei(at)gmail.com" /> <!-- 2013-07-30 -->
+ <link rel="bookmark" href="http://lists.w3.org/Archives/Public/public-css-testsuite/2012Jan/0022.html" title="[RC6] c5525-fltmult-000 imprecise and failed by several browsers" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" title="8.3.1 Collapsing margins" />
+ <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+ <meta name="assert" content="An element on which 'clear' is set to a value other than 'none' can have its own margin-top collapse with the margin-top of its first inflow block-level child (which may also be the resulting combined margin of its own subtree of descendants) as long as no line boxes, no clearance, no padding and no border separate them." />
+
+ <style type="text/css"><![CDATA[
+ body {margin: 8px;}
+
+ p {margin: 1em 0em;}
+
+ div#overlapped-red
+ {
+ background-color: red;
+ height: 100px;
+ position: absolute;
+ width: 100px;
+ z-index: -1;
+ }
+
+ div#floated-left
+ {
+ background-color: green;
+ color: green;
+ float: left;
+ font: 1em/1.25 serif;
+ padding: 15px;
+ /*
+
+ 15px : padding-top
+ +
+ 20px : line box height
+ +
+ 15px : padding-bottom
+ =====
+ 50px
+
+ */
+ width: 70px;
+ }
+
+ div#cleared-left {clear: left;}
+
+ div#child-of-cleared-left
+ {
+ background-color: red;
+ margin-top: 50px;
+ width: 100px;
+ }
+
+ div#grandchild-of-cleared-left
+ {
+ background-color: red;
+ margin-top: 40px;
+ }
+
+ div#grand-grandchild-of-cleared-left
+ {
+ background-color: green;
+ color: green;
+ height: 50px;
+ margin-top: 30px;
+ }
+
+ /*
+ The idea is to have div#cleared-left's margin-top collapse
+ with div#child-of-clear-left's margin-top. The margin
+ collapsing of margin-tops of descendants of div#cleared-left
+ should occur before calculating clearance.
+ */
+ ]]></style>
+
+ </head>
+
+ <body>
+
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="overlapped-red"></div>
+
+ <div id="floated-left">flt lft</div>
+
+ <div id="cleared-left">
+ <div id="child-of-cleared-left">
+ <div id="grandchild-of-cleared-left">
+ <div id="grand-grandchild-of-cleared-left">ggchld</div>
+ </div>
+ </div>
+ </div>
+
+ </body>
+</html> \ No newline at end of file