available-inline-size-htb-htb.https.html (1962B)
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 the available inline-size of children 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 .inline-size-30 { width: 30px; } 29 30 @supports (display: layout(test)) { 31 .test { 32 background: green; 33 display: layout(test); 34 } 35 } 36 </style> 37 <script src="/common/reftest-wait.js"></script> 38 <script src="/common/worklet-reftest.js"></script> 39 40 <div class="test"> 41 <!-- As the inlines don't fit within 20px, we'll end up with two lines. --> 42 <div class="child" style="--inline-size-expected: 30; --block-size-expected: 16;"> 43 <span class="inline inline-size-10"></span> 44 <span class="inline inline-size-30"></span> 45 </div> 46 47 <!-- The single inline doesn't take up the whole 20px, so will be shrink fitted. --> 48 <div class="child" style="--inline-size-expected: 10; --block-size-expected: 8;"> 49 <span class="inline inline-size-10"></span> 50 </div> 51 52 <!-- Make sure the max-width property clamps the size. --> 53 <div class="child" style="max-width: 25px; --inline-size-expected: 25; --block-size-expected: 8;"> 54 <span class="inline inline-size-30"></span> 55 </div> 56 57 <!-- Make sure the min-width property clamps the size. --> 58 <div class="child" style="min-width: 25px; --inline-size-expected: 25; --block-size-expected: 8;"> 59 <span class="inline inline-size-10"></span> 60 </div> 61 </div> 62 63 <script> 64 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); 65 </script>