custom-layout-container-001.https.html (1943B)
1 <!doctype html> 2 <html class=reftest-wait> 3 <title>CSS Container Queries Test: Size queries on CSS Layout API containers</title> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 5 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/"> 6 <link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <script src="/common/worklet-reftest.js"></script> 9 <style> 10 #test1 { 11 width: 400px; 12 height: 100px; 13 } 14 #outer { 15 display: inline; /* Shouldn't pass without layout api support */ 16 display: layout(half); 17 height: 100px; 18 container-type: inline-size; 19 } 20 @container (width = 400px) { 21 #inner { 22 display: inline; /* Shouldn't pass without layout api support */ 23 display: layout(half); 24 height: 100px; 25 container-type: inline-size; 26 } 27 } 28 @container (width = 200px) { 29 #green { 30 background-color: green; 31 height: 100px; 32 } 33 } 34 </style> 35 <p>Test passes if there is a filled green square.</p> 36 <div id="test1"> 37 <div id="outer"> 38 <div id="inner"> 39 <div id="green"></div> 40 </div> 41 </div> 42 </div> 43 44 <script id="code" type="text/worklet"> 45 registerLayout("half", class { 46 async intrinsicSizes() {} 47 async layout(children, edges, constraints, styleMap) { 48 const childInlineSize = constraints.fixedInlineSize / 2; 49 const childFragments = await Promise.all(children.map((child) => { 50 return child.layoutNextFragment({fixedInlineSize: childInlineSize}); 51 })); 52 53 for (let childFragment of childFragments) { 54 childFragment.inlineOffset = 0; 55 childFragment.blockOffset = 0; 56 } 57 const autoBlockSize = 100; 58 return {autoBlockSize, childFragments}; 59 } 60 }); 61 </script> 62 63 <script> 64 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById("code").textContent); 65 </script> 66 </html>