negative.https.html (1134B)
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-negative-ref.html"> 5 <meta name="assert" content="This test checks that auto-block-size is correctly clamped to zero." /> 6 7 <style> 8 9 .test { 10 background: red; 11 border: solid 2px; 12 margin: 20px 0; 13 } 14 15 .width-100 { 16 width: 100px; 17 writing-mode: horizontal-tb; 18 } 19 20 .height-100 { 21 height: 100px; 22 writing-mode: vertical-rl; 23 } 24 25 @supports (display: layout(block-size-negative)) { 26 .test { 27 display: layout(block-size-negative); 28 background: green; 29 } 30 } 31 </style> 32 <script src="/common/reftest-wait.js"></script> 33 <script src="/common/worklet-reftest.js"></script> 34 35 <div class="test width-100"></div> 36 <div class="test height-100"></div> 37 38 <script id="code" type="text/worklet"> 39 registerLayout('block-size-negative', class { 40 async intrinsicSizes() {} 41 async layout() { 42 return {autoBlockSize: -100}; 43 } 44 }); 45 </script> 46 47 <script> 48 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); 49 </script> 50 </html>