box-tree-unregistered.https.html (1586B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-api-box-tree"> 3 <link rel="match" href="box-tree-unregistered-ref.html"> 4 <meta name="assert" content="This test checks that an unregistered layout() works the same as a normal flow-root." /> 5 <style> 6 @supports (display: layout(unregistered)) { 7 .test { 8 display: layout(unregistered); 9 } 10 } 11 12 .container { 13 float: left; 14 margin: 20px 0; 15 border: solid 2px; 16 width: 100px; 17 } 18 19 .float { 20 float: left; 21 width: 100%; 22 height: 40px; 23 background: hotpink; 24 } 25 26 .inflow { 27 height: 40px; 28 background: hotpink; 29 } 30 </style> 31 32 <div class="container"> 33 <!-- This tests that the "layout()" margins don't collapse with its children. --> 34 <div class="test" style="margin: 20px 0"> 35 <div class="inflow" style="margin: 20px 0"></div> 36 </div> 37 </div> 38 39 <div class="container"> 40 <!-- This tests that the "layout()" grows to fit child floats. --> 41 <div class="test"> 42 <div class="float" style="margin: 40px 0"></div> 43 </div> 44 </div> 45 46 <div class="container"> 47 <!-- This tests that a float does not intrude into "layout()" box. --> 48 <div class="float"></div> 49 <div class="test" style="width: 100%; height: 40px; background: green;"></div> 50 </div> 51 52 <div class="container"> 53 <!-- This tests that margins in two "layout()" box children collapse as normally. --> 54 <div class="test" style="background: green;"> 55 <div style="margin:100px 0;"> 56 <div style="margin:100px 0;"></div> 57 </div> 58 <div style="margin:100px 0;"> 59 <div style="margin:100px 0;"></div> 60 </div> 61 </div> 62 </div>