fixed-inline-size.https.html (1424B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize"> 4 <link rel="match" href="../green-square-ref.html"> 5 <meta name="assert" content="This test checks that fixing the inline size of children works as expected." /> 6 7 <style> 8 .test { 9 background: red; 10 width: 100px; 11 } 12 13 .htb { 14 writing-mode: horizontal-tb; 15 visibility: hidden; 16 width: 3px; 17 height: 2px; 18 19 --fixed-inline-size: 10; 20 21 --inline-size-expected: 10; 22 --block-size-expected: 2; 23 } 24 25 .vrl { 26 writing-mode: vertical-rl; 27 visibility: hidden; 28 width: 3px; 29 height: 2px; 30 31 --fixed-inline-size: 10; 32 33 --inline-size-expected: 10; 34 --block-size-expected: 2; 35 } 36 37 @supports (display: layout(test)) { 38 .test { 39 background: green; 40 display: layout(test); 41 } 42 } 43 </style> 44 <script src="/common/reftest-wait.js"></script> 45 <script src="/common/worklet-reftest.js"></script> 46 47 <div class="test"> 48 <div class="htb"></div> 49 <div class="vrl"></div> 50 <!-- min/max-width should have no effect, fixedInlineSize wins. --> 51 <div class="htb" style="max-width: 5px;"></div> 52 <div class="vrl" style="max-width: 5px;"></div> 53 <div class="htb" style="min-width: 15px;"></div> 54 <div class="vrl" style="min-width: 15px;"></div> 55 </div> 56 57 <script> 58 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); 59 </script>