mirror of
https://github.com/servo/servo.git
synced 2025-06-27 18:43:40 +01:00
82 lines
2 KiB
HTML
82 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<html class=reftest-wait>
|
|
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback">
|
|
<link rel="match" href="fallback-ref.html">
|
|
<meta name="assert" content="This test checks that a layout() class returning an invalid fragment will fallback to block layout." />
|
|
<style>
|
|
.test {
|
|
background: red;
|
|
border: solid 2px;
|
|
width: 100px;
|
|
}
|
|
|
|
.test > div {
|
|
height: 100px;
|
|
}
|
|
|
|
@supports (display: layout(bad-request)) {
|
|
.test {
|
|
display: layout(bad-request);
|
|
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-request', class {
|
|
static get inputProperties() { return ['--fail']; }
|
|
|
|
async intrinsicSizes() {}
|
|
async layout(children, _, __, styleMap) {
|
|
if (styleMap.get('--fail').toString() !== 'true') {
|
|
this.fragment = await children[0].layoutNextFragment({});
|
|
}
|
|
|
|
// Return, if the fragment is invalid (we skipped the if statement above)
|
|
// we should fallback to block layout.
|
|
return {autoBlockSize: 0, childFragments: [this.fragment]};
|
|
}
|
|
});
|
|
</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 layout 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>
|