mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Update web-platform-tests to revision 06f77f6bfaa86f3643a79f1ec2c49c6b6955cf18
This commit is contained in:
WPT Sync Bot
parent
1981efcc35
commit
c6c4fb2f7a
108 changed files with 2090 additions and 138 deletions
|
|
@ -0,0 +1,84 @@
|
|||
<!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 performing layout on an invalid child will fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
border: solid 2px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.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']; }
|
||||
|
||||
*intrinsicSizes() {}
|
||||
*layout(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 fragment = yield this.child.layoutNextFragment({});
|
||||
|
||||
return {autoBlockSize: 0, childFragments: [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>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!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 performing layout on an invalid fragment request 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']; }
|
||||
|
||||
*intrinsicSizes() {}
|
||||
*layout(children, _, __, styleMap) {
|
||||
if (styleMap.get('--fail').toString() !== 'true') {
|
||||
this.request = children[0].layoutNextFragment({});
|
||||
}
|
||||
|
||||
// Try to perform layout on the child. If its invalid (we skipped the if
|
||||
// statement above) we should fallback to block layout.
|
||||
const childFragments = yield [this.request];
|
||||
|
||||
return {autoBlockSize: 0, childFragments};
|
||||
}
|
||||
});
|
||||
</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>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!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']; }
|
||||
|
||||
*intrinsicSizes() {}
|
||||
*layout(children, _, __, styleMap) {
|
||||
if (styleMap.get('--fail').toString() !== 'true') {
|
||||
this.fragment = yield 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>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<meta name="assert" content="This test checks that fixing the block size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
margin: 10px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.htb {
|
||||
writing-mode: horizontal-tb;
|
||||
visibility: hidden;
|
||||
width: 3px;
|
||||
height: 2px;
|
||||
|
||||
--fixed-block-size: 10;
|
||||
|
||||
--inline-size-expected: 2;
|
||||
--block-size-expected: 10;
|
||||
}
|
||||
|
||||
.vrl {
|
||||
writing-mode: vertical-rl;
|
||||
visibility: hidden;
|
||||
width: 3px;
|
||||
height: 2px;
|
||||
|
||||
--fixed-block-size: 10;
|
||||
|
||||
--inline-size-expected: 2;
|
||||
--block-size-expected: 10;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="htb"></div>
|
||||
<div class="vrl"></div>
|
||||
<!-- min/max-width should have no effect, fixedBlockSize wins. -->
|
||||
<div class="htb" style="max-width: 5px;"></div>
|
||||
<div class="vrl" style="max-width: 5px;"></div>
|
||||
<div class="htb" style="min-width: 15px;"></div>
|
||||
<div class="vrl" style="min-width: 15px;"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedblocksize">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<meta name="assert" content="This test checks that fixing the block size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.htb {
|
||||
writing-mode: horizontal-tb;
|
||||
visibility: hidden;
|
||||
width: 3px;
|
||||
height: 2px;
|
||||
|
||||
--fixed-block-size: 10;
|
||||
|
||||
--inline-size-expected: 3;
|
||||
--block-size-expected: 10;
|
||||
}
|
||||
|
||||
.vrl {
|
||||
writing-mode: vertical-rl;
|
||||
visibility: hidden;
|
||||
width: 3px;
|
||||
height: 2px;
|
||||
|
||||
--fixed-block-size: 10;
|
||||
|
||||
--inline-size-expected: 3;
|
||||
--block-size-expected: 10;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="htb"></div>
|
||||
<div class="vrl"></div>
|
||||
<!-- min/max-height should have no effect, fixedBlockSize wins. -->
|
||||
<div class="htb" style="max-height: 5px;"></div>
|
||||
<div class="vrl" style="max-height: 5px;"></div>
|
||||
<div class="htb" style="min-height: 15px;"></div>
|
||||
<div class="vrl" style="min-height: 15px;"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<meta name="assert" content="This test checks that fixing the inline size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
margin: 10px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.htb {
|
||||
writing-mode: horizontal-tb;
|
||||
visibility: hidden;
|
||||
width: 3px;
|
||||
height: 2px;
|
||||
|
||||
--fixed-inline-size: 10;
|
||||
|
||||
--inline-size-expected: 10;
|
||||
--block-size-expected: 3;
|
||||
}
|
||||
|
||||
.vrl {
|
||||
writing-mode: vertical-rl;
|
||||
visibility: hidden;
|
||||
width: 3px;
|
||||
height: 2px;
|
||||
|
||||
--fixed-inline-size: 10;
|
||||
|
||||
--inline-size-expected: 10;
|
||||
--block-size-expected: 3;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="htb"></div>
|
||||
<div class="vrl"></div>
|
||||
<!-- min/max-height should have no effect, fixedInlineSize wins. -->
|
||||
<div class="htb" style="max-height: 5px;"></div>
|
||||
<div class="vrl" style="max-height: 5px;"></div>
|
||||
<div class="htb" style="min-height: 15px;"></div>
|
||||
<div class="vrl" style="min-height: 15px;"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<meta name="assert" content="This test checks that fixing the inline size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.htb {
|
||||
writing-mode: horizontal-tb;
|
||||
visibility: hidden;
|
||||
width: 3px;
|
||||
height: 2px;
|
||||
|
||||
--fixed-inline-size: 10;
|
||||
|
||||
--inline-size-expected: 10;
|
||||
--block-size-expected: 2;
|
||||
}
|
||||
|
||||
.vrl {
|
||||
writing-mode: vertical-rl;
|
||||
visibility: hidden;
|
||||
width: 3px;
|
||||
height: 2px;
|
||||
|
||||
--fixed-inline-size: 10;
|
||||
|
||||
--inline-size-expected: 10;
|
||||
--block-size-expected: 2;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="htb"></div>
|
||||
<div class="vrl"></div>
|
||||
<!-- min/max-width should have no effect, fixedInlineSize wins. -->
|
||||
<div class="htb" style="max-width: 5px;"></div>
|
||||
<div class="vrl" style="max-width: 5px;"></div>
|
||||
<div class="htb" style="min-width: 15px;"></div>
|
||||
<div class="vrl" style="min-width: 15px;"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import {areArraysEqual} from '/common/arrays.js';
|
||||
|
||||
function parseNumber(value) {
|
||||
const num = parseInt(value.toString());
|
||||
if (isNaN(num)) return undefined;
|
||||
return num;
|
||||
}
|
||||
|
||||
registerLayout('test', class {
|
||||
static get childInputProperties() {
|
||||
return [
|
||||
'--fixed-inline-size',
|
||||
'--fixed-block-size',
|
||||
'--inline-size-expected',
|
||||
'--block-size-expected'
|
||||
];
|
||||
}
|
||||
|
||||
*intrinsicSizes() {}
|
||||
*layout(children, edges, constraints, styleMap) {
|
||||
const childFragments = yield children.map((child) => {
|
||||
const childConstraints = {};
|
||||
const fixedInlineSize = parseNumber(child.styleMap.get('--fixed-inline-size'));
|
||||
const fixedBlockSize = parseNumber(child.styleMap.get('--fixed-block-size'));
|
||||
return child.layoutNextFragment({fixedInlineSize, fixedBlockSize});
|
||||
});
|
||||
|
||||
const actual = childFragments.map((childFragment) => {
|
||||
return {
|
||||
inlineSize: childFragment.inlineSize,
|
||||
blockSize: childFragment.blockSize,
|
||||
};
|
||||
});
|
||||
|
||||
const expected = children.map((child) => {
|
||||
return {
|
||||
inlineSize: parseInt(child.styleMap.get('--inline-size-expected').toString()),
|
||||
blockSize: parseInt(child.styleMap.get('--block-size-expected').toString()),
|
||||
};
|
||||
});
|
||||
|
||||
const equalityFunc = (a, b) => {
|
||||
return a.inlineSize == b.inlineSize && a.blockSize == b.blockSize;
|
||||
};
|
||||
|
||||
if (!areArraysEqual(expected, actual, equalityFunc)) {
|
||||
return {autoBlockSize: 0, childFragments};
|
||||
}
|
||||
|
||||
return {autoBlockSize: 100, childFragments};
|
||||
}
|
||||
});
|
||||
|
|
@ -16,9 +16,11 @@ registerLayout('test', class {
|
|||
return child.styleMap.get('--child').toString().trim();
|
||||
});
|
||||
|
||||
if (!areArraysEqual(expected, actual))
|
||||
return {autoBlockSize: 0};
|
||||
const childFragments = yield children.map((child) => { return child.layoutNextFragment({}); });
|
||||
|
||||
return {autoBlockSize: 100};
|
||||
if (!areArraysEqual(expected, actual))
|
||||
return {autoBlockSize: 0, childFragments};
|
||||
|
||||
return {autoBlockSize: 100, childFragments};
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue