content-size.https.html (1110B)
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="content-size-ref.html"> 5 <meta name="assert" content="This test checks that the min-content and max-content sizes respect the values returned from the intrinsicSizes function." /> 6 7 <style> 8 .test { 9 background: red; 10 border: solid 2px; 11 height: 100px; 12 } 13 14 .test-1 { 15 width: max-content; 16 } 17 18 .test-2 { 19 width: min-content; 20 } 21 22 @supports (display: layout(test-layout)) { 23 .test { 24 display: layout(test-layout); 25 background: green; 26 } 27 } 28 </style> 29 <script src="/common/reftest-wait.js"></script> 30 <script src="/common/worklet-reftest.js"></script> 31 32 33 <div class="test test-1"></div> 34 <div class="test test-2"></div> 35 36 <script id="code" type="text/worklet"> 37 registerLayout('test-layout', class { 38 async intrinsicSizes() { 39 return { maxContentSize: 100, minContentSize: 50 }; 40 } 41 async layout() {} 42 }); 43 </script> 44 45 <script> 46 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); 47 </script> 48 </html>