sync-layout-microtasks.https.html (1441B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback"> 4 <meta name="assert" content="This test checks running the microtask queue for a layout() class won't run the main world's microtask queue." /> 5 <style> 6 #test { 7 display: layout(child-layout); 8 width: 100px; 9 } 10 11 #test > div { 12 height: 100px; 13 } 14 </style> 15 <script src="/resources/testharness.js"></script> 16 <script src="/resources/testharnessreport.js"></script> 17 <script src="/common/worklet-reftest.js"></script> 18 19 <div id="test"> 20 <div></div> 21 </div> 22 23 <script id="code" type="text/worklet"> 24 registerLayout('child-layout', class { 25 async intrinsicSizes() {} 26 async layout([child]) { 27 const fragment = await child.layoutNextFragment(); 28 return {autoBlockSize: 50, childFragments: [fragment]}; 29 } 30 }); 31 </script> 32 33 <script> 34 promise_test(async t => { 35 if (typeof CSS.layoutWorklet === 'undefined') { 36 throw Error('CSS Layout API not supported.'); 37 } 38 39 await importWorklet(CSS.layoutWorklet, document.getElementById('code').textContent); 40 41 let resolved = false; 42 let p = Promise.resolve().then(() => { 43 resolved = true; 44 }); 45 assert_false(resolved); 46 47 // Running the layout-worklet's microtask queue shouldn't trigger the main 48 // world's microtask queue. 49 assert_equals(document.getElementById('test').clientHeight, 50); 50 assert_false(resolved); 51 52 await p; 53 assert_true(resolved); 54 }); 55 </script> 56 </html>