inlines.https.html (1381B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> 4 <link rel="match" href="../green-square-ref.html"> 5 <meta name="assert" content="This test checks that inline children are correctly blockified or wrapped in anonymous boxes." /> 6 7 <style> 8 /* We have a wrapper in this test to ensure that any text that is positioned 9 * slightly outside the "test" box doesn't affect the rendering. 10 * This wrapper has a 10px inline padding which does the trick. */ 11 .wrapper { 12 background: green; 13 padding: 0 10px; 14 width: 80px; 15 } 16 17 .test { 18 --child-expected: ["1", "default", "3", "4", "5"]; 19 20 background: red; 21 color: green; 22 width: 80px; 23 --child: default; 24 } 25 26 .inflow { 27 visibility: hidden; 28 --child: 3; 29 } 30 31 @supports (display: layout(test)) { 32 .test { 33 background: green; 34 display: layout(test); 35 } 36 } 37 </style> 38 <script src="/common/reftest-wait.js"></script> 39 <script src="/common/worklet-reftest.js"></script> 40 41 <div class="wrapper"> 42 <div class="test"> 43 <span style="--child: 1;">Text,</span> more text 44 <div class="inflow"></div> 45 <span style="--child: 4;">Text, 46 <div>block!</div> 47 </span> 48 <span style="--child: 5;">Other text</span> 49 </div> 50 </div> 51 52 <script> 53 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); 54 </script>