Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(84)

Side by Side Diff: third_party/WebKit/LayoutTests/fast/block/float/display-flow-root-001.html

Issue 2620623002: Implement display:flow-root (Closed)
Patch Set: bug 672508 Created 3 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
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/sh ow_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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698