child-size-contribution.https.html (1331B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#intrinsic-sizes"> 4 <link rel="match" href="child-size-01-ref.html"> 5 <meta name="assert" content="This test checks that the child intrinsicSizes returns the min/max size contributions." /> 6 <style> 7 .test { 8 background: red; 9 height: 100px; 10 width: min-content; 11 } 12 13 @supports (display: layout(parent)) { 14 .test { 15 display: layout(parent); 16 background: green; 17 } 18 } 19 </style> 20 <script src="/common/reftest-wait.js"></script> 21 <script src="/common/worklet-reftest.js"></script> 22 23 <div class="test"> 24 <div style="width: 100px;"> 25 <div style="width: 200px;"></div> 26 </div> 27 </div> 28 29 <script id="code" type="text/worklet"> 30 registerLayout('parent', class { 31 async intrinsicSizes(children, edges, styleMap) { 32 const childrenSizes = await Promise.all(children.map((child) => { 33 return child.intrinsicSizes(); 34 })); 35 36 if (childrenSizes[0].minContentSize == 100 && 37 childrenSizes[0].maxContentSize == 100) { 38 return { maxContentSize: 100, minContentSize: 50 }; 39 } 40 return { maxContentSize: 0, minContentSize: 0 }; 41 } 42 async layout() {} 43 }); 44 </script> 45 46 <script> 47 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); 48 </script> 49 </html>