mirror of
https://github.com/servo/servo.git
synced 2025-08-05 21:50:18 +01:00
Update web-platform-tests to revision 82b73b315ce7ed1554e7a9b7bced66a5831e4ee5
This commit is contained in:
WPT Sync Bot
parent
00a9f30773
commit
76712d7d25
353 changed files with 6528 additions and 1307 deletions
|
|
@ -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,38 @@
|
|||
<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: 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
--expected-block-size: 50; /* In quirks mode we should get 100px * 50% */
|
||||
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="container">
|
||||
<div class="test">
|
||||
<div class="child"></div>
|
||||
</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,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedinlinesize">
|
||||
<link rel="match" href="fixed-inline-size-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedInlineSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
@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>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-inline-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedinlinesize">
|
||||
<link rel="match" href="fixed-inline-size-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedInlineSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
position: relative;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
bottom: 20px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
@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>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-inline-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-fixedinlinesize">
|
||||
<link rel="match" href="fixed-inline-size-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedInlineSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
height: 200px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: right;
|
||||
width: 20px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
}
|
||||
|
||||
@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="float"></div>
|
||||
<div class="test"></div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-inline-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-fixedinlinesize">
|
||||
<link rel="match" href="fixed-inline-size-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedInlineSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: right;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
}
|
||||
|
||||
@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="float"></div>
|
||||
<div class="test"></div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-inline-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedinlinesize">
|
||||
<link rel="match" href="fixed-inline-size-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedInlineSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
height: 120px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.test {
|
||||
margin-bottom: 20px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
@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>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-inline-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedinlinesize">
|
||||
<link rel="match" href="fixed-inline-size-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedInlineSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.test {
|
||||
margin-right: 20px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
@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>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-inline-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedinlinesize">
|
||||
<link rel="match" href="fixed-inline-size-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedInlineSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
height: 100px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
@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>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-inline-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedinlinesize">
|
||||
<link rel="match" href="fixed-inline-size-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedInlineSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@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>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-inline-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-fixedinlinesize">
|
||||
<link rel="match" href="fixed-inline-size-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedInlineSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@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>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-inline-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedinlinesize">
|
||||
<link rel="match" href="fixed-inline-size-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedInlineSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@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>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-inline-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedinlinesize">
|
||||
<link rel="match" href="fixed-inline-size-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedInlineSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
display: grid;
|
||||
grid: auto-flow / 100px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
}
|
||||
|
||||
@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>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-inline-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedinlinesize">
|
||||
<link rel="match" href="fixed-inline-size-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedInlineSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
height: 200px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
@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>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-inline-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedinlinesize">
|
||||
<link rel="match" href="fixed-inline-size-ref.html">
|
||||
<meta name="assert" content="This test checks that LayoutConstraints#fixedInlineSize is passed into the layout function correctly." />
|
||||
<style>
|
||||
body {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@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>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-inline-size.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.result {
|
||||
background: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="result"></div>
|
||||
|
|
@ -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'];
|
||||
}
|
||||
|
||||
async intrinsicSizes() {}
|
||||
async 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 = [await child.layoutNextFragment({
|
||||
fixedInlineSize: childFixedInlineSize,
|
||||
fixedBlockSize: childFixedBlockSize,
|
||||
})];
|
||||
|
||||
return {childFragments};
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
registerLayout('test', class {
|
||||
async intrinsicSizes() {}
|
||||
async layout(children, edges, constraints, styleMap) {
|
||||
if (constraints.fixedInlineSize !== 100)
|
||||
return {autoBlockSize: 0};
|
||||
|
||||
return {autoBlockSize: 100};
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue