inflow.https.html (1483B)
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="inflow-ref.html"> 5 <meta name="assert" content="This test checks that min/max-block-size constraints are applied correctly to a layout()." /> 6 7 <style> 8 .test { 9 margin: 20px 0; 10 background: red; 11 } 12 13 @supports (display: layout(block-size-100)) { 14 .test { 15 display: layout(block-size-100); 16 background: green; 17 } 18 } 19 20 .width-100 { 21 width: 100px; 22 writing-mode: horizontal-tb; 23 } 24 25 .height-100 { 26 height: 100px; 27 writing-mode: vertical-rl; 28 } 29 </style> 30 <script src="/common/reftest-wait.js"></script> 31 <script src="/common/worklet-reftest.js"></script> 32 33 <!-- 100px x 100px --> 34 <div class="test width-100"></div> 35 36 <!-- 100px x 150px --> 37 <div class="test width-100" style="min-height: 150px"></div> 38 39 <!-- 100px x 50px --> 40 <div class="test width-100" style="max-height: 50px"></div> 41 42 <!-- 100px x 100px --> 43 <div class="test height-100"></div> 44 45 <!-- 150px x 100px --> 46 <div class="test height-100" style="min-width: 150px"></div> 47 48 <!-- 50px x 100px --> 49 <div class="test height-100" style="max-width: 50px"></div> 50 51 <script id="code" type="text/worklet"> 52 registerLayout('block-size-100', class { 53 async intrinsicSizes() {} 54 async layout() { 55 return {autoBlockSize: 100}; 56 } 57 }); 58 </script> 59 60 <script> 61 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); 62 </script> 63 </html>