before-after.https.html (975B)
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 boxes created by ::before/::after appear as children." /> 6 7 <style> 8 .test { 9 --child-expected: ["1", "2", "3"]; 10 11 background: red; 12 width: 100px; 13 } 14 15 .test::before { 16 visibility: hidden; 17 content: 'before'; 18 --child: 1; 19 } 20 21 .inflow { 22 visibility: hidden; 23 --child: 2; 24 } 25 26 .test::after { 27 visibility: hidden; 28 content: 'after'; 29 --child: 3; 30 } 31 32 @supports (display: layout(test)) { 33 .test { 34 background: green; 35 display: layout(test); 36 } 37 } 38 </style> 39 <script src="/common/reftest-wait.js"></script> 40 <script src="/common/worklet-reftest.js"></script> 41 42 <div class="test"> 43 <div class="inflow"></div> 44 </div> 45 46 <script> 47 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); 48 </script>