floats.https.html (1281B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing"> 4 <link rel="match" href="auto-block-size-floats-ref.html"> 5 <meta name="assert" content="This test checks that if the layout() is a float, the flow layout respects the auto-block-size." /> 6 7 <style> 8 .test { 9 background: red; 10 } 11 12 @supports (display: layout(block-size-100)) { 13 .test { 14 display: layout(block-size-100); 15 background: green; 16 } 17 } 18 19 .container { 20 width: 150px; 21 border: solid 2px; 22 } 23 24 .left { 25 float: left; 26 width: 100px; 27 writing-mode: horizontal-tb; 28 } 29 30 .right { 31 float: right; 32 height: 100px; 33 writing-mode: vertical-rl; 34 } 35 </style> 36 <script src="/common/reftest-wait.js"></script> 37 <script src="/common/worklet-reftest.js"></script> 38 39 <!-- Tests that floats using an auto block size get positioned correctly. --> 40 <div class="container"> 41 <div class="left test"></div> 42 <div class="right test"></div> 43 </div> 44 45 <script id="code" type="text/worklet"> 46 registerLayout('block-size-100', class { 47 async intrinsicSizes() {} 48 async layout() { 49 return {autoBlockSize: 100}; 50 } 51 }); 52 </script> 53 54 <script> 55 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); 56 </script> 57 </html>