box-tree-registered.https.html (1648B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-api-box-tree"> 4 <link rel="match" href="box-tree-registered-ref.html"> 5 <meta name="assert" content="This test checks that a registered layout() has children which are blockified and new formatting contexts." /> 6 <style> 7 @supports (display: layout(registered)) { 8 .test { 9 display: layout(registered); 10 } 11 } 12 13 .container { 14 margin: 20px 0; 15 border: solid 2px; 16 width: 100px; 17 } 18 19 .float { 20 float: left; 21 width: 50%; 22 height: 50px; 23 } 24 25 .pink { 26 background: hotpink; 27 } 28 </style> 29 <script src="/common/reftest-wait.js"></script> 30 <script src="/common/worklet-reftest.js"></script> 31 32 <div class="container"> 33 <!-- This tests that the "layout()" grandchildren floats within the don't interact with each other. --> 34 <div class="test"> 35 <div class="inflow"> 36 <div class="float pink"></div> 37 </div> 38 <div class="inflow"> 39 <div class="float pink"></div> 40 </div> 41 </div> 42 </div> 43 44 <div class="container"> 45 <!-- This tests that the "layout()" children margins interact as if they are new formatting contexts. --> 46 <div class="test"> 47 <div class="inflow pink"> 48 <div style="margin-bottom: 50px;"></div> 49 </div> 50 <div class="inflow pink"> 51 <div style="margin-top: 50px;"></div> 52 </div> 53 </div> 54 </div> 55 56 <script id="code" type="text/worklet"> 57 registerLayout('registered', class { 58 async intrinsicSizes() {} 59 async layout() { throw Error(); } 60 }); 61 </script> 62 63 <script> 64 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); 65 </script> 66 </html>