inlines-dynamic.https.html (1425B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Layout API: Dynamic blockification of inline children</title> 4 <link rel="author" href="mailto:obrufau@igalia.com" title="Oriol Brufau"> 5 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children" title="4.1. Layout Children"> 6 <meta name="assert" content="This test checks that inline children are correctly blockified or unblockified when the display of the parent changes dynamically." /> 7 8 <style> 9 #wrapper { 10 display: layout(foo); 11 } 12 #test { 13 display: inline; 14 } 15 </style> 16 17 <div id="wrapper"> 18 <div id="test">Lorem ipsum</div> 19 </div> 20 21 <script src="/resources/testharness.js"></script> 22 <script src="/resources/testharnessreport.js"></script> 23 <script src="/common/worklet-reftest.js"></script> 24 <script> 25 promise_test(async function() { 26 await importWorklet(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); 27 28 const wrapper = document.getElementById("wrapper"); 29 const test = document.getElementById("test"); 30 31 assert_equals(getComputedStyle(test).display, "block", "The child should have been blockified by the custom layout"); 32 33 wrapper.style.display = "block"; 34 assert_equals(getComputedStyle(test).display, "inline", "The child should no longer be blockified in block layout"); 35 36 wrapper.style.display = ""; 37 assert_equals(getComputedStyle(test).display, "block", "The child should have been blockified again"); 38 }); 39 </script>