| <!DOCTYPE html> |
| <html class=reftest-wait> |
| <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-an-intrinsic-sizes-callback"> |
| <link rel="match" href="fallback-ref.html"> |
| <meta name="assert" content="This test checks that a layout() class performing intrinsicSizes on an invalid child will fallback to block layout." /> |
| <style> |
| .test { |
| background: red; |
| border: solid 2px; |
| width: min-content; |
| } |
| |
| .test > div { |
| height: 100px; |
| } |
| |
| @supports (display: layout(bad-child-layout)) { |
| .test { |
| display: layout(bad-child-layout); |
| background: green; |
| } |
| } |
| </style> |
| <script src="/common/reftest-wait.js"></script> |
| <script src="/common/worklet-reftest.js"></script> |
| |
| <div class="test"> |
| <div></div> |
| </div> |
| |
| <script id="code" type="text/worklet"> |
| registerLayout('bad-child-layout', class { |
| static get inputProperties() { return ['--fail']; } |
| |
| async intrinsicSizes(children, _, styleMap) { |
| if (styleMap.get('--fail').toString() !== 'true') { |
| this.child = children[0]; |
| } |
| |
| // Try to perform layout on the child. If its invalid (we skipped the if |
| // statement above) we should fallback to block layout. |
| const childIntrinsicSize = await this.child.intrinsicSizes(); |
| |
| return { maxContentSize: 100, minContentSize: 100 }; |
| } |
| async layout() {} |
| }); |
| </script> |
| |
| <script> |
| function raf() { |
| return new Promise((resolve) => { |
| requestAnimationFrame(() => { |
| resolve(); |
| }); |
| }); |
| } |
| |
| (async function() { |
| if (typeof CSS.layoutWorklet === 'undefined') { |
| takeScreenshot(); |
| return; |
| } |
| |
| await importWorklet(CSS.layoutWorklet, document.getElementById('code').textContent); |
| |
| // Ensure that all instances have a child to perform an invalid intrinsic size upon. |
| const test = document.getElementsByClassName('test')[0]; |
| for (let i = 0; i < 100; i++) { |
| test.innerHTML = '<div><div>'; |
| await raf(); |
| } |
| |
| // The next layout should mean that we will fallback to block. |
| test.innerHTML = '<div></div>'; |
| test.style.setProperty('--fail', 'true'); |
| |
| // Finish up the test. |
| await raf(); |
| await raf(); |
| takeScreenshot(); |
| })(); |
| </script> |
| </html> |