child-size-02.https.html (1726B)
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-02-ref.html"> 5 <meta name="assert" content="This test checks that setting a child's intrinsicSizes does not override its min-width." /> 6 <style> 7 .test { 8 background: red; 9 height: 100px; 10 width: min-content; 11 } 12 13 .child { 14 min-width: 75px; 15 } 16 17 @supports (display: layout(parent)) { 18 .test { 19 display: layout(parent); 20 background: green; 21 } 22 23 .child { 24 display: layout(child); 25 } 26 } 27 </style> 28 <script src="/common/reftest-wait.js"></script> 29 <script src="/common/worklet-reftest.js"></script> 30 31 <div class="test"> 32 <div class="child"></div> 33 </div> 34 35 <script id="code" type="text/worklet"> 36 const MAX_CONTENT_SIZE = 100; 37 const MIN_CONTENT_SIZE = 50; 38 39 registerLayout('parent', class { 40 static get childInputProperties() { return ['min-width']; } 41 42 async intrinsicSizes(children, edges, styleMap) { 43 const childrenSizes = await Promise.all(children.map((child) => { 44 return child.intrinsicSizes(); 45 })); 46 47 if (childrenSizes[0].minContentSize == child.styleMap.get('min-width').value && 48 childrenSizes[0].maxContentSize == MAX_CONTENT_SIZE) { 49 return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE }; 50 } 51 return { maxContentSize: 0, minContentSize: 0 }; 52 } 53 async layout() {} 54 }); 55 56 registerLayout('child', class { 57 async intrinsicSizes() { 58 return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE }; 59 } 60 async layout() {} 61 }); 62 </script> 63 64 <script> 65 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); 66 </script> 67 </html>