child-baseline.https.html (1479B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-alignment"> 4 <link rel="match" href="../green-square-ref.html"> 5 <meta name="assert" content="This test checks that passing child baseline to a parent works correctly." /> 6 <style> 7 .test { 8 background: green; 9 padding: 0 10px; 10 width: 80px; 11 } 12 13 @supports (display: layout(parent)) { 14 .test { 15 display: layout(parent); 16 background: green; 17 } 18 19 .child { 20 display: layout(child); 21 } 22 } 23 </style> 24 <script src="/common/reftest-wait.js"></script> 25 <script src="/common/worklet-reftest.js"></script> 26 27 <div class="test"> 28 <div class="child"></div> 29 </div> 30 31 <script id="code" type="text/worklet"> 32 const BASELINE = 10; 33 34 registerLayout('parent', class { 35 async intrinsicSizes() {} 36 async layout(children) { 37 const childFragments = await Promise.all(children.map(child => child.layoutNextFragment({}))); 38 39 if (childFragments[0].baseline != BASELINE) 40 return {autoBlockSize: 0, childFragments}; 41 42 return {autoBlockSize: 100, childFragments}; 43 } 44 }); 45 46 registerLayout('child', class { 47 async intrinsicSizes() {} 48 async layout(children) { 49 const childFragments = await Promise.all(children.map(child => child.layoutNextFragment({}))); 50 return { childFragments, baseline: BASELINE } 51 } 52 }); 53 </script> 54 55 <script> 56 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); 57 </script> 58 </html>