available-inline-size-invalid.https.html (1250B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize"> 4 <link rel="match" href="../green-square-ref.html"> 5 <meta name="assert" content="This test checks that setting an invalid available inline-size works as expected." /> 6 7 <style> 8 .test { 9 writing-mode: horizontal-tb; 10 background: red; 11 width: 100px; 12 } 13 14 .child { 15 writing-mode: horizontal-tb; 16 visibility: hidden; 17 line-height: 0; 18 19 --available-inline-size: -20; 20 } 21 22 .inline { 23 display: inline-block; 24 height: 8px; 25 } 26 27 .inline-size-10 { width: 10px; } 28 29 @supports (display: layout(test)) { 30 .test { 31 background: green; 32 display: layout(test); 33 } 34 } 35 </style> 36 <script src="/common/reftest-wait.js"></script> 37 <script src="/common/worklet-reftest.js"></script> 38 39 <div class="test"> 40 <!-- The invalid available inline-size should be clamped to zero. --> 41 <div class="child" style="--inline-size-expected: 10; --block-size-expected: 16;"> 42 <span class="inline inline-size-10"></span> 43 <span class="inline inline-size-10"></span> 44 </div> 45 </div> 46 47 <script> 48 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); 49 </script>