Import the css-display-3 css tests.
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-display-3 / display-flow-root-001.html
1 <!DOCTYPE HTML>
2 <!-- 
3      Any copyright is dedicated to the Public Domain.
4      http://creativecommons.org/publicdomain/zero/1.0/
5  -->
6 <html><head>
7   <meta charset="utf-8">
8   <title>CSS Display Test: display:flow-root</title>
9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322191">
10   <link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-flow-root">
11   <link rel="match" href="display-flow-root-001-ref.html">
12   <style type="text/css">
13 html,body {
14   color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
15 }
16
17 .float {
18   float: left;
19   width: 20px;
20   height: 40px;
21   background: pink;
22 }
23
24   </style>
25 </head>
26 <body>
27
28 <div style="border:1px solid">
29   <!--  this tests that the flow-root margins don't collapse with its children.  -->
30   <span style="display:flow-root; margin: 20px 0">
31     <div style="margin: 20px 0">x</div>
32   </span>
33 </div>
34
35 <div style="border:1px solid">
36   <!--  this tests that the flow-root grows to fit child floats  -->
37   <span style="display:flow-root"><div class="float"></div></span>
38 </div>
39
40 <div style="border:1px solid; margin-bottom:20px">
41   <!--  this tests that a float does not intrude into flow-root box  -->
42   <div class="float"></div>
43   <span style="display:flow-root; border:1px solid">x</span>
44 </div>
45
46 <span>
47   <!--  this tests that a flow-root box is constructed also in the "ibsplit" case  -->
48   <span style="display:flow-root; background:grey;"><div style="margin:20px">x</div></span>
49 </span>
50
51 <span style="display:flow-root; border:3px solid; height:10px;">
52   <!--  this tests that a flow-root fills the available width, and that 'height' applies  -->
53 </span>
54
55 </body>
56 </html>