mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision ee82278e15570e573d87fb80179ff8231b6db61a
This commit is contained in:
WPT Sync Bot
parent
d23bc4f1a4
commit
83e2dc11b0
278 changed files with 13348 additions and 10515 deletions
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-data">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that a function can't be passed to a child layout." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@supports (display: layout(parent)) {
|
||||
.test {
|
||||
display: layout(parent);
|
||||
background: green;
|
||||
}
|
||||
|
||||
.child {
|
||||
display: layout(child);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('parent', class {
|
||||
*intrinsicSizes() {}
|
||||
*layout() {}
|
||||
*layout([child], edges, constraints, styleMap) {
|
||||
let childFragment = null;
|
||||
|
||||
try {
|
||||
childFragment = yield child.layoutNextFragment({
|
||||
data: { fn: function() {} }
|
||||
});
|
||||
} catch(e) {
|
||||
// Success! The structured cloning algorithm should have thrown an error.
|
||||
childFragment = yield child.layoutNextFragment({});
|
||||
return {autoBlockSize: 100, childFragments: [childFragment]};
|
||||
}
|
||||
|
||||
return {autoBlockSize: 0, childFragments: [childFragment]};
|
||||
}
|
||||
});
|
||||
|
||||
registerLayout('child', class {
|
||||
*intrinsicSizes() {}
|
||||
*layout() {}
|
||||
*layout() {
|
||||
return {autoBlockSize: 0};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-data">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that a SharedArrayBuffer can't be passed to a child layout." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@supports (display: layout(parent)) {
|
||||
.test {
|
||||
display: layout(parent);
|
||||
background: green;
|
||||
}
|
||||
|
||||
.child {
|
||||
display: layout(child);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('parent', class {
|
||||
*intrinsicSizes() {}
|
||||
*layout() {}
|
||||
*layout([child], edges, constraints, styleMap) {
|
||||
let childFragment = null;
|
||||
|
||||
try {
|
||||
// We need SABs to be enabled to properly run this test.
|
||||
if (typeof SharedArrayBuffer !== 'undefined') {
|
||||
childFragment = yield child.layoutNextFragment({
|
||||
data: { sab: new SharedArrayBuffer(4) }
|
||||
});
|
||||
} else {
|
||||
throw Error();
|
||||
}
|
||||
} catch(e) {
|
||||
// Success! The structured cloning algorithm should have thrown an error.
|
||||
childFragment = yield child.layoutNextFragment({});
|
||||
return {autoBlockSize: 100, childFragments: [childFragment]};
|
||||
}
|
||||
|
||||
return {autoBlockSize: 0, childFragments: [childFragment]};
|
||||
}
|
||||
});
|
||||
|
||||
registerLayout('child', class {
|
||||
*intrinsicSizes() {}
|
||||
*layout() {}
|
||||
*layout() {
|
||||
return {autoBlockSize: 0};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-data">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that passing data to a child layout works correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@supports (display: layout(parent)) {
|
||||
.test {
|
||||
display: layout(parent);
|
||||
background: green;
|
||||
}
|
||||
|
||||
.child {
|
||||
display: layout(child);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
const DATA = {
|
||||
str: 'hello',
|
||||
num: 42,
|
||||
obj: {str2: 'world'},
|
||||
};
|
||||
|
||||
registerLayout('parent', class {
|
||||
*intrinsicSizes() {}
|
||||
*layout() {}
|
||||
*layout([child], edges, constraints, styleMap) {
|
||||
|
||||
const childFragment = yield child.layoutNextFragment({data: DATA});
|
||||
|
||||
// If the child's block-size is 100 the structured cloning worked.
|
||||
if (childFragment.blockSize === 100) {
|
||||
return {autoBlockSize: 100, childFragments: [childFragment]};
|
||||
}
|
||||
|
||||
return {autoBlockSize: 0, childFragments: [childFragment]};
|
||||
}
|
||||
});
|
||||
|
||||
registerLayout('child', class {
|
||||
*intrinsicSizes() {}
|
||||
*layout() {}
|
||||
*layout(children, edges, constraints, styleMap) {
|
||||
// Use JSON.stringify to make sure the structured cloning worked.
|
||||
if (constraints.data !== DATA &&
|
||||
JSON.stringify(constraints.data) === JSON.stringify(DATA)) {
|
||||
return {autoBlockSize: 100};
|
||||
}
|
||||
|
||||
return {autoBlockSize: 0};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 20px;
|
||||
--expected-block-size: 100;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
position: absolute;
|
||||
--expected-block-size: null;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
position: relative;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 20px;
|
||||
--expected-block-size: 100;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-lr;
|
||||
background: red;
|
||||
--expected-block-size: null;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: null;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 30;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
max-height: 30px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 70;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
--expected-block-size: 100;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 60;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
--expected-block-size: 100;
|
||||
flex-basis: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 60;
|
||||
flex-basis: 60px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 50;
|
||||
margin-bottom: 10px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: null;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
--expected-block-size: 90; /* flex-item should stretch to (100 - 10)px */
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
--expected-block-size: 100;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: null;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: null; /* Percentage which we are resolving height against is indefinite. */
|
||||
width: 100px;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 30; /* flex-item should respect the max constraint */
|
||||
max-height: 30px;
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 40; /* flex-item should stretch to (50 - 10)px */
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: null;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: grid;
|
||||
grid: 50px / auto-flow;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 30; /* grid-item should respect the max constraint */
|
||||
max-height: 30px;
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: grid;
|
||||
grid: 50px / auto-flow;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 40; /* grid-item should stretch to (50 - 10)px */
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: grid;
|
||||
grid: auto-flow / 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
--expected-block-size: 100;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: null; /* Percentage which we are resolving height against is indefinite. */
|
||||
width: 100px;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
--expected-block-size: 100;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 100;
|
||||
width: 100px;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
iframe { border: none; width: 200px; height: 200px; }
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
<body>
|
||||
<script>
|
||||
// For this test we load a quirky iframe with the test file.
|
||||
// We can control the auto size of the iframe body element by setting the iframe height.
|
||||
const iframe = document.createElement('iframe');
|
||||
document.body.appendChild(iframe);
|
||||
iframe.addEventListener('load', () => {
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(
|
||||
iframe.contentWindow.CSS.layoutWorklet, {url: 'constraints-fixed-block-size.js'});
|
||||
});
|
||||
iframe.src = 'support/constraints-fixed-block-size-quirky-body-iframe.html';
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that passing something that can't be serialized to the parent triggers a fallback to block layout." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@supports (display: layout(fallback-fn)) {
|
||||
.test {
|
||||
display: layout(fallback-fn);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('fallback-fn', class {
|
||||
*intrinsicSizes() {}
|
||||
*layout() {}
|
||||
*layout(children, edges, constraints, styleMap) {
|
||||
const childFragments = yield children.map(child => child.layoutNextFragment());
|
||||
return {autoBlockSize: 0, childFragments, data: {fn: function() {}}};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutFragment#data is immutable between child layout passes." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@supports (display: layout(parent)) {
|
||||
.test {
|
||||
display: layout(parent);
|
||||
background: green;
|
||||
}
|
||||
|
||||
.child {
|
||||
display: layout(child);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('parent', class {
|
||||
*intrinsicSizes() {}
|
||||
*layout() {}
|
||||
*layout([child], edges, constraints, styleMap) {
|
||||
|
||||
const childFragment10 = yield child.layoutNextFragment({fixedInlineSize: 10});
|
||||
|
||||
// First layout data should be "10".
|
||||
if (childFragment10.data.size !== 10) {
|
||||
return {autoBlockSize: 0, childFragments: [childFragment10]};
|
||||
}
|
||||
|
||||
const childFragment20 = yield child.layoutNextFragment({fixedInlineSize: 20});
|
||||
|
||||
// Second layout data should be "20".
|
||||
if (childFragment20.data.size !== 20) {
|
||||
return {autoBlockSize: 0, childFragments: [childFragment10]};
|
||||
}
|
||||
|
||||
// First layout data should still be "10".
|
||||
if (childFragment10.data.size !== 10) {
|
||||
return {autoBlockSize: 0, childFragments: [childFragment10]};
|
||||
}
|
||||
|
||||
return {autoBlockSize: 100, childFragments: [childFragment20]};
|
||||
}
|
||||
});
|
||||
|
||||
registerLayout('child', class {
|
||||
*intrinsicSizes() {}
|
||||
*layout() {}
|
||||
*layout(children, edges, constraints, styleMap) {
|
||||
return {autoBlockSize: 10, data: {size: constraints.fixedInlineSize}};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that a SharedArrayBuffer can't be passed to the parent layout." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@supports (display: layout(fallback-sab)) {
|
||||
.test {
|
||||
display: layout(fallback-sab);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('fallback-sab', class {
|
||||
*intrinsicSizes() {}
|
||||
*layout() {}
|
||||
*layout(children, edges, constraints, styleMap) {
|
||||
const childFragments = yield children.map(child => child.layoutNextFragment());
|
||||
|
||||
if (typeof SharedArrayBuffer !== 'undefined') {
|
||||
return {autoBlockSize: 0, childFragments, data: {sab: new SharedArrayBuffer(4) }};
|
||||
} else {
|
||||
throw Error();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that passing data to a parent layout works correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@supports (display: layout(parent)) {
|
||||
.test {
|
||||
display: layout(parent);
|
||||
background: green;
|
||||
}
|
||||
|
||||
.child {
|
||||
display: layout(child);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
const DATA = {
|
||||
str: 'hello',
|
||||
num: 42,
|
||||
obj: {str2: 'world'},
|
||||
};
|
||||
|
||||
registerLayout('parent', class {
|
||||
*intrinsicSizes() {}
|
||||
*layout() {}
|
||||
*layout([child], edges, constraints, styleMap) {
|
||||
|
||||
const childFragment = yield child.layoutNextFragment();
|
||||
|
||||
// Use JSON.stringify to make sure the structured cloning worked.
|
||||
if (childFragment.data !== DATA &&
|
||||
JSON.stringify(childFragment.data) === JSON.stringify(DATA)) {
|
||||
return {autoBlockSize: 100, childFragments: [childFragment]};
|
||||
}
|
||||
|
||||
return {autoBlockSize: 0, childFragments: [childFragment]};
|
||||
}
|
||||
});
|
||||
|
||||
registerLayout('child', class {
|
||||
*intrinsicSizes() {}
|
||||
*layout() {}
|
||||
*layout(children, edges, constraints, styleMap) {
|
||||
return {autoBlockSize: 10, data: DATA};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
<style>
|
||||
.result {
|
||||
background: green;
|
||||
margin: 10px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that absolute children don't appear in the children array." />
|
||||
|
||||
<style>
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
--child-expected: ["2"];
|
||||
|
||||
background: red;
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that boxes created by ::before/::after appear as children." />
|
||||
|
||||
<style>
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
--child-expected: ["1", "2", "3"];
|
||||
|
||||
background: red;
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that fixed children don't appear in the children array." />
|
||||
|
||||
<style>
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
--child-expected: ["2"];
|
||||
|
||||
background: red;
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that float children appear in the children array." />
|
||||
|
||||
<style>
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
--child-expected: ["1", "2"];
|
||||
|
||||
background: red;
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that regular inflow children appear as children." />
|
||||
|
||||
<style>
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
--child-expected: ["1", "2"];
|
||||
|
||||
background: red;
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that inline children are correctly blockified or wrapped in anonymous boxes." />
|
||||
|
||||
<style>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
.wrapper {
|
||||
background: green;
|
||||
padding: 0 10px;
|
||||
margin: 10px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that text children are correctly blockified." />
|
||||
|
||||
<style>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
.wrapper {
|
||||
background: green;
|
||||
padding: 0 10px;
|
||||
margin: 10px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: horizontal-tb;
|
||||
background: red;
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: horizontal-tb;
|
||||
background: red;
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
margin: 10px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
|
||||
<link rel="match" href="layout-child-ref.html">
|
||||
<link rel="match" href="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
margin: 10px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
<!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">
|
||||
<link rel="match" href="green-square-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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<!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">
|
||||
<link rel="match" href="green-square-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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
<!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">
|
||||
<link rel="match" href="green-square-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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<!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">
|
||||
<link rel="match" href="green-square-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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
--expected-block-size: 200;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
body {
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- In Quirks mode, we should stretch to 100% of the inital containing block. -->
|
||||
<body>
|
||||
<div class="child"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
registerLayout('test', class {
|
||||
static get inputProperties() {
|
||||
return ['--expected-block-size'];
|
||||
}
|
||||
|
||||
*intrinsicSizes() {}
|
||||
*layout([child], edges, constraints, styleMap) {
|
||||
let childFixedInlineSize = 0;
|
||||
let childFixedBlockSize = 0;
|
||||
if (constraints.fixedBlockSize === JSON.parse(styleMap.get('--expected-block-size'))) {
|
||||
childFixedInlineSize = 100;
|
||||
childFixedBlockSize = 100;
|
||||
}
|
||||
|
||||
const childFragments = [yield child.layoutNextFragment({
|
||||
fixedInlineSize: childFixedInlineSize,
|
||||
fixedBlockSize: childFixedBlockSize,
|
||||
})];
|
||||
|
||||
return {childFragments};
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue