summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-layout-api/constraints
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-layout-api/constraints')
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-absolute-left-right-vrl.https.html40
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-absolute-none.https.html36
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-absolute-top-bottom.https.html39
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-block-none-vrl.https.html32
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-block-none.https.html32
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed-max.https.html34
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed-min.https.html34
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed-vrl.https.html33
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed.https.html33
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-basis-vrl.https.html37
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-basis.https.html38
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-grow.https.html40
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-none.https.html37
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-stretch-vrl.https.html39
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-grow-vrl.https.html38
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-none.https.html36
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-percentage-indefinite.https.html37
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-stretch-max.https.html39
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-stretch.https.html38
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-none.https.html36
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-stretch-max.https.html39
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-stretch.https.html38
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-vrl.https.html38
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage-indefinite.https.html33
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage-quirks-mode.https.html38
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage-vrl.https.html37
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage.https.html37
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-quirky-body.https.html22
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-absolute-left-right.https.html33
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-absolute-top-bottom-vrl.https.html35
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto-avoid-floats-vlr.https.html37
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto-avoid-floats.https.html36
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto-vlr.https.html31
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto.https.html30
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-fixed-vrl.https.html27
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-fixed.https.html26
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-flex-grow-column-vrl.https.html33
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-flex-grow.https.html31
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-grid.https.html30
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-percentage-vlr.https.html31
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-percentage.https.html30
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/support/constraints-fixed-block-size-quirky-body-iframe.html21
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/support/constraints-fixed-block-size.js22
-rw-r--r--testing/web-platform/tests/css/css-layout-api/constraints/support/constraints-fixed-inline-size.js9
45 files changed, 1482 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-absolute-left-right-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-absolute-left-right-vrl.https.html
new file mode 100644
index 0000000000..8e177dbf33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-absolute-left-right-vrl.https.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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-absolute-none.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-absolute-none.https.html
new file mode 100644
index 0000000000..7b10f11d7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-absolute-none.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-absolute-top-bottom.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-absolute-top-bottom.https.html
new file mode 100644
index 0000000000..73c29000cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-absolute-top-bottom.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-block-none-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-block-none-vrl.https.html
new file mode 100644
index 0000000000..704b66d64a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-block-none-vrl.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-block-none.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-block-none.https.html
new file mode 100644
index 0000000000..6c023f5162
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-block-none.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed-max.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed-max.https.html
new file mode 100644
index 0000000000..8af6afde26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed-max.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed-min.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed-min.https.html
new file mode 100644
index 0000000000..4d76ed9785
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed-min.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed-vrl.https.html
new file mode 100644
index 0000000000..bbc0a2fde8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed-vrl.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed.https.html
new file mode 100644
index 0000000000..45376ac295
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-fixed.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-basis-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-basis-vrl.https.html
new file mode 100644
index 0000000000..25fc685a67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-basis-vrl.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-basis.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-basis.https.html
new file mode 100644
index 0000000000..8df99ee835
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-basis.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-grow.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-grow.https.html
new file mode 100644
index 0000000000..da53fa86ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-grow.https.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 {
+ 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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-none.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-none.https.html
new file mode 100644
index 0000000000..1d4249e925
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-none.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-stretch-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-stretch-vrl.https.html
new file mode 100644
index 0000000000..c71e202b0c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-column-stretch-vrl.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-grow-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-grow-vrl.https.html
new file mode 100644
index 0000000000..f77b84910a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-grow-vrl.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-none.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-none.https.html
new file mode 100644
index 0000000000..9ef11daccf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-none.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-percentage-indefinite.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-percentage-indefinite.https.html
new file mode 100644
index 0000000000..111120673e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-percentage-indefinite.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-stretch-max.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-stretch-max.https.html
new file mode 100644
index 0000000000..c72ed3e04d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-stretch-max.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-stretch.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-stretch.https.html
new file mode 100644
index 0000000000..cfaf38295f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-flex-stretch.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-none.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-none.https.html
new file mode 100644
index 0000000000..5c7381523e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-none.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-stretch-max.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-stretch-max.https.html
new file mode 100644
index 0000000000..c738ad546d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-stretch-max.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-stretch.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-stretch.https.html
new file mode 100644
index 0000000000..2e83f42c86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-stretch.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-vrl.https.html
new file mode 100644
index 0000000000..2c004cd916
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-grid-vrl.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage-indefinite.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage-indefinite.https.html
new file mode 100644
index 0000000000..ab02cb4b03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage-indefinite.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage-quirks-mode.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage-quirks-mode.https.html
new file mode 100644
index 0000000000..285ce941b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage-quirks-mode.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage-vrl.https.html
new file mode 100644
index 0000000000..870bc526f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage-vrl.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage.https.html
new file mode 100644
index 0000000000..335556550d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-percentage.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-quirky-body.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-quirky-body.https.html
new file mode 100644
index 0000000000..150426d45c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-block-size-quirky-body.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-absolute-left-right.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-absolute-left-right.https.html
new file mode 100644
index 0000000000..3b81c4d13d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-absolute-left-right.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-absolute-top-bottom-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-absolute-top-bottom-vrl.https.html
new file mode 100644
index 0000000000..ec94e59a17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-absolute-top-bottom-vrl.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto-avoid-floats-vlr.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto-avoid-floats-vlr.https.html
new file mode 100644
index 0000000000..2758462bd3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto-avoid-floats-vlr.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto-avoid-floats.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto-avoid-floats.https.html
new file mode 100644
index 0000000000..862b9ad3b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto-avoid-floats.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto-vlr.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto-vlr.https.html
new file mode 100644
index 0000000000..0c15fd12ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto-vlr.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto.https.html
new file mode 100644
index 0000000000..c513c3d844
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-block-auto.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-fixed-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-fixed-vrl.https.html
new file mode 100644
index 0000000000..93b0c110d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-fixed-vrl.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-fixed.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-fixed.https.html
new file mode 100644
index 0000000000..d8e8062f83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-fixed.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-flex-grow-column-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-flex-grow-column-vrl.https.html
new file mode 100644
index 0000000000..b9159965a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-flex-grow-column-vrl.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-flex-grow.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-flex-grow.https.html
new file mode 100644
index 0000000000..c2532c1460
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-flex-grow.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-grid.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-grid.https.html
new file mode 100644
index 0000000000..45f9f491e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-grid.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-percentage-vlr.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-percentage-vlr.https.html
new file mode 100644
index 0000000000..2e35043777
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-percentage-vlr.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-percentage.https.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-percentage.https.html
new file mode 100644
index 0000000000..c9041cf0ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-percentage.https.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-ref.html b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-ref.html
new file mode 100644
index 0000000000..e5727c0e2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/fixed-inline-size-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+.result {
+ background: green;
+ height: 100px;
+ width: 100px;
+}
+</style>
+
+<div class="result"></div>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/support/constraints-fixed-block-size-quirky-body-iframe.html b/testing/web-platform/tests/css/css-layout-api/constraints/support/constraints-fixed-block-size-quirky-body-iframe.html
new file mode 100644
index 0000000000..da770e6caf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/support/constraints-fixed-block-size-quirky-body-iframe.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/support/constraints-fixed-block-size.js b/testing/web-platform/tests/css/css-layout-api/constraints/support/constraints-fixed-block-size.js
new file mode 100644
index 0000000000..25d73ef615
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/support/constraints-fixed-block-size.js
@@ -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};
+ }
+});
diff --git a/testing/web-platform/tests/css/css-layout-api/constraints/support/constraints-fixed-inline-size.js b/testing/web-platform/tests/css/css-layout-api/constraints/support/constraints-fixed-inline-size.js
new file mode 100644
index 0000000000..3636f36654
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints/support/constraints-fixed-inline-size.js
@@ -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};
+ }
+});