display-flow-root-list-item-001.html (1675B)
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 list-item</title> 9 <link rel="author" title="Mats Palmgren" href=""> 10 <link rel="help" href="https://drafts.csswg.org/css-display-3/#list-items"> 11 <link rel="match" href="display-flow-root-list-item-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 body { padding-left: 100px; } 18 19 .float { 20 float: left; 21 width: 20px; 22 height: 40px; 23 background: pink; 24 } 25 26 .li { display: flow-root list-item; } 27 </style> 28 </head> 29 <body> 30 31 <div style="border:1px solid"> 32 <!-- this tests that the flow-root margins don't collapse with its children. --> 33 <span class="li" style="margin: 20px 0"> 34 <div style="margin: 20px 0">x</div> 35 </span> 36 </div> 37 38 <div style="border:1px solid"> 39 <!-- this tests that the flow-root grows to fit child floats --> 40 <span class="li"><div class="float"></div></span> 41 </div> 42 43 <div style="border:1px solid; margin-bottom:20px"> 44 <!-- this tests that a float does not intrude into flow-root box --> 45 <div class="float"></div> 46 <span class="li" style="border:1px solid">x</span> 47 </div> 48 49 <span> 50 <!-- this tests that a flow-root box is constructed also in the "ibsplit" case --> 51 <span class="li" style="background:grey;"><div style="margin:20px">x</div></span> 52 </span> 53 54 <span class="li" style="border:3px solid; height:10px;"> 55 <!-- this tests that a flow-root fills the available width, and that 'height' applies --> 56 </span> 57 58 </body> 59 </html>