diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-layout-api/constraints | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-layout-api/constraints')
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}; + } +}); |