diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-layout-api')
185 files changed, 7996 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-layout-api/META.yml b/testing/web-platform/tests/css/css-layout-api/META.yml new file mode 100644 index 0000000000..c85c2d4ccc --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/META.yml @@ -0,0 +1,4 @@ +spec: https://drafts.css-houdini.org/css-layout-api/ +suggested_reviewers: + - bfgeek + - tabatkins diff --git a/testing/web-platform/tests/css/css-layout-api/at-supports-rule.https.html b/testing/web-platform/tests/css/css-layout-api/at-supports-rule.https.html new file mode 100644 index 0000000000..0f23325ce6 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/at-supports-rule.https.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#valdef-display-layout"> +<meta name="assert" content="This test checks that a layout() function works correctly with an @supports rule." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#test { + content: 'fail'; +} + +@supports (display: layout(foo)) { + #test { + content: 'pass'; + } +} +</style> +<div id="test"></div> +<script> +test(function() { + const element = document.getElementById('test'); + assert_equals(getComputedStyle(element).content, '"pass"'); +}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/auto-block-size/absolute.https.html b/testing/web-platform/tests/css/css-layout-api/auto-block-size/absolute.https.html new file mode 100644 index 0000000000..bf81b21a4b --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/auto-block-size/absolute.https.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing"> +<link rel="match" href="auto-block-size-absolute-ref.html"> +<meta name="assert" content="This test checks that the absolute positioning respects the auto-block-size." /> + +<style> +.test { + position: absolute; + background: red; +} + +@supports (display: layout(block-size-100)) { + .test { + display: layout(block-size-100); + background: green; + } +} + +.container { + position: relative; + margin: 20px 0; + width: 200px; + height: 200px; + border: solid 2px; +} + +.width-100 { + width: 100px; + writing-mode: horizontal-tb; +} + +.height-100 { + height: 100px; + writing-mode: vertical-rl; +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<!-- 100px x 100px, bottom-left --> +<div class="container"> + <div class="test width-100" style="bottom: 0px"></div> +</div> + +<!-- 100px x 200px, left, auto-size is ignored. --> +<div class="container"> + <div class="test width-100" style="top: 0px; bottom: 0px"></div> +</div> + +<!-- 100px x 100px, top-left --> +<div class="container"> + <div class="test height-100" style="left: 0px;"></div> +</div> + +<!-- 100px x 100px, top, auto-size is ignored. --> +<div class="container"> + <div class="test height-100" style="left: 0px; right: 0px;"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('block-size-100', class { + async intrinsicSizes() {} + async layout() { + return {autoBlockSize: 100}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/auto-block-size/auto-block-size-absolute-ref.html b/testing/web-platform/tests/css/css-layout-api/auto-block-size/auto-block-size-absolute-ref.html new file mode 100644 index 0000000000..416d57c43f --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/auto-block-size/auto-block-size-absolute-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<style> +.container { + position: relative; + margin: 20px 0; + width: 200px; + height: 200px; + border: solid 2px; +} + +.result { + position: absolute; + background: green; +} +</style> +<div class="container"> + <div class="result" style="width: 100px; height: 100px; bottom: 0px;"></div> +</div> +<div class="container"> + <div class="result" style="width: 100px; height: 200px;"></div> +</div> +<div class="container"> + <div class="result" style="width: 100px; height: 100px;"></div> +</div> +<div class="container"> + <div class="result" style="width: 200px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/auto-block-size/auto-block-size-floats-ref.html b/testing/web-platform/tests/css/css-layout-api/auto-block-size/auto-block-size-floats-ref.html new file mode 100644 index 0000000000..368d3d8693 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/auto-block-size/auto-block-size-floats-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +.container { + width: 150px; + border: solid 2px; +} + +.left { + float: left; + background: green; + width: 100px; + height: 100px; +} + +.right { + float: right; + background: green; + width: 100px; + height: 100px; +} +</style> + +<div class="container"> + <div class="left"></div> + <div class="right"></div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/auto-block-size/auto-block-size-negative-ref.html b/testing/web-platform/tests/css/css-layout-api/auto-block-size/auto-block-size-negative-ref.html new file mode 100644 index 0000000000..665b5c6620 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/auto-block-size/auto-block-size-negative-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.result { + background: green; + border: solid 2px; + margin: 20px 0; +} +</style> + +<div class="result" style="width: 100px; height: 0px;"></div> +<div class="result" style="width: 0px; height: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-layout-api/auto-block-size/flex-ref.html b/testing/web-platform/tests/css/css-layout-api/auto-block-size/flex-ref.html new file mode 100644 index 0000000000..e71b104c74 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/auto-block-size/flex-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<style> +.container { + border: solid 2px; + display: flow-root; + width: 300px; +} + +.child { + background: green; + border: solid 2px; + box-sizing: border-box; + float: left; + height: 100px; +} +</style> + +<div class="container"> + <div class="child" style="width: 100px;"></div> + <div class="child" style="width: 200px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/auto-block-size/flex.https.html b/testing/web-platform/tests/css/css-layout-api/auto-block-size/flex.https.html new file mode 100644 index 0000000000..96fe3c79a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/auto-block-size/flex.https.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing"> +<link rel="match" href="flex-ref.html"> +<meta name="assert" content="This test checks that the flex layout respects the auto-block-size." /> + +<style> +.flex { + width: 300px; + display: flex; + border: solid 2px; +} + +.custom { + background: red; + box-sizing: border-box; + border: solid 2px; + height: 100px; + writing-mode: vertical-rl; +} + +@supports (display: layout(block-size-100)) { + .custom-100 { + display: layout(block-size-100); + background: green; + } + .custom-50 { + display: layout(block-size-50); + background: green; + flex: 1; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<!-- Tests that floats using an auto block size get positioned correctly. --> +<div class="flex"> + <div class="custom custom-100"></div> + <div class="custom custom-50"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('block-size-100', class { + async intrinsicSizes() {} + async layout() { + return {autoBlockSize: 100}; + } +}); +registerLayout('block-size-50', class { + async intrinsicSizes() {} + async layout() { + return {autoBlockSize: 50}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/auto-block-size/floats.https.html b/testing/web-platform/tests/css/css-layout-api/auto-block-size/floats.https.html new file mode 100644 index 0000000000..342c57b530 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/auto-block-size/floats.https.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing"> +<link rel="match" href="auto-block-size-floats-ref.html"> +<meta name="assert" content="This test checks that if the layout() is a float, the flow layout respects the auto-block-size." /> + +<style> +.test { + background: red; +} + +@supports (display: layout(block-size-100)) { + .test { + display: layout(block-size-100); + background: green; + } +} + +.container { + width: 150px; + border: solid 2px; +} + +.left { + float: left; + width: 100px; + writing-mode: horizontal-tb; +} + +.right { + float: right; + height: 100px; + writing-mode: vertical-rl; +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<!-- Tests that floats using an auto block size get positioned correctly. --> +<div class="container"> + <div class="left test"></div> + <div class="right test"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('block-size-100', class { + async intrinsicSizes() {} + async layout() { + return {autoBlockSize: 100}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/auto-block-size/inflow-ref.html b/testing/web-platform/tests/css/css-layout-api/auto-block-size/inflow-ref.html new file mode 100644 index 0000000000..73f84811b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/auto-block-size/inflow-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<style> +.result { + margin: 20px 0; + background: green; +} +</style> +<div class="result" style="width: 100px; height: 100px;"></div> +<div class="result" style="width: 100px; height: 150px;"></div> +<div class="result" style="width: 100px; height: 50px;"></div> +<div class="result" style="width: 100px; height: 100px;"></div> +<div class="result" style="width: 150px; height: 100px;"></div> +<div class="result" style="width: 50px; height: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-layout-api/auto-block-size/inflow.https.html b/testing/web-platform/tests/css/css-layout-api/auto-block-size/inflow.https.html new file mode 100644 index 0000000000..2239b27894 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/auto-block-size/inflow.https.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing"> +<link rel="match" href="inflow-ref.html"> +<meta name="assert" content="This test checks that min/max-block-size constraints are applied correctly to a layout()." /> + +<style> +.test { + margin: 20px 0; + background: red; +} + +@supports (display: layout(block-size-100)) { + .test { + display: layout(block-size-100); + background: green; + } +} + +.width-100 { + width: 100px; + writing-mode: horizontal-tb; +} + +.height-100 { + height: 100px; + writing-mode: vertical-rl; +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<!-- 100px x 100px --> +<div class="test width-100"></div> + +<!-- 100px x 150px --> +<div class="test width-100" style="min-height: 150px"></div> + +<!-- 100px x 50px --> +<div class="test width-100" style="max-height: 50px"></div> + +<!-- 100px x 100px --> +<div class="test height-100"></div> + +<!-- 150px x 100px --> +<div class="test height-100" style="min-width: 150px"></div> + +<!-- 50px x 100px --> +<div class="test height-100" style="max-width: 50px"></div> + +<script id="code" type="text/worklet"> +registerLayout('block-size-100', class { + async intrinsicSizes() {} + async layout() { + return {autoBlockSize: 100}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/auto-block-size/negative.https.html b/testing/web-platform/tests/css/css-layout-api/auto-block-size/negative.https.html new file mode 100644 index 0000000000..d321f03002 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/auto-block-size/negative.https.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing"> +<link rel="match" href="auto-block-size-negative-ref.html"> +<meta name="assert" content="This test checks that auto-block-size is correctly clamped to zero." /> + +<style> + +.test { + background: red; + border: solid 2px; + margin: 20px 0; +} + +.width-100 { + width: 100px; + writing-mode: horizontal-tb; +} + +.height-100 { + height: 100px; + writing-mode: vertical-rl; +} + +@supports (display: layout(block-size-negative)) { + .test { + display: layout(block-size-negative); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test width-100"></div> +<div class="test height-100"></div> + +<script id="code" type="text/worklet"> +registerLayout('block-size-negative', class { + async intrinsicSizes() {} + async layout() { + return {autoBlockSize: -100}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/baseline/child-baseline.https.html b/testing/web-platform/tests/css/css-layout-api/baseline/child-baseline.https.html new file mode 100644 index 0000000000..a871d69011 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/baseline/child-baseline.https.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-alignment"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that passing child baseline to a parent works correctly." /> +<style> +.test { + background: green; + padding: 0 10px; + width: 80px; +} + +@supports (display: layout(parent)) { + .test { + display: layout(parent); + background: green; + } + + .child { + display: layout(child); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +const BASELINE = 10; + +registerLayout('parent', class { + async intrinsicSizes() {} + async layout(children) { + const childFragments = await Promise.all(children.map(child => child.layoutNextFragment({}))); + + if (childFragments[0].baseline != BASELINE) + return {autoBlockSize: 0, childFragments}; + + return {autoBlockSize: 100, childFragments}; + } +}); + +registerLayout('child', class { + async intrinsicSizes() {} + async layout(children) { + const childFragments = await Promise.all(children.map(child => child.layoutNextFragment({}))); + return { childFragments, baseline: BASELINE } + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/baseline/flex-baseline.https.html b/testing/web-platform/tests/css/css-layout-api/baseline/flex-baseline.https.html new file mode 100644 index 0000000000..ce869bee37 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/baseline/flex-baseline.https.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-alignment"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that a baseline aligned element uses the baseline set in layout()."/> +<style> +.parent { + background: red; + display: flex; + padding: 0 10px; + width: 80px; + height: 100px; + align-items: baseline; +} + +.child { + color: red; +} + +@supports (display: layout(parent)) { + .parent { + background: green; + } + .child { + display: layout(child); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="parent"> + <div style="position: absolute; top: 50px; width: 50px; height: 25px; background: green;"></div> + <div></div> + <div class="child">text</div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('child', class { + async intrinsicSizes() {} + async layout(children) { + const childFragments = await Promise.all(children.map(child => child.layoutNextFragment({}))); + return {childFragments, baseline: -50}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/baseline/no-baseline.https.html b/testing/web-platform/tests/css/css-layout-api/baseline/no-baseline.https.html new file mode 100644 index 0000000000..0bc08552bc --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/baseline/no-baseline.https.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-alignment"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that an element with no baseline is handled correctly."/> +<style> +.test { + background: green; + padding: 0 10px; + width: 80px; +} + +@supports (display: layout(parent)) { + .test { + display: layout(parent); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('parent', class { + async intrinsicSizes() {} + async layout(children) { + const childFragments = await Promise.all(children.map(child => child.layoutNextFragment({}))); + if (childFragments[0].baseline) + return {autoBlockSize: 0, childFragments}; + return {autoBlockSize: 100, childFragments}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/baseline/orthogonal-baseline.https.html b/testing/web-platform/tests/css/css-layout-api/baseline/orthogonal-baseline.https.html new file mode 100644 index 0000000000..c83560b57e --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/baseline/orthogonal-baseline.https.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-alignment"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that orthogonal children do not produce baselines."/> +<style> +.test { + background: green; + padding: 0 10px; + width: 80px; +} + +@supports (display: layout(test)) { + .test { + display: layout(test); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div style="writing-mode: vertical-rl; color: green;">text</div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('test', class { + async intrinsicSizes() {} + async layout(children) { + const childFragments = await Promise.all(children.map(child => child.layoutNextFragment({}))); + if (childFragments[0].baseline) + return {autoBlockSize: 0, childFragments}; + return {autoBlockSize: 100, childFragments}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/box-tree-registered-ref.html b/testing/web-platform/tests/css/css-layout-api/box-tree-registered-ref.html new file mode 100644 index 0000000000..0ba9862015 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/box-tree-registered-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<style> +.container { + margin: 20px 0; + border: solid 2px; + width: 100px; +} + +.pink { + background: hotpink; +} +</style> + +<div class="container"> + <div class="pink" style="width: 50px; height: 100px;"></div> +</div> + +<div class="container"> + <div class="pink" style="width: 100px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/box-tree-registered.https.html b/testing/web-platform/tests/css/css-layout-api/box-tree-registered.https.html new file mode 100644 index 0000000000..c3024f9f3a --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/box-tree-registered.https.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-api-box-tree"> +<link rel="match" href="box-tree-registered-ref.html"> +<meta name="assert" content="This test checks that a registered layout() has children which are blockified and new formatting contexts." /> +<style> +@supports (display: layout(registered)) { + .test { + display: layout(registered); + } +} + +.container { + margin: 20px 0; + border: solid 2px; + width: 100px; +} + +.float { + float: left; + width: 50%; + height: 50px; +} + +.pink { + background: hotpink; +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="container"> + <!-- This tests that the "layout()" grandchildren floats within the don't interact with each other. --> + <div class="test"> + <div class="inflow"> + <div class="float pink"></div> + </div> + <div class="inflow"> + <div class="float pink"></div> + </div> + </div> +</div> + +<div class="container"> + <!-- This tests that the "layout()" children margins interact as if they are new formatting contexts. --> + <div class="test"> + <div class="inflow pink"> + <div style="margin-bottom: 50px;"></div> + </div> + <div class="inflow pink"> + <div style="margin-top: 50px;"></div> + </div> + </div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('registered', class { + async intrinsicSizes() {} + async layout() { throw Error(); } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/box-tree-unregistered-ref.html b/testing/web-platform/tests/css/css-layout-api/box-tree-unregistered-ref.html new file mode 100644 index 0000000000..20312cff8f --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/box-tree-unregistered-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<style> +.container { + float: left; + margin: 20px 0; + border: solid 2px; + width: 100px; +} + +.inflow { + height: 40px; +} +</style> + +<div class="container"> + <div class="inflow"></div> + <div class="inflow" style="background: hotpink"></div> + <div class="inflow"></div> +</div> + +<div class="container"> + <div class="inflow"></div> + <div class="inflow" style="background: hotpink"></div> + <div class="inflow"></div> +</div> + +<div class="container"> + <div class="inflow" style="background: hotpink"></div> + <div class="inflow" style="background: green"></div> +</div> + +<div class="container"> + <div style="height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/box-tree-unregistered.https.html b/testing/web-platform/tests/css/css-layout-api/box-tree-unregistered.https.html new file mode 100644 index 0000000000..25fe602d1c --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/box-tree-unregistered.https.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-api-box-tree"> +<link rel="match" href="box-tree-unregistered-ref.html"> +<meta name="assert" content="This test checks that an unregistered layout() works the same as a normal flow-root." /> +<style> +@supports (display: layout(unregistered)) { + .test { + display: layout(unregistered); + } +} + +.container { + float: left; + margin: 20px 0; + border: solid 2px; + width: 100px; +} + +.float { + float: left; + width: 100%; + height: 40px; + background: hotpink; +} + +.inflow { + height: 40px; + background: hotpink; +} +</style> + +<div class="container"> + <!-- This tests that the "layout()" margins don't collapse with its children. --> + <div class="test" style="margin: 20px 0"> + <div class="inflow" style="margin: 20px 0"></div> + </div> +</div> + +<div class="container"> + <!-- This tests that the "layout()" grows to fit child floats. --> + <div class="test"> + <div class="float" style="margin: 40px 0"></div> + </div> +</div> + +<div class="container"> + <!-- This tests that a float does not intrude into "layout()" box. --> + <div class="float"></div> + <div class="test" style="width: 100%; height: 40px; background: green;"></div> +</div> + +<div class="container"> + <!-- This tests that margins in two "layout()" box children collapse as normally. --> + <div class="test" style="background: green;"> + <div style="margin:100px 0;"> + <div style="margin:100px 0;"></div> + </div> + <div style="margin:100px 0;"> + <div style="margin:100px 0;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/available-block-size-htb-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-block-size-htb-vrl.https.html new file mode 100644 index 0000000000..6ec8e4062f --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-block-size-htb-vrl.https.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that setting the available block-size of children works as expected." /> + +<style> +.test { + writing-mode: horizontal-tb; + background: red; + width: 100px; +} + +.child { + writing-mode: vertical-rl; + visibility: hidden; + line-height: 0; + + --available-block-size: 20; +} + +.inline { + display: inline-block; + width: 8px; +} + +.inline-size-10 { height: 10px; } +.inline-size-30 { height: 30px; } + +@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"> + <!-- As the inlines don't fit within 20px, we'll end up with two lines. --> + <div class="child" style="--block-size-expected: 30; --inline-size-expected: 16;"> + <span class="inline inline-size-10"></span> + <span class="inline inline-size-30"></span> + </div> + + <!-- The single inline doesn't take up the whole 20px, so will be shrink fitted. --> + <div class="child" style="--block-size-expected: 10; --inline-size-expected: 8;"> + <span class="inline inline-size-10"></span> + </div> + + <!-- Make sure the max-height property clamps the size. --> + <div class="child" style="max-height: 25px; --block-size-expected: 25; --inline-size-expected: 8;"> + <span class="inline inline-size-30"></span> + </div> + + <!-- Make sure the min-height property clamps the size. --> + <div class="child" style="min-height: 25px; --block-size-expected: 25; --inline-size-expected: 8;"> + <span class="inline inline-size-10"></span> + </div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/available-block-size-invalid.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-block-size-invalid.https.html new file mode 100644 index 0000000000..32a0f11a4e --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-block-size-invalid.https.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that setting an invalid available block-size works as expected." /> + +<style> +.test { + writing-mode: horizontal-tb; + background: red; + width: 100px; +} + +.child { + writing-mode: vertical-rl; + visibility: hidden; + line-height: 0; + + --available-block-size: -20; +} + +.inline { + display: inline-block; + width: 8px; +} + +.inline-size-10 { height: 10px; } + +@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"> + <!-- The invalid available block-size should be clamped to zero. --> + <div class="child" style="--block-size-expected: 10; --inline-size-expected: 16;"> + <span class="inline inline-size-10"></span> + <span class="inline inline-size-10"></span> + </div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/available-block-size-vrl-htb.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-block-size-vrl-htb.https.html new file mode 100644 index 0000000000..536af3b5a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-block-size-vrl-htb.https.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that setting the available block-size of children works as expected." /> + +<style> +.test { + writing-mode: vertical-rl; + background: red; + height: 100px; +} + +.child { + writing-mode: horizontal-tb; + visibility: hidden; + line-height: 0; + + --available-block-size: 20; +} + +.inline { + display: inline-block; + height: 8px; +} + +.inline-size-10 { width: 10px; } +.inline-size-30 { width: 30px; } + +@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"> + <!-- As the inlines don't fit within 20px, we'll end up with two lines. --> + <div class="child" style="--block-size-expected: 30; --inline-size-expected: 16;"> + <span class="inline inline-size-10"></span> + <span class="inline inline-size-30"></span> + </div> + + <!-- The single inline doesn't take up the whole 20px, so will be shrink fitted. --> + <div class="child" style="--block-size-expected: 10; --inline-size-expected: 8;"> + <span class="inline inline-size-10"></span> + </div> + + <!-- Make sure the max-width property clamps the size. --> + <div class="child" style="max-width: 25px; --block-size-expected: 25; --inline-size-expected: 8;"> + <span class="inline inline-size-30"></span> + </div> + + <!-- Make sure the min-width property clamps the size. --> + <div class="child" style="min-width: 25px; --block-size-expected: 25; --inline-size-expected: 8;"> + <span class="inline inline-size-10"></span> + </div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/available-inline-size-htb-htb.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-inline-size-htb-htb.https.html new file mode 100644 index 0000000000..6205c01d10 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-inline-size-htb-htb.https.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that setting the available inline-size of children works as expected." /> + +<style> +.test { + writing-mode: horizontal-tb; + background: red; + width: 100px; +} + +.child { + writing-mode: horizontal-tb; + visibility: hidden; + line-height: 0; + + --available-inline-size: 20; +} + +.inline { + display: inline-block; + height: 8px; +} + +.inline-size-10 { width: 10px; } +.inline-size-30 { width: 30px; } + +@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"> + <!-- As the inlines don't fit within 20px, we'll end up with two lines. --> + <div class="child" style="--inline-size-expected: 30; --block-size-expected: 16;"> + <span class="inline inline-size-10"></span> + <span class="inline inline-size-30"></span> + </div> + + <!-- The single inline doesn't take up the whole 20px, so will be shrink fitted. --> + <div class="child" style="--inline-size-expected: 10; --block-size-expected: 8;"> + <span class="inline inline-size-10"></span> + </div> + + <!-- Make sure the max-width property clamps the size. --> + <div class="child" style="max-width: 25px; --inline-size-expected: 25; --block-size-expected: 8;"> + <span class="inline inline-size-30"></span> + </div> + + <!-- Make sure the min-width property clamps the size. --> + <div class="child" style="min-width: 25px; --inline-size-expected: 25; --block-size-expected: 8;"> + <span class="inline inline-size-10"></span> + </div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/available-inline-size-invalid.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-inline-size-invalid.https.html new file mode 100644 index 0000000000..8bb18aaa4b --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-inline-size-invalid.https.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that setting an invalid available inline-size works as expected." /> + +<style> +.test { + writing-mode: horizontal-tb; + background: red; + width: 100px; +} + +.child { + writing-mode: horizontal-tb; + visibility: hidden; + line-height: 0; + + --available-inline-size: -20; +} + +.inline { + display: inline-block; + height: 8px; +} + +.inline-size-10 { width: 10px; } + +@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"> + <!-- The invalid available inline-size should be clamped to zero. --> + <div class="child" style="--inline-size-expected: 10; --block-size-expected: 16;"> + <span class="inline inline-size-10"></span> + <span class="inline inline-size-10"></span> + </div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/available-inline-size-vrl-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-inline-size-vrl-vrl.https.html new file mode 100644 index 0000000000..1b8d01f024 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-inline-size-vrl-vrl.https.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that setting the available inline-size of children works as expected." /> + +<style> +.test { + writing-mode: vertical-rl; + background: red; + height: 100px; +} + +.child { + writing-mode: vertical-rl; + visibility: hidden; + line-height: 0; + + --available-inline-size: 20; +} + +.inline { + display: inline-block; + width: 8px; +} + +.inline-size-10 { height: 10px; } +.inline-size-30 { height: 30px; } + +@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"> + <!-- As the inlines don't fit within 20px, we'll end up with two lines. --> + <div class="child" style="--inline-size-expected: 30; --block-size-expected: 16;"> + <span class="inline inline-size-10"></span> + <span class="inline inline-size-30"></span> + </div> + + <!-- The single inline doesn't take up the whole 20px, so will be shrink fitted. --> + <div class="child" style="--inline-size-expected: 10; --block-size-expected: 8;"> + <span class="inline inline-size-10"></span> + </div> + + <!-- Make sure the max-height property clamps the size. --> + <div class="child" style="max-height: 25px; --inline-size-expected: 25; --block-size-expected: 8;"> + <span class="inline inline-size-30"></span> + </div> + + <!-- Make sure the min-height property clamps the size. --> + <div class="child" style="min-height: 25px; --inline-size-expected: 25; --block-size-expected: 8;"> + <span class="inline inline-size-10"></span> + </div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-htb-htb.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-htb-htb.https.html new file mode 100644 index 0000000000..9bf4d40ad6 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-htb-htb.https.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize"> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that resolving percentages against the available size works as expected." /> + +<style> +.test { + writing-mode: horizontal-tb; + background: red; + width: 100px; +} + +.child { + writing-mode: horizontal-tb; + visibility: hidden; + + --available-inline-size: 50; + --available-block-size: 20; + + --inline-size-expected: 10px; + --block-size-expected: 10px; +} + +@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"> + <!-- A fixed width/height shouldn't be affected by the available size. --> + <div class="child" style="width: 10px; height: 10px;"></div> + + <!-- A percentage width/height should resolve itself against the available size. --> + <div class="child" style="width: 20%; height: 50%;"></div> + + <!-- A percentage max-width/max-height should resolve itself against the available size. --> + <div class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;"></div> + + <!-- A percentage min-width/min-height should resolve itself against the available size. --> + <div class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;"></div> + + <!-- A replaced percentage width/height should resolve itself against the available size. --> + <img class="child" style="width: 20%; height: 50%;" /> + + <!-- A replaced percentage max-width/max-height should resolve itself against the available size. --> + <img class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;" /> + + <!-- A replaced percentage min-width/min-height should resolve itself against the available size. --> + <img class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;" /> +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-htb-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-htb-vrl.https.html new file mode 100644 index 0000000000..eb104a180d --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-htb-vrl.https.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize"> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that resolving percentages against the available size works as expected." /> + +<style> +.test { + writing-mode: horizontal-tb; + background: red; + width: 100px; +} + +.child { + writing-mode: vertical-rl; + visibility: hidden; + + --available-inline-size: 50; + --available-block-size: 20; + + --inline-size-expected: 10px; + --block-size-expected: 10px; +} + +@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"> + <!-- A fixed width/height shouldn't be affected by the available size. --> + <div class="child" style="width: 10px; height: 10px;"></div> + + <!-- A percentage width/height should resolve itself against the available size. --> + <div class="child" style="width: 20%; height: 50%;"></div> + + <!-- A percentage max-width/max-height should resolve itself against the available size. --> + <div class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;"></div> + + <!-- A percentage min-width/min-height should resolve itself against the available size. --> + <div class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;"></div> + + <!-- A replaced percentage width/height should resolve itself against the available size. --> + <img class="child" style="width: 20%; height: 50%;" /> + + <!-- A replaced percentage max-width/max-height should resolve itself against the available size. --> + <img class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;" /> + + <!-- A replaced percentage min-width/min-height should resolve itself against the available size. --> + <img class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;" /> +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-invalid.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-invalid.https.html new file mode 100644 index 0000000000..8bd969271e --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-invalid.https.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize"> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that resolving percentages against an invalid available size works as expected." /> + +<style> +.test { + background: red; + width: 100px; +} + +.child { + visibility: hidden; + width: 10px; + line-height: 0; + + --available-inline-size: -20; + --available-block-size: -10; +} + +.inline { + display: inline-block; + width: 10px; + height: 10px; +} + +@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"> + <!-- The available inline-size gets clamped to zero, and the available block-size gets treated as indefinite. --> + <div class="child" style="--inline-size-expected: 0px; --block-size-expected: 10px; width: 100%; height: 100%;"> + <div class="inline"></div> + </div> + + <!-- For replaced elements, both axis should be resolved to 0px. --> + <img class="child" style="--inline-size-expected: 0px; --block-size-expected: 0px; width: 100%; height: 100%;" /> +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-vrl-htb.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-vrl-htb.https.html new file mode 100644 index 0000000000..ce8ff95dd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-vrl-htb.https.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize"> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that resolving percentages against the available size works as expected." /> + +<style> +.test { + writing-mode: vertical-rl; + background: red; + height: 100px; +} + +.child { + writing-mode: horizontal-tb; + visibility: hidden; + + --available-inline-size: 20; + --available-block-size: 50; + + --inline-size-expected: 10px; + --block-size-expected: 10px; +} + +@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"> + <!-- A fixed width/height shouldn't be affected by the available size. --> + <div class="child" style="width: 10px; height: 10px;"></div> + + <!-- A percentage width/height should resolve itself against the available size. --> + <div class="child" style="width: 20%; height: 50%;"></div> + + <!-- A percentage max-width/max-height should resolve itself against the available size. --> + <div class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;"></div> + + <!-- A percentage min-width/min-height should resolve itself against the available size. --> + <div class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;"></div> + + <!-- A replaced percentage width/height should resolve itself against the available size. --> + <img class="child" style="width: 20%; height: 50%;" /> + + <!-- A replaced percentage max-width/max-height should resolve itself against the available size. --> + <img class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;" /> + + <!-- A replaced percentage min-width/min-height should resolve itself against the available size. --> + <img class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;" /> +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-vrl-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-vrl-vrl.https.html new file mode 100644 index 0000000000..71c7355b9c --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/available-size-for-percentages-vrl-vrl.https.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize"> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that resolving percentages against the available size works as expected." /> + +<style> +.test { + writing-mode: vertical-rl; + background: red; + height: 100px; +} + +.child { + writing-mode: vertical-rl; + visibility: hidden; + + --available-inline-size: 20; + --available-block-size: 50; + + --inline-size-expected: 10px; + --block-size-expected: 10px; +} + +@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"> + <!-- A fixed width/height shouldn't be affected by the available size. --> + <div class="child" style="width: 10px; height: 10px;"></div> + + <!-- A percentage width/height should resolve itself against the available size. --> + <div class="child" style="width: 20%; height: 50%;"></div> + + <!-- A percentage max-width/max-height should resolve itself against the available size. --> + <div class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;"></div> + + <!-- A percentage min-width/min-height should resolve itself against the available size. --> + <div class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;"></div> + + <!-- A replaced percentage width/height should resolve itself against the available size. --> + <img class="child" style="width: 20%; height: 50%;" /> + + <!-- A replaced percentage max-width/max-height should resolve itself against the available size. --> + <img class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;" /> + + <!-- A replaced percentage min-width/min-height should resolve itself against the available size. --> + <img class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;" /> +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/fixed-block-size-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/fixed-block-size-vrl.https.html new file mode 100644 index 0000000000..631c5f8281 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/fixed-block-size-vrl.https.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that fixing the block size of children works as expected." /> + +<style> +.test { + writing-mode: vertical-rl; + background: red; + height: 100px; +} + +.htb { + writing-mode: horizontal-tb; + visibility: hidden; + width: 3px; + height: 2px; + + --fixed-block-size: 10; + + --inline-size-expected: 2; + --block-size-expected: 10; +} + +.vrl { + writing-mode: vertical-rl; + visibility: hidden; + width: 3px; + height: 2px; + + --fixed-block-size: 10; + + --inline-size-expected: 2; + --block-size-expected: 10; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="htb"></div> + <div class="vrl"></div> + <!-- min/max-width should have no effect, fixedBlockSize wins. --> + <div class="htb" style="max-width: 5px;"></div> + <div class="vrl" style="max-width: 5px;"></div> + <div class="htb" style="min-width: 15px;"></div> + <div class="vrl" style="min-width: 15px;"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/fixed-block-size.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/fixed-block-size.https.html new file mode 100644 index 0000000000..737cc4da75 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/fixed-block-size.https.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that fixing the block size of children works as expected." /> + +<style> +.test { + background: red; + width: 100px; +} + +.htb { + writing-mode: horizontal-tb; + visibility: hidden; + width: 3px; + height: 2px; + + --fixed-block-size: 10; + + --inline-size-expected: 3; + --block-size-expected: 10; +} + +.vrl { + writing-mode: vertical-rl; + visibility: hidden; + width: 3px; + height: 2px; + + --fixed-block-size: 10; + + --inline-size-expected: 3; + --block-size-expected: 10; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="htb"></div> + <div class="vrl"></div> + <!-- min/max-height should have no effect, fixedBlockSize wins. --> + <div class="htb" style="max-height: 5px;"></div> + <div class="vrl" style="max-height: 5px;"></div> + <div class="htb" style="min-height: 15px;"></div> + <div class="vrl" style="min-height: 15px;"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/fixed-inline-size-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/fixed-inline-size-vrl.https.html new file mode 100644 index 0000000000..4fc3c2e77d --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/fixed-inline-size-vrl.https.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that fixing the inline size of children works as expected." /> + +<style> +.test { + writing-mode: vertical-rl; + background: red; + height: 100px; +} + +.htb { + writing-mode: horizontal-tb; + visibility: hidden; + width: 3px; + height: 2px; + + --fixed-inline-size: 10; + + --inline-size-expected: 10; + --block-size-expected: 3; +} + +.vrl { + writing-mode: vertical-rl; + visibility: hidden; + width: 3px; + height: 2px; + + --fixed-inline-size: 10; + + --inline-size-expected: 10; + --block-size-expected: 3; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="htb"></div> + <div class="vrl"></div> + <!-- min/max-height should have no effect, fixedInlineSize wins. --> + <div class="htb" style="max-height: 5px;"></div> + <div class="vrl" style="max-height: 5px;"></div> + <div class="htb" style="min-height: 15px;"></div> + <div class="vrl" style="min-height: 15px;"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/fixed-inline-size.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/fixed-inline-size.https.html new file mode 100644 index 0000000000..0fdf4aca3a --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/fixed-inline-size.https.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that fixing the inline size of children works as expected." /> + +<style> +.test { + background: red; + width: 100px; +} + +.htb { + writing-mode: horizontal-tb; + visibility: hidden; + width: 3px; + height: 2px; + + --fixed-inline-size: 10; + + --inline-size-expected: 10; + --block-size-expected: 2; +} + +.vrl { + writing-mode: vertical-rl; + visibility: hidden; + width: 3px; + height: 2px; + + --fixed-inline-size: 10; + + --inline-size-expected: 10; + --block-size-expected: 2; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="htb"></div> + <div class="vrl"></div> + <!-- min/max-width should have no effect, fixedInlineSize wins. --> + <div class="htb" style="max-width: 5px;"></div> + <div class="vrl" style="max-width: 5px;"></div> + <div class="htb" style="min-width: 15px;"></div> + <div class="vrl" style="min-width: 15px;"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-htb-htb.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-htb-htb.https.html new file mode 100644 index 0000000000..84bda1ddf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-htb-htb.https.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that setting the percentage block-size of children works as expected." /> + +<style> +.test { + writing-mode: horizontal-tb; + background: red; + width: 100px; +} + +.child { + writing-mode: horizontal-tb; + visibility: hidden; + width: 10px; + + --percentage-block-size: 20; + + --inline-size-expected: 10px; + --block-size-expected: 10px; +} + +@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"> + <!-- A fixed height shouldn't be affected by the percentage size. --> + <div class="child" style="height: 10px;"></div> + + <!-- A percentage height should resolve itself against the percentageBlockSize. --> + <div class="child" style="height: 50%;"></div> + + <!-- A percentage max-height should resolve itself against the percentageBlockSize. --> + <div class="child" style="height: 15px; max-height: 50%;"></div> + + <!-- A percentage min-height should resolve itself against the percentageBlockSize. --> + <div class="child" style="height: 5px; min-height: 50%;"></div> + + <!-- A replaced percentage height should resolve itself against the percentageBlockSize. --> + <img class="child" style="height: 50%;" /> + + <!-- A replaced percentage max-height should resolve itself against the percentageBlockSize. --> + <img class="child" style="height: 15px; max-height: 50%;" /> + + <!-- A replaced percentage min-height should resolve itself against the percentageBlockSize. --> + <img class="child" style="height: 5px; min-height: 50%;" /> +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-htb-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-htb-vrl.https.html new file mode 100644 index 0000000000..98d285b015 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-htb-vrl.https.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageinlinesize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that setting the percentage inline-size of children works as expected." /> + +<style> +.test { + writing-mode: horizontal-tb; + background: red; + width: 100px; +} + +.child { + writing-mode: vertical-rl; + visibility: hidden; + height: 10px; + + --percentage-inline-size: 20; + + --inline-size-expected: 10px; + --block-size-expected: 10px; +} + +@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"> + <!-- A fixed width shouldn't be affected by the percentage size. --> + <div class="child" style="width: 10px;"></div> + + <!-- A percentage width should resolve itself against the percentageInlineSize. --> + <div class="child" style="width: 50%;"></div> + + <!-- A percentage max-width should resolve itself against the percentageInlineSize. --> + <div class="child" style="width: 15px; max-width: 50%;"></div> + + <!-- A percentage min-width should resolve itself against the percentageInlineSize. --> + <div class="child" style="width: 5px; min-width: 50%;"></div> + + <!-- A replaced percentage width should resolve itself against the percentageInlineSize. --> + <img class="child" style="width: 50%;" /> + + <!-- A replaced percentage max-width should resolve itself against the percentageInlineSize. --> + <img class="child" style="width: 15px; max-width: 50%;" /> + + <!-- A replaced percentage min-width should resolve itself against the percentageInlineSize. --> + <img class="child" style="width: 5px; min-width: 50%;" /> +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-invalid.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-invalid.https.html new file mode 100644 index 0000000000..0435535552 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-invalid.https.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that setting an invalid percentage block-size of children works as expected." /> + +<style> +.test { + background: red; + width: 100px; +} + +.child { + visibility: hidden; + width: 10px; + line-height: 0; + + --percentage-block-size: -10; +} + +.inline { + display: inline-block; + width: 10px; + height: 10px; +} + +@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"> + <!-- A percentage shouldn't be resolved against an invalid percentageBlockSize. --> + <div class="child" style="--inline-size-expected: 10px; --block-size-expected: 10px; height: 100%;"> + <div class="inline"></div> + </div> + + <!-- A percentage shouldn't be resolved against an invalid percentageBlockSize. --> + <img class="child" style="--inline-size-expected: 10px; --block-size-expected: 0px; height: 100%;" /> +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-quirks-mode.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-quirks-mode.https.html new file mode 100644 index 0000000000..527149b67a --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-quirks-mode.https.html @@ -0,0 +1,55 @@ +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that setting a percentage block-size works correctly in quirks mode." /> + +<style> +.container { + height: 200px; +} + +.test { + background: red; + width: 100px; +} + +.child { + visibility: hidden; + width: 10px; + line-height: 0; +} + +.inline { + display: inline-block; + width: 10px; + height: 10px; +} + +@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="container"> + <div class="test"> + <!-- TODO explain. --> + <div class="child" style="--percentage-block-size: 50px; --inline-size-expected: 10px; --block-size-expected: 10px;"> + <div style="height: 20%"></div> + </div> + + <!-- TODO explain. --> + <div class="child" style="--inline-size-expected: 10px; --block-size-expected: 10px;"> + <div style="height: 100%"> + <div class="inline"></div> + </div> + </div> + </div> +</div> +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-vrl-htb.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-vrl-htb.https.html new file mode 100644 index 0000000000..2d3d496fa5 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-vrl-htb.https.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageinlinesize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that setting the percentage inline-size of children works as expected." /> + +<style> +.test { + writing-mode: vertical-rl; + background: red; + height: 100px; +} + +.child { + writing-mode: horizontal-tb; + visibility: hidden; + width: 10px; + + --percentage-inline-size: 20; + + --inline-size-expected: 10px; + --block-size-expected: 10px; +} + +@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"> + <!-- A fixed height shouldn't be affected by the percentage size. --> + <div class="child" style="height: 10px;"></div> + + <!-- A percentage height should resolve itself against the percentageInlineSize. --> + <div class="child" style="height: 50%;"></div> + + <!-- A percentage max-height should resolve itself against the percentageInlineSize. --> + <div class="child" style="height: 15px; max-height: 50%;"></div> + + <!-- A percentage min-height should resolve itself against the percentageInlineSize. --> + <div class="child" style="height: 5px; min-height: 50%;"></div> + + <!-- A replaced percentage height should resolve itself against the percentageInlineSize. --> + <img class="child" style="height: 50%;" /> + + <!-- A replaced percentage max-height should resolve itself against the percentageInlineSize. --> + <img class="child" style="height: 15px; max-height: 50%;" /> + + <!-- A replaced percentage min-height should resolve itself against the percentageInlineSize. --> + <img class="child" style="height: 5px; min-height: 50%;" /> +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-vrl-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-vrl-vrl.https.html new file mode 100644 index 0000000000..577b98ad98 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/percentage-size-vrl-vrl.https.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageblocksize"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that setting the percentage block-size of children works as expected." /> + +<style> +.test { + writing-mode: vertical-rl; + background: red; + height: 100px; +} + +.child { + writing-mode: vertical-rl; + visibility: hidden; + height: 10px; + + --percentage-block-size: 20; + + --inline-size-expected: 10px; + --block-size-expected: 10px; +} + +@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"> + <!-- A fixed width shouldn't be affected by the percentage size. --> + <div class="child" style="width: 10px;"></div> + + <!-- A percentage width should resolve itself against the percentageBlockSize. --> + <div class="child" style="width: 50%;"></div> + + <!-- A percentage max-width should resolve itself against the percentageBlockSize. --> + <div class="child" style="width: 15px; max-width: 50%;"></div> + + <!-- A percentage min-width should resolve itself against the percentageBlockSize. --> + <div class="child" style="width: 5px; min-width: 50%;"></div> + + <!-- A replaced percentage width should resolve itself against the percentageBlockSize. --> + <img class="child" style="width: 50%;" /> + + <!-- A replaced percentage max-width should resolve itself against the percentageBlockSize. --> + <img class="child" style="width: 15px; max-width: 50%;" /> + + <!-- A replaced percentage min-width should resolve itself against the percentageBlockSize. --> + <img class="child" style="width: 5px; min-width: 50%;" /> +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/child-constraints/support/layout-child-sizes-worklet.js b/testing/web-platform/tests/css/css-layout-api/child-constraints/support/layout-child-sizes-worklet.js new file mode 100644 index 0000000000..5956c9a70c --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/child-constraints/support/layout-child-sizes-worklet.js @@ -0,0 +1,67 @@ +import {areArraysEqual} from '/common/arrays.js'; + +function parseNumber(value) { + const num = parseInt(value.toString()); + if (isNaN(num)) return undefined; + return num; +} + +registerLayout('test', class { + static get childInputProperties() { + return [ + '--available-inline-size', + '--available-block-size', + '--fixed-inline-size', + '--fixed-block-size', + '--percentage-inline-size', + '--percentage-block-size', + '--inline-size-expected', + '--block-size-expected' + ]; + } + + async intrinsicSizes() {} + async layout(children, edges, constraints, styleMap) { + const childFragments = await Promise.all(children.map((child) => { + const childConstraints = {}; + const availableInlineSize = parseNumber(child.styleMap.get('--available-inline-size')); + const availableBlockSize = parseNumber(child.styleMap.get('--available-block-size')); + const fixedInlineSize = parseNumber(child.styleMap.get('--fixed-inline-size')); + const fixedBlockSize = parseNumber(child.styleMap.get('--fixed-block-size')); + const percentageInlineSize = parseNumber(child.styleMap.get('--percentage-inline-size')); + const percentageBlockSize = parseNumber(child.styleMap.get('--percentage-block-size')); + return child.layoutNextFragment({ + availableInlineSize, + availableBlockSize, + fixedInlineSize, + fixedBlockSize, + percentageInlineSize, + percentageBlockSize, + }); + })); + + const actual = childFragments.map((childFragment) => { + return { + inlineSize: childFragment.inlineSize, + blockSize: childFragment.blockSize, + }; + }); + + const expected = children.map((child) => { + return { + inlineSize: parseInt(child.styleMap.get('--inline-size-expected').toString()), + blockSize: parseInt(child.styleMap.get('--block-size-expected').toString()), + }; + }); + + const equalityFunc = (a, b) => { + return a.inlineSize == b.inlineSize && a.blockSize == b.blockSize; + }; + + if (!areArraysEqual(expected, actual, equalityFunc)) { + return {autoBlockSize: 0, childFragments}; + } + + return {autoBlockSize: 100, childFragments}; + } +}); diff --git a/testing/web-platform/tests/css/css-layout-api/chrome-bug-1287843-000-crash.https.html b/testing/web-platform/tests/css/css-layout-api/chrome-bug-1287843-000-crash.https.html new file mode 100644 index 0000000000..6137eba6dc --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/chrome-bug-1287843-000-crash.https.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1287843"> +<div style="columns:2;"> + <div style="display:layout(foo);"> + <div> + <div style="display:inline-table;"> + <div style="display:table-row;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/chrome-bug-1287843-001-crash.https.html b/testing/web-platform/tests/css/css-layout-api/chrome-bug-1287843-001-crash.https.html new file mode 100644 index 0000000000..ac8c6ecf1a --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/chrome-bug-1287843-001-crash.https.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1287843"> +<div style="columns:2;"> + <div style="display:layout(foo);"> + <div> + <div style="display:inline-table;"> + <div style="display:table-row;"> + <div style="columns:2;"> + <div style="display:inline-table;"> + <div style="display:table-row;"></div> + </div> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/chrome-bug-1291449-crash.https.html b/testing/web-platform/tests/css/css-layout-api/chrome-bug-1291449-crash.https.html new file mode 100644 index 0000000000..d13fed0179 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/chrome-bug-1291449-crash.https.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1291449"> +<div style="columns:2;"> + <div style="display:flex;"></div> + <div style="display:grid;"></div> + <div style="display:table;"></div> + <div style="display:layout(foo);"> + <div style="columns:2;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/chrome-bug-1296664-crash.https.html b/testing/web-platform/tests/css/css-layout-api/chrome-bug-1296664-crash.https.html new file mode 100644 index 0000000000..9e523fb181 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/chrome-bug-1296664-crash.https.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1296664"> +<div id="container"> + <div style="position:relative; margin-top:8px;"> + <div style="display:layout(foo); position:absolute; width:100px; height:100px;"></div> + <div style="column-span:all;"></div> + </div> + <span style="columns:1;"> + <div style="display:flex;"></div> + <div style="display:grid;"></div> + <div style="display:table;"></div> + </span> +</div> +<script> + document.body.offsetTop; + container.style.columns = "1"; +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/computed-style-layout-function.https.html b/testing/web-platform/tests/css/css-layout-api/computed-style-layout-function.https.html new file mode 100644 index 0000000000..d115009c6c --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/computed-style-layout-function.https.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#valdef-display-layout"> +<meta name="assert" content="This test checks that a layout() function parses correctly and serializes correctly from computed style." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#test1 { display: layout(test1); } +#test2 { display: layout(); } +#test3 { display: layout(test3, invalid); } +#test4 { --display: layout(test4); display: var(--display); } +</style> + +<div id=test1></div> +<div id=test2></div> +<div id=test3></div> +<div id=test4></div> +<div id=test5></div> +<script> +test(function() { + const test1 = document.getElementById('test1'); + assert_equals(getComputedStyle(test1).display, 'layout(test1)'); +}); + +test(function() { + // layout() should fail to parse. + const test2 = document.getElementById('test2'); + assert_equals(getComputedStyle(test2).display, 'block'); +}); + +test(function() { + // layout(test3, invalid) should fail to parse. + const test3 = document.getElementById('test3'); + assert_equals(getComputedStyle(test3).display, 'block'); +}); + +test(function() { + // Setting via a custom property should work. + const test4 = document.getElementById('test4'); + assert_equals(getComputedStyle(test4).display, 'layout(test4)'); +}); + +test(function() { + // Setting the inline style should reflect in the computed style. + const test5 = document.getElementById('test5'); + assert_equals(getComputedStyle(test5).display, 'block'); + + test5.style.display = 'layout(test5)'; + assert_equals(getComputedStyle(test5).display, 'layout(test5)'); +}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/constraints-data-function-failure.https.html b/testing/web-platform/tests/css/css-layout-api/constraints-data-function-failure.https.html new file mode 100644 index 0000000000..2d5e5240d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/constraints-data-function-failure.https.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-data"> +<link rel="match" href="green-square-ref.html"> +<meta name="assert" content="This test checks that a function can't be passed to a child layout." /> +<style> +.test { + background: red; + width: 100px; +} + +@supports (display: layout(parent)) { + .test { + display: layout(parent); + background: green; + } + + .child { + display: layout(child); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('parent', class { + async intrinsicSizes() {} + async layout([child], edges, constraints, styleMap) { + let childFragment = null; + + try { + childFragment = await child.layoutNextFragment({ + data: { fn: function() {} } + }); + } catch(e) { + // Success! The structured cloning algorithm should have thrown an error. + childFragment = await child.layoutNextFragment({}); + return {autoBlockSize: 100, childFragments: [childFragment]}; + } + + return {autoBlockSize: 0, childFragments: [childFragment]}; + } +}); + +registerLayout('child', class { + async intrinsicSizes() {} + async layout() { + return {autoBlockSize: 0}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/constraints-data-sab-failure.https.html b/testing/web-platform/tests/css/css-layout-api/constraints-data-sab-failure.https.html new file mode 100644 index 0000000000..b8df61c73d --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/constraints-data-sab-failure.https.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-data"> +<link rel="match" href="green-square-ref.html"> +<meta name="assert" content="This test checks that a SharedArrayBuffer can't be passed to a child layout." /> +<style> +.test { + background: red; + width: 100px; +} + +@supports (display: layout(parent)) { + .test { + display: layout(parent); + background: green; + } + + .child { + display: layout(child); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('parent', class { + async intrinsicSizes() {} + async layout([child], edges, constraints, styleMap) { + let childFragment = null; + + try { + childFragment = await child.layoutNextFragment({ + // See https://github.com/whatwg/html/issues/5380 for why not `new SharedArrayBuffer()` + data: { sab: new WebAssembly.Memory({ shared:true, initial:1, maximum:1 }).buffer } + }); + } catch(e) { + // Success! The structured cloning algorithm should have thrown an error. + childFragment = await child.layoutNextFragment({}); + return {autoBlockSize: 100, childFragments: [childFragment]}; + } + + return {autoBlockSize: 0, childFragments: [childFragment]}; + } +}); + +registerLayout('child', class { + async intrinsicSizes() {} + async layout() { + return {autoBlockSize: 0}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/constraints-data.https.html b/testing/web-platform/tests/css/css-layout-api/constraints-data.https.html new file mode 100644 index 0000000000..4bea061917 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/constraints-data.https.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-data"> +<link rel="match" href="green-square-ref.html"> +<meta name="assert" content="This test checks that passing data to a child layout works correctly." /> +<style> +.test { + background: red; + width: 100px; +} + +@supports (display: layout(parent)) { + .test { + display: layout(parent); + background: green; + } + + .child { + display: layout(child); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +const DATA = { + str: 'hello', + num: 42, + obj: {str2: 'world'}, +}; + +registerLayout('parent', class { + async intrinsicSizes() {} + async layout([child], edges, constraints, styleMap) { + + const childFragment = await child.layoutNextFragment({data: DATA}); + + // If the child's block-size is 100 the structured cloning worked. + if (childFragment.blockSize === 100) { + return {autoBlockSize: 100, childFragments: [childFragment]}; + } + + return {autoBlockSize: 0, childFragments: [childFragment]}; + } +}); + +registerLayout('child', class { + async intrinsicSizes() {} + async layout(children, edges, constraints, styleMap) { + // Use JSON.stringify to make sure the structured cloning worked. + if (constraints.data !== DATA && + JSON.stringify(constraints.data) === JSON.stringify(DATA)) { + return {autoBlockSize: 100}; + } + + return {autoBlockSize: 0}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> 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}; + } +}); diff --git a/testing/web-platform/tests/css/css-layout-api/crash-multicol.https.html b/testing/web-platform/tests/css/css-layout-api/crash-multicol.https.html new file mode 100644 index 0000000000..5f175100e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/crash-multicol.https.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/"> +<meta name="assert" content="This test checks that browser doesn't crash when the layout() function is used with multicol." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<style> +#test { + display: layout('test'); + columns: 2; +} +</style> + +<div id="test"></div> + +<script id="code" type="text/worklet"> +registerLayout('test', class { + async intrinsicSizes() {} + async layout() {} +}); +</script> + +<script> +promise_test(async function() { + await importWorklet(CSS.layoutWorklet, document.getElementById('code').textContent); +}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/all-ref.html b/testing/web-platform/tests/css/css-layout-api/edges/all-ref.html new file mode 100644 index 0000000000..2a04f96e73 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/all-ref.html @@ -0,0 +1,161 @@ +<!DOCTYPE html> +<style> +td { text-align: center; } + +.parent { + box-sizing: border-box; + width: 60px; + height: 60px; + border: solid; + border-width: 1px 2px 3px 4px; + padding: 0px 4px 8px 12px; + position: relative; +} + +.child { + position: absolute; + width: 10px; + height: 10px; + background: green; +} + +.top-left { + top: 0; + left: 12px; +} + +.top-right { + top: 0; + right: 4px; +} + +.bottom-left { + bottom: 8px; + left: 12px; +} + +.bottom-right { + bottom: 8px; + right: 4px; +} +</style> + +<table> + <tr> + <td></td> + <td colspan=2>LTR</td> + <td colspan=2>RTL</td> + </tr> + <tr> + <td></td> + <td>Y</td> + <td>X</td> + <td>Y</td> + <td>X</td> + </tr> + <tr> + <td>HTB</td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + </tr> + <tr> + <td>VRL</td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + </tr> + <tr> + <td>VLR</td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/all.https.html b/testing/web-platform/tests/css/css-layout-api/edges/all.https.html new file mode 100644 index 0000000000..e38d3666b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/all.https.html @@ -0,0 +1,194 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges"> +<link rel="match" href="all-ref.html"> +<meta name="assert" content="This test checks that 'all' sizes are passed to the layout correctly." /> +<style> +td { text-align: center; } + +.parent { + box-sizing: border-box; + width: 60px; + height: 60px; + border: solid; + border-width: 1px 2px 3px 4px; + padding: 0px 4px 8px 12px; + position: relative; + background: red; +} + +@supports (display: layout(test)) { + .parent { + display: layout(test); + background: initial; + } +} + +.child { + width: 10px; + height: 10px; + background: green; +} +</style> +<!-- + This test works by placing four children in each corner of the layout using the edges. + The reference to this test uses absolute positioning to achieve the same effect. +--> +<table> + <tr> + <td></td> + <td colspan=2>LTR</td> + <td colspan=2>RTL</td> + </tr> + <tr> + <td></td> + <td>Y</td> + <td>X</td> + <td>Y</td> + <td>X</td> + </tr> + <tr> + <td>HTB</td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + </tr> + <tr> + <td>VRL</td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + </tr> + <tr> + <td>VLR</td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + </tr> +</table> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> +<script id="code" type="text/worklet"> +registerLayout('test', class { + async intrinsicSizes() {} + async layout(children, edges, constraints) { + const topLeftFragment = await children[0].layoutNextFragment(); + const topRightFragment = await children[1].layoutNextFragment(); + const bottomLeftFragment = await children[2].layoutNextFragment(); + const bottomRightFragment = await children[3].layoutNextFragment(); + + topLeftFragment.inlineOffset = edges.inlineStart; + topLeftFragment.blockOffset = edges.blockStart; + + topRightFragment.inlineOffset = + constraints.fixedInlineSize - topRightFragment.inlineSize - edges.inlineEnd; + topRightFragment.blockOffset = edges.blockStart; + + bottomLeftFragment.inlineOffset = edges.inlineStart; + bottomLeftFragment.blockOffset = + constraints.fixedBlockSize - bottomLeftFragment.blockSize - edges.blockEnd; + + bottomRightFragment.inlineOffset = + constraints.fixedInlineSize - bottomRightFragment.inlineSize - edges.inlineEnd; + bottomRightFragment.blockOffset = + constraints.fixedBlockSize - bottomRightFragment.blockSize - edges.blockEnd; + + return {childFragments: [ + topLeftFragment, + topRightFragment, + bottomLeftFragment, + bottomRightFragment + ]}; + } +}); +</script> +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/border-htb-rtl.https.html b/testing/web-platform/tests/css/css-layout-api/edges/border-htb-rtl.https.html new file mode 100644 index 0000000000..cb200a7675 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/border-htb-rtl.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-layoutedges"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." /> +<style> +.test { + writing-mode: horizontal-tb; + direction: rtl; + background: red; + box-sizing: border-box; + width: 100px; + + --edges-inline-start-expected: 8; + --edges-inline-end-expected: 20; + --edges-block-start-expected: 10; + --edges-block-end-expected: 0; + + font-size: 8px; + + border-color: transparent; + border-style: solid; + border-width: 10px 1em 0 20px; +} + +@supports (display: layout(test)) { + .test { + display: layout(test); + background: green; + } +} +</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/edges.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/border-htb.https.html b/testing/web-platform/tests/css/css-layout-api/edges/border-htb.https.html new file mode 100644 index 0000000000..67a3858830 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/border-htb.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-layoutedges"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." /> +<style> +.test { + writing-mode: horizontal-tb; + background: red; + box-sizing: border-box; + width: 100px; + + --edges-inline-start-expected: 20; + --edges-inline-end-expected: 8; + --edges-block-start-expected: 10; + --edges-block-end-expected: 0; + + font-size: 8px; + + border-color: transparent; + border-style: solid; + border-width: 10px 1em 0 20px; +} + +@supports (display: layout(test)) { + .test { + display: layout(test); + background: green; + } +} +</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/edges.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/border-vlr-rtl.https.html b/testing/web-platform/tests/css/css-layout-api/edges/border-vlr-rtl.https.html new file mode 100644 index 0000000000..8da84e9acc --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/border-vlr-rtl.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-layoutedges"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." /> +<style> +.test { + writing-mode: vertical-lr; + direction: rtl; + background: red; + box-sizing: border-box; + height: 100px; + + --edges-inline-start-expected: 0; + --edges-inline-end-expected: 10; + --edges-block-start-expected: 20; + --edges-block-end-expected: 8; + + font-size: 8px; + + border-color: transparent; + border-style: solid; + border-width: 10px 1em 0 20px; +} + +@supports (display: layout(test)) { + .test { + display: layout(test); + background: green; + } +} +</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/edges.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/border-vlr.https.html b/testing/web-platform/tests/css/css-layout-api/edges/border-vlr.https.html new file mode 100644 index 0000000000..b514b2f22f --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/border-vlr.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-layoutedges"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." /> +<style> +.test { + writing-mode: vertical-lr; + background: red; + box-sizing: border-box; + height: 100px; + + --edges-inline-start-expected: 10; + --edges-inline-end-expected: 0; + --edges-block-start-expected: 20; + --edges-block-end-expected: 8; + + font-size: 8px; + + border-color: transparent; + border-style: solid; + border-width: 10px 1em 0 20px; +} + +@supports (display: layout(test)) { + .test { + display: layout(test); + background: green; + } +} +</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/edges.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/border-vrl-rtl.https.html b/testing/web-platform/tests/css/css-layout-api/edges/border-vrl-rtl.https.html new file mode 100644 index 0000000000..38c8c3f046 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/border-vrl-rtl.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-layoutedges"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." /> +<style> +.test { + writing-mode: vertical-rl; + direction: rtl; + background: red; + box-sizing: border-box; + height: 100px; + + --edges-inline-start-expected: 0; + --edges-inline-end-expected: 10; + --edges-block-start-expected: 8; + --edges-block-end-expected: 20; + + font-size: 8px; + + border-color: transparent; + border-style: solid; + border-width: 10px 1em 0 20px; +} + +@supports (display: layout(test)) { + .test { + display: layout(test); + background: green; + } +} +</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/edges.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/border-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/edges/border-vrl.https.html new file mode 100644 index 0000000000..94c5353eb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/border-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-layoutedges"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." /> +<style> +.test { + writing-mode: vertical-rl; + background: red; + box-sizing: border-box; + height: 100px; + + --edges-inline-start-expected: 10; + --edges-inline-end-expected: 0; + --edges-block-start-expected: 8; + --edges-block-end-expected: 20; + + font-size: 8px; + + border-color: transparent; + border-style: solid; + border-width: 10px 1em 0 20px; +} + +@supports (display: layout(test)) { + .test { + display: layout(test); + background: green; + } +} +</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/edges.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/padding-htb-rtl.https.html b/testing/web-platform/tests/css/css-layout-api/edges/padding-htb-rtl.https.html new file mode 100644 index 0000000000..dfbf2bc099 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/padding-htb-rtl.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-layoutedges"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." /> +<style> +.test { + writing-mode: horizontal-tb; + direction: rtl; + background: red; + box-sizing: border-box; + width: 100px; + + --edges-inline-start-expected: 8; + --edges-inline-end-expected: 20; + --edges-block-start-expected: 10; + --edges-block-end-expected: 0; + + font-size: 8px; + + padding: 10px 1em 0 20px; +} + +@supports (display: layout(test)) { + .test { + display: layout(test); + background: green; + } +} +</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/edges.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/padding-htb.https.html b/testing/web-platform/tests/css/css-layout-api/edges/padding-htb.https.html new file mode 100644 index 0000000000..ebad66594c --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/padding-htb.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-layoutedges"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." /> +<style> +.test { + writing-mode: horizontal-tb; + background: red; + box-sizing: border-box; + width: 100px; + + --edges-inline-start-expected: 20; + --edges-inline-end-expected: 8; + --edges-block-start-expected: 10; + --edges-block-end-expected: 0; + + font-size: 8px; + + padding: 10px 1em 0 20px; +} + +@supports (display: layout(test)) { + .test { + display: layout(test); + background: green; + } +} +</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/edges.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/padding-vlr-rtl.https.html b/testing/web-platform/tests/css/css-layout-api/edges/padding-vlr-rtl.https.html new file mode 100644 index 0000000000..86b0ca5425 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/padding-vlr-rtl.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-layoutedges"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." /> +<style> +.test { + writing-mode: vertical-lr; + direction: rtl; + background: red; + box-sizing: border-box; + height: 100px; + + --edges-inline-start-expected: 0; + --edges-inline-end-expected: 10; + --edges-block-start-expected: 20; + --edges-block-end-expected: 8; + + font-size: 8px; + + padding: 10px 1em 0 20px; +} + +@supports (display: layout(test)) { + .test { + display: layout(test); + background: green; + } +} +</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/edges.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/padding-vlr.https.html b/testing/web-platform/tests/css/css-layout-api/edges/padding-vlr.https.html new file mode 100644 index 0000000000..563884ade3 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/padding-vlr.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-layoutedges"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." /> +<style> +.test { + writing-mode: vertical-lr; + background: red; + box-sizing: border-box; + height: 100px; + + --edges-inline-start-expected: 10; + --edges-inline-end-expected: 0; + --edges-block-start-expected: 20; + --edges-block-end-expected: 8; + + font-size: 8px; + + padding: 10px 1em 0 20px; +} + +@supports (display: layout(test)) { + .test { + display: layout(test); + background: green; + } +} +</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/edges.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/padding-vrl-rtl.https.html b/testing/web-platform/tests/css/css-layout-api/edges/padding-vrl-rtl.https.html new file mode 100644 index 0000000000..bda0a21144 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/padding-vrl-rtl.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-layoutedges"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." /> +<style> +.test { + writing-mode: vertical-rl; + direction: rtl; + background: red; + box-sizing: border-box; + height: 100px; + + --edges-inline-start-expected: 0; + --edges-inline-end-expected: 10; + --edges-block-start-expected: 8; + --edges-block-end-expected: 20; + + font-size: 8px; + + padding: 10px 1em 0 20px; +} + +@supports (display: layout(test)) { + .test { + display: layout(test); + background: green; + } +} +</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/edges.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/padding-vrl.https.html b/testing/web-platform/tests/css/css-layout-api/edges/padding-vrl.https.html new file mode 100644 index 0000000000..a65ecad311 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/padding-vrl.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-layoutedges"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." /> +<style> +.test { + writing-mode: vertical-rl; + background: red; + box-sizing: border-box; + height: 100px; + + --edges-inline-start-expected: 10; + --edges-inline-end-expected: 0; + --edges-block-start-expected: 8; + --edges-block-end-expected: 20; + + font-size: 8px; + + padding: 10px 1em 0 20px; +} + +@supports (display: layout(test)) { + .test { + display: layout(test); + background: green; + } +} +</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/edges.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/scrollbar-ref.html b/testing/web-platform/tests/css/css-layout-api/edges/scrollbar-ref.html new file mode 100644 index 0000000000..cc41754c08 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/scrollbar-ref.html @@ -0,0 +1,159 @@ +<!DOCTYPE html> +<style> +td { text-align: center; } + +.parent { + box-sizing: border-box; + width: 50px; + height: 50px; + border: solid; + position: relative; +} + +.child { + position: absolute; + width: 10px; + height: 10px; + background: green; +} + +.top-left { + top: 0; + left: 0; +} + +.top-right { + top: 0; + right: 0; +} + +.bottom-left { + bottom: 0; + left: 0; +} + +.bottom-right { + bottom: 0; + right: 0; +} +</style> + +<table> + <tr> + <td></td> + <td colspan=2>LTR</td> + <td colspan=2>RTL</td> + </tr> + <tr> + <td></td> + <td>Y</td> + <td>X</td> + <td>Y</td> + <td>X</td> + </tr> + <tr> + <td>HTB</td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + </tr> + <tr> + <td>VRL</td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + </tr> + <tr> + <td>VLR</td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;"> + <div class="child top-left"></div> + <div class="child top-right"></div> + <div class="child bottom-left"></div> + <div class="child bottom-right"></div> + </div> + </td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/scrollbar.https.html b/testing/web-platform/tests/css/css-layout-api/edges/scrollbar.https.html new file mode 100644 index 0000000000..76bbd4dccd --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/scrollbar.https.html @@ -0,0 +1,192 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges"> +<link rel="match" href="scrollbar-ref.html"> +<meta name="assert" content="This test checks that scrollbar sizes are passed to the layout correctly." /> +<style> +td { text-align: center; } + +.parent { + box-sizing: border-box; + width: 50px; + height: 50px; + border: solid; + position: relative; + background: red; +} + +@supports (display: layout(test)) { + .parent { + display: layout(test); + background: initial; + } +} + +.child { + width: 10px; + height: 10px; + background: green; +} +</style> +<!-- + This test works by placing four children in each corner of the layout using the edges. + The reference to this test uses absolute positioning to achieve the same effect. +--> +<table> + <tr> + <td></td> + <td colspan=2>LTR</td> + <td colspan=2>RTL</td> + </tr> + <tr> + <td></td> + <td>Y</td> + <td>X</td> + <td>Y</td> + <td>X</td> + </tr> + <tr> + <td>HTB</td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + </tr> + <tr> + <td>VRL</td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + </tr> + <tr> + <td>VLR</td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + <td> + <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> + </td> + </tr> +</table> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> +<script id="code" type="text/worklet"> +registerLayout('test', class { + async intrinsicSizes() {} + async layout(children, edges, constraints) { + const topLeftFragment = await children[0].layoutNextFragment(); + const topRightFragment = await children[1].layoutNextFragment(); + const bottomLeftFragment = await children[2].layoutNextFragment(); + const bottomRightFragment = await children[3].layoutNextFragment(); + + topLeftFragment.inlineOffset = edges.inlineStart; + topLeftFragment.blockOffset = edges.blockStart; + + topRightFragment.inlineOffset = + constraints.fixedInlineSize - topRightFragment.inlineSize - edges.inlineEnd; + topRightFragment.blockOffset = edges.blockStart; + + bottomLeftFragment.inlineOffset = edges.inlineStart; + bottomLeftFragment.blockOffset = + constraints.fixedBlockSize - bottomLeftFragment.blockSize - edges.blockEnd; + + bottomRightFragment.inlineOffset = + constraints.fixedInlineSize - bottomRightFragment.inlineSize - edges.inlineEnd; + bottomRightFragment.blockOffset = + constraints.fixedBlockSize - bottomRightFragment.blockSize - edges.blockEnd; + + return {childFragments: [ + topLeftFragment, + topRightFragment, + bottomLeftFragment, + bottomRightFragment + ]}; + } +}); +</script> +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/edges/support/edges.js b/testing/web-platform/tests/css/css-layout-api/edges/support/edges.js new file mode 100644 index 0000000000..b70a42f398 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/edges/support/edges.js @@ -0,0 +1,38 @@ +import {areArraysEqual} from '/common/arrays.js'; + +function parseNumber(value) { + const num = parseInt(value.toString()); + if (isNaN(num)) return 0; + return num; +} + +registerLayout('test', class { + static get inputProperties() { + return [ + '--edges-inline-start-expected', + '--edges-inline-end-expected', + '--edges-block-start-expected', + '--edges-block-end-expected', + ]; + } + + async intrinsicSizes() {} + async layout(children, edges, constraints, styleMap) { + const actual = this.constructor.inputProperties.map( + prop => parseNumber(styleMap.get(prop)) + ); + + const expected = [ + edges.inlineStart, + edges.inlineEnd, + edges.blockStart, + edges.blockEnd, + ]; + + if (!areArraysEqual(expected, actual)) { + return {autoBlockSize: 0, childFragments: []}; + } + + return {autoBlockSize: 100, childFragment: []}; + } +}); diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/bad-return.https.html b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/bad-return.https.html new file mode 100644 index 0000000000..7ea0e93b86 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/bad-return.https.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-an-intrinsic-sizes-callback"> +<link rel="match" href="fallback-ref.html"> +<meta name="assert" content="This test checks that a layout() class with the intrinsicSizes function returning a bad value will fallback to block layout." /> +<style> +.test { + background: red; + border: solid 2px; + width: min-content; +} + +.float { + float: left; + height: 100px; + width: 50%; +} + +.fc { + display: flow-root; + height: 100px; +} + +@supports (display: layout(bad-return)) { + .test { + display: layout(bad-return); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="float"></div> + <div class="fc"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('bad-return', class { + async intrinsicSizes() { return 42; } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/constructor-error.https.html b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/constructor-error.https.html new file mode 100644 index 0000000000..2078a49cda --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/constructor-error.https.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#get-a-layout-class-instance"> +<link rel="match" href="fallback-ref.html"> +<meta name="assert" content="This test checks that a layout() class with a throwing constructor will fallback to block layout." /> +<style> +.test { + background: red; + border: solid 2px; + width: min-content; +} + +.float { + float: left; + width: 50%; + height: 100px; +} + +.fc { + display: flow-root; + height: 100px; +} + +@supports (display: layout(throwing-ctor)) { + .test { + display: layout(throwing-ctor); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="float"></div> + <div class="fc"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('throwing-ctor', class { + constructor() { throw Error('fail!'); } + async intrinsicSizes() {} + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/error.https.html b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/error.https.html new file mode 100644 index 0000000000..3a6665d8aa --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/error.https.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-an-intrinsic-sizes-callback"> +<link rel="match" href="fallback-ref.html"> +<meta name="assert" content="This test checks that a layout() class with a throwing intrinsicSizes function will fallback to block layout." /> +<style> +.test { + background: red; + border: solid 2px; + width: min-content; +} + +.float { + float: left; + height: 100px; + width: 50%; +} + +.fc { + display: flow-root; + height: 100px; +} + +@supports (display: layout(throwing-intrinsic-sizes)) { + .test { + display: layout(throwing-intrinsic-sizes); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="float"></div> + <div class="fc"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('throwing-intrinsic-sizes', class { + async intrinsicSizes() { throw Error('fail!'); } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/fallback-ref.html b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/fallback-ref.html new file mode 100644 index 0000000000..6808e14eb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/fallback-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.result { + background: green; + border: solid 2px; + height: 100px; + width: min-content; +} +</style> + +<div class="result"></div> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/invalid-child.https.html b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/invalid-child.https.html new file mode 100644 index 0000000000..c21d1577e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/invalid-child.https.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-an-intrinsic-sizes-callback"> +<link rel="match" href="fallback-ref.html"> +<meta name="assert" content="This test checks that a layout() class performing intrinsicSizes on an invalid child will fallback to block layout." /> +<style> +.test { + background: red; + border: solid 2px; + width: min-content; +} + +.test > div { + height: 100px; +} + +@supports (display: layout(bad-child-layout)) { + .test { + display: layout(bad-child-layout); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('bad-child-layout', class { + static get inputProperties() { return ['--fail']; } + + async intrinsicSizes(children, _, styleMap) { + if (styleMap.get('--fail').toString() !== 'true') { + this.child = children[0]; + } + + // Try to perform layout on the child. If its invalid (we skipped the if + // statement above) we should fallback to block layout. + const childIntrinsicSize = await this.child.intrinsicSizes(); + + return { maxContentSize: 100, minContentSize: 100 }; + } + async layout() {} +}); +</script> + +<script> +function raf() { + return new Promise((resolve) => { + requestAnimationFrame(() => { + resolve(); + }); + }); +} + +(async function() { + if (typeof CSS.layoutWorklet === 'undefined') { + takeScreenshot(); + return; + } + + await importWorklet(CSS.layoutWorklet, document.getElementById('code').textContent); + + // Ensure that all instances have a child to perform an invalid intrinsic size upon. + const test = document.getElementsByClassName('test')[0]; + for (let i = 0; i < 100; i++) { + test.innerHTML = '<div><div>'; + await raf(); + } + + // The next layout should mean that we will fallback to block. + test.innerHTML = '<div></div>'; + test.style.setProperty('--fail', 'true'); + + // Finish up the test. + await raf(); + await raf(); + takeScreenshot(); +})(); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/no-promise.https.html b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/no-promise.https.html new file mode 100644 index 0000000000..c5ec721b54 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/no-promise.https.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-an-intrinsic-sizes-callback"> +<link rel="match" href="fallback-ref.html"> +<meta name="assert" content="This test checks that a layout() class with an intrinsicSizes function that doesn't return a promise will fallback to block layout." /> +<style> +.test { + background: red; + border: solid 2px; + width: min-content; +} + +.child { + height: 100px; +} + +@supports (display: layout(no-promise)) { + .test { + display: layout(no-promise); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('no-promise', class { + intrinsicSizes() { return { minContentSize: 100 }; } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/unresolved-promise.https.html b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/unresolved-promise.https.html new file mode 100644 index 0000000000..f56e331a5a --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-intrinsic-sizes/unresolved-promise.https.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-an-intrinsic-sizes-callback"> +<link rel="match" href="fallback-ref.html"> +<meta name="assert" content="This test checks that a layout() class with an intrinsicSizes function that doesn't return a promise will fallback to block layout." /> +<style> +.test { + background: red; + border: solid 2px; + width: min-content; +} + +.child { + height: 100px; +} + +@supports (display: layout(unresolved-promise)) { + .test { + display: layout(unresolved-promise); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('unresolved-promise', class { + intrinsicSizes() { return new Promise(() => { /* never resolves */ }); } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-layout/bad-return.https.html b/testing/web-platform/tests/css/css-layout-api/fallback-layout/bad-return.https.html new file mode 100644 index 0000000000..3e671537c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-layout/bad-return.https.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback"> +<link rel="match" href="fallback-layout-fallback-ref.html"> +<meta name="assert" content="This test checks that a layout() class with the layout function returning a bad value will fallback to block layout." /> +<style> +.test { + background: red; + border: solid 2px; + width: 100px; +} + +.float { + float: left; + width: 50%; + height: 100px; +} + +.fc { + display: flow-root; + height: 100px; +} + +@supports (display: layout(bad-return)) { + .test { + display: layout(bad-return); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<!-- This tests that when the "layout()" layout function returns a bad value, it will fallback to block layout. --> +<div class="test"> + <div class="float"></div> + <div class="fc"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('bad-return', class { + async intrinsicSizes() {} + async layout() { return 42; } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-layout/constructor-error.https.html b/testing/web-platform/tests/css/css-layout-api/fallback-layout/constructor-error.https.html new file mode 100644 index 0000000000..9ce791ab5b --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-layout/constructor-error.https.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#get-a-layout-class-instance"> +<link rel="match" href="fallback-layout-fallback-ref.html"> +<meta name="assert" content="This test checks that a layout() class with a throwing constructor will fallback to block layout." /> +<style> +.test { + background: red; + border: solid 2px; + width: 100px; +} + +.float { + float: left; + width: 50%; + height: 100px; +} + +.fc { + display: flow-root; + height: 100px; +} + +@supports (display: layout(throwing-ctor)) { + .test { + display: layout(throwing-ctor); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<!-- This tests that when the "layout()" constructor fails, it will fallback to block layout. --> +<div class="test"> + <div class="float"></div> + <div class="fc"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('throwing-ctor', class { + constructor() { throw Error('fail!'); } + async intrinsicSizes() {} + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-layout/error.https.html b/testing/web-platform/tests/css/css-layout-api/fallback-layout/error.https.html new file mode 100644 index 0000000000..0631193e1f --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-layout/error.https.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback"> +<link rel="match" href="fallback-layout-fallback-ref.html"> +<meta name="assert" content="This test checks that a layout() class with a throwing layout function will fallback to block layout." /> +<style> +.test { + background: red; + border: solid 2px; + width: 100px; +} + +.float { + float: left; + width: 50%; + height: 100px; +} + +.fc { + display: flow-root; + height: 100px; +} + +@supports (display: layout(throwing-layout)) { + .test { + display: layout(throwing-layout); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<!-- This tests that when the "layout()" layout function fails, it will fallback to block layout. --> +<div class="test"> + <div class="float"></div> + <div class="fc"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('throwing-layout', class { + async intrinsicSizes() {} + async layout() { throw Error('fail!'); } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-layout/fallback-layout-fallback-ref.html b/testing/web-platform/tests/css/css-layout-api/fallback-layout/fallback-layout-fallback-ref.html new file mode 100644 index 0000000000..63bb91e90c --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-layout/fallback-layout-fallback-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.result { + background: green; + border: solid 2px; + height: 100px; + width: 100px; +} +</style> + +<div class="result"></div> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-layout/invalid-child.https.html b/testing/web-platform/tests/css/css-layout-api/fallback-layout/invalid-child.https.html new file mode 100644 index 0000000000..fb48ac7602 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-layout/invalid-child.https.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback"> +<link rel="match" href="fallback-layout-fallback-ref.html"> +<meta name="assert" content="This test checks that a layout() class performing layout on an invalid child will fallback to block layout." /> +<style> +.test { + background: red; + border: solid 2px; + width: 100px; +} + +.test > div { + height: 100px; +} + +@supports (display: layout(bad-child-layout)) { + .test { + display: layout(bad-child-layout); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('bad-child-layout', class { + static get inputProperties() { return ['--fail']; } + + async intrinsicSizes() {} + async layout(children, _, __, styleMap) { + if (styleMap.get('--fail').toString() !== 'true') { + this.child = children[0]; + } + + // Try to perform layout on the child. If its invalid (we skipped the if + // statement above) we should fallback to block layout. + const fragment = await this.child.layoutNextFragment({}); + + return {autoBlockSize: 0, childFragments: [fragment]}; + } +}); +</script> + +<script> +function raf() { + return new Promise((resolve) => { + requestAnimationFrame(() => { + resolve(); + }); + }); +} + +(async function() { + if (typeof CSS.layoutWorklet === 'undefined') { + takeScreenshot(); + return; + } + + await importWorklet(CSS.layoutWorklet, document.getElementById('code').textContent); + + // Ensure that all instances have a child to perform an invalid layout upon. + const test = document.getElementsByClassName('test')[0]; + for (let i = 0; i < 100; i++) { + test.innerHTML = '<div><div>'; + await raf(); + } + + // The next layout should mean that we will fallback to block. + test.innerHTML = '<div></div>'; + test.style.setProperty('--fail', 'true'); + + // Finish up the test. + await raf(); + await raf(); + takeScreenshot(); +})(); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-layout/invalid-fragment.https.html b/testing/web-platform/tests/css/css-layout-api/fallback-layout/invalid-fragment.https.html new file mode 100644 index 0000000000..d954f44ba3 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-layout/invalid-fragment.https.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback"> +<link rel="match" href="fallback-layout-fallback-ref.html"> +<meta name="assert" content="This test checks that a layout() class returning an invalid fragment will fallback to block layout." /> +<style> +.test { + background: red; + border: solid 2px; + width: 100px; +} + +.test > div { + height: 100px; +} + +@supports (display: layout(bad-request)) { + .test { + display: layout(bad-request); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('bad-request', class { + static get inputProperties() { return ['--fail']; } + + async intrinsicSizes() {} + async layout(children, _, __, styleMap) { + if (styleMap.get('--fail').toString() !== 'true') { + this.fragment = await children[0].layoutNextFragment({}); + } + + // Return, if the fragment is invalid (we skipped the if statement above) + // we should fallback to block layout. + return {autoBlockSize: 0, childFragments: [this.fragment]}; + } +}); +</script> + +<script> +function raf() { + return new Promise((resolve) => { + requestAnimationFrame(() => { + resolve(); + }); + }); +} + +(async function() { + if (typeof CSS.layoutWorklet === 'undefined') { + takeScreenshot(); + return; + } + + await importWorklet(CSS.layoutWorklet, document.getElementById('code').textContent); + + // Ensure that all instances have a child to perform an invalid layout upon. + const test = document.getElementsByClassName('test')[0]; + for (let i = 0; i < 100; i++) { + test.innerHTML = '<div><div>'; + await raf(); + } + + // The next layout should mean that we will fallback to block. + test.innerHTML = '<div></div>'; + test.style.setProperty('--fail', 'true'); + + // Finish up the test. + await raf(); + await raf(); + takeScreenshot(); +})(); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-layout/no-promise.https.html b/testing/web-platform/tests/css/css-layout-api/fallback-layout/no-promise.https.html new file mode 100644 index 0000000000..00670f7bbe --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-layout/no-promise.https.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback"> +<link rel="match" href="fallback-layout-fallback-ref.html"> +<meta name="assert" content="This test checks that a layout() class with a layout function that doesn't return a promise will fallback to block layout." /> +<style> +.test { + background: red; + border: solid 2px; + width: 100px; +} + +.child { + height: 100px; +} + +@supports (display: layout(no-promise)) { + .test { + display: layout(no-promise); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('no-promise', class { + async intrinsicSizes() {} + layout() { return {autoBlockSize: 50}; } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fallback-layout/unresolved-promise.https.html b/testing/web-platform/tests/css/css-layout-api/fallback-layout/unresolved-promise.https.html new file mode 100644 index 0000000000..72ce549acf --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fallback-layout/unresolved-promise.https.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback"> +<link rel="match" href="fallback-layout-fallback-ref.html"> +<meta name="assert" content="This test checks that a layout() class with a layout function that doesn't return a promise will fallback to block layout." /> +<style> +.test { + background: red; + border: solid 2px; + width: 100px; +} + +.child { + height: 100px; +} + +@supports (display: layout(unresolved-promise)) { + .test { + display: layout(unresolved-promise); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('unresolved-promise', class { + async intrinsicSizes() {} + layout() { return new Promise(() => { /* never resolves */ }); } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fragment-data-function-failure.https.html b/testing/web-platform/tests/css/css-layout-api/fragment-data-function-failure.https.html new file mode 100644 index 0000000000..8496967be0 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fragment-data-function-failure.https.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data"> +<link rel="match" href="green-square-ref.html"> +<meta name="assert" content="This test checks that passing something that can't be serialized to the parent triggers a fallback to block layout." /> +<style> +.test { + background: red; + width: 100px; +} + +.child { + height: 100px; +} + +@supports (display: layout(fallback-fn)) { + .test { + display: layout(fallback-fn); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('fallback-fn', class { + async intrinsicSizes() {} + async layout(children, edges, constraints, styleMap) { + const childFragments = await children.map(child => child.layoutNextFragment()); + return {autoBlockSize: 0, childFragments, data: {fn: function() {}}}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fragment-data-immutable.https.html b/testing/web-platform/tests/css/css-layout-api/fragment-data-immutable.https.html new file mode 100644 index 0000000000..e33a6ff0ee --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fragment-data-immutable.https.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data"> +<link rel="match" href="green-square-ref.html"> +<meta name="assert" content="This test checks that LayoutFragment#data is immutable between child layout passes." /> +<style> +.test { + background: red; + width: 100px; +} + +@supports (display: layout(parent)) { + .test { + display: layout(parent); + background: green; + } + + .child { + display: layout(child); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('parent', class { + async intrinsicSizes() {} + async layout([child], edges, constraints, styleMap) { + + const childFragment10 = await child.layoutNextFragment({fixedInlineSize: 10}); + + // First layout data should be "10". + if (childFragment10.data.size !== 10) { + return {autoBlockSize: 0, childFragments: [childFragment10]}; + } + + const childFragment20 = await child.layoutNextFragment({fixedInlineSize: 20}); + + // Second layout data should be "20". + if (childFragment20.data.size !== 20) { + return {autoBlockSize: 0, childFragments: [childFragment10]}; + } + + // First layout data should still be "10". + if (childFragment10.data.size !== 10) { + return {autoBlockSize: 0, childFragments: [childFragment10]}; + } + + return {autoBlockSize: 100, childFragments: [childFragment20]}; + } +}); + +registerLayout('child', class { + async intrinsicSizes() {} + async layout(children, edges, constraints, styleMap) { + return {autoBlockSize: 10, data: {size: constraints.fixedInlineSize}}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fragment-data-sab-failure.https.html b/testing/web-platform/tests/css/css-layout-api/fragment-data-sab-failure.https.html new file mode 100644 index 0000000000..681de5b543 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fragment-data-sab-failure.https.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data"> +<link rel="match" href="green-square-ref.html"> +<meta name="assert" content="This test checks that a SharedArrayBuffer can't be passed to the parent layout." /> +<style> +.test { + background: red; + width: 100px; +} + +.child { + height: 100px; +} + +@supports (display: layout(fallback-sab)) { + .test { + display: layout(fallback-sab); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('fallback-sab', class { + async intrinsicSizes() {} + async layout(children, edges, constraints, styleMap) { + const childFragments = await Promise.all(children.map(child => child.layoutNextFragment())); + + // See https://github.com/whatwg/html/issues/5380 for why not `new SharedArrayBuffer()` + return {autoBlockSize: 0, childFragments, data: {sab: new WebAssembly.Memory({ shared:true, initial:1, maximum:1 }).buffer }}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/fragment-data.https.html b/testing/web-platform/tests/css/css-layout-api/fragment-data.https.html new file mode 100644 index 0000000000..ffc360ab35 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/fragment-data.https.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data"> +<link rel="match" href="green-square-ref.html"> +<meta name="assert" content="This test checks that passing data to a parent layout works correctly." /> +<style> +.test { + background: red; + width: 100px; +} + +@supports (display: layout(parent)) { + .test { + display: layout(parent); + background: green; + } + + .child { + display: layout(child); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +const DATA = { + str: 'hello', + num: 42, + obj: {str2: 'world'}, +}; + +registerLayout('parent', class { + async intrinsicSizes() {} + async layout([child], edges, constraints, styleMap) { + + const childFragment = await child.layoutNextFragment(); + + // Use JSON.stringify to make sure the structured cloning worked. + if (childFragment.data !== DATA && + JSON.stringify(childFragment.data) === JSON.stringify(DATA)) { + return {autoBlockSize: 100, childFragments: [childFragment]}; + } + + return {autoBlockSize: 0, childFragments: [childFragment]}; + } +}); + +registerLayout('child', class { + async intrinsicSizes() {} + async layout(children, edges, constraints, styleMap) { + return {autoBlockSize: 10, data: DATA}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/green-square-ref.html b/testing/web-platform/tests/css/css-layout-api/green-square-ref.html new file mode 100644 index 0000000000..a28e43be4a --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/green-square-ref.html @@ -0,0 +1,9 @@ +<!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/inline-style-layout-function.https.html b/testing/web-platform/tests/css/css-layout-api/inline-style-layout-function.https.html new file mode 100644 index 0000000000..f11405b8e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/inline-style-layout-function.https.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#valdef-display-layout"> +<meta name="assert" content="This test checks that a layout() function is parses and serializes correctly from inline style." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id=test1></div> +<div id=test2></div> +<div id=test3></div> +<script> +test(function() { + const test1 = document.getElementById('test1'); + assert_equals(test1.style.display, ''); + + test1.style.display = 'layout(test1)'; + assert_equals(test1.style.display, 'layout(test1)'); +}); + +test(function() { + const test2 = document.getElementById('test2'); + assert_equals(test2.style.display, ''); + + // layout() should fail to parse. + test2.style.display = 'layout()'; + assert_equals(test2.style.display, ''); +}); + +test(function() { + const test3 = document.getElementById('test3'); + assert_equals(test3.style.display, ''); + + // layout(test3, invalid) should fail to parse. + test3.style.display = 'layout(test3, invalid)'; + assert_equals(test3.style.display, ''); +}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/input-text-crash.https.html b/testing/web-platform/tests/css/css-layout-api/input-text-crash.https.html new file mode 100644 index 0000000000..2d32609040 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/input-text-crash.https.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1181687"> +<input style="display:layout(success);"> diff --git a/testing/web-platform/tests/css/css-layout-api/inside-multicol-crash.https.html b/testing/web-platform/tests/css/css-layout-api/inside-multicol-crash.https.html new file mode 100644 index 0000000000..61223bfcdc --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/inside-multicol-crash.https.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1127112#c7"> +<div style="columns:16;"> + <div style="display:layout(child-layout);"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/absolute-ref.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/absolute-ref.html new file mode 100644 index 0000000000..2f23f68b60 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/absolute-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<style> +.test { + background: green; + position: absolute; +} + +.container-1 { + border: solid 2px; + position: relative; + height: 200px; + width: 300px; +} + +.container-2 { + border: solid 2px; + position: relative; + height: 25px; + width: 25px; +} + +.horizontal { + writing-mode: horizontal-tb; +} + +.vertical { + writing-mode: vertical-rl; +} + +</style> + +<div class="container-1"> + <div class="horizontal test" style="height: 100px; width: 100px; bottom: 0px;"></div> + <div class="vertical test" style="height: 100px; width: 100px; right: 0px;"></div> +</div> + +<div class="container-2"> + <div class="horizontal test" style="height: 25px; width: 50px; bottom: 0px;"></div> +</div> + +<div class="container-2"> + <div class="vertical test" style="height: 50px; width: 25px; right: 0px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/absolute.https.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/absolute.https.html new file mode 100644 index 0000000000..be654ecbc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/absolute.https.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing"> +<link rel="match" href="absolute-ref.html"> +<meta name="assert" content="This test checks that the absolute positioning respects the intrinsicSizes function." /> + +<style> +.test { + background: red; + position: absolute; +} + +@supports (display: layout(test-layout)) { + .test { + display: layout(test-layout); + background: green; + } +} + +.container-1 { + border: solid 2px; + position: relative; + height: 200px; + width: 300px; +} + +.container-2 { + border: solid 2px; + position: relative; + height: 25px; + width: 25px; +} + +.horizontal { + writing-mode: horizontal-tb; +} + +.vertical { + writing-mode: vertical-rl; +} + +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + + +<div class="container-1"> + <div class="horizontal test" style="height: 100px; bottom: 0px;"></div> + <div class="vertical test" style="width: 100px; right: 0px;"></div> +</div> + +<div class="container-2"> + <div class="horizontal test" style="height: 25px; bottom: 0px;"></div> +</div> + +<div class="container-2"> + <div class="vertical test" style="width: 25px; right: 0px;"></div> +</div> + + +<script id="code" type="text/worklet"> +registerLayout('test-layout', class { + async intrinsicSizes() { + return { maxContentSize: 100, minContentSize: 50 }; + } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-replaced-percentage-01.https.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-replaced-percentage-01.https.html new file mode 100644 index 0000000000..058428601d --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-replaced-percentage-01.https.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#intrinsic-sizes"> +<link rel="match" href="child-replaced-percentage-ref.html"> +<meta name="assert" content="This test checks that intrinsicSizes is calculated correctly for a replaced child element with a percentage height." /> +<style> +.test { + background: red; + height: 50px; + width: min-content; +} + +@supports (display: layout(parent)) { + .test { + display: layout(parent); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <canvas width=100 height=100 style="height: 100%;"></canvas> +</div> + +<script id="code" type="text/worklet"> +registerLayout('parent', class { + async intrinsicSizes(children, edges, styleMap) { + const childrenSizes = await Promise.all(children.map((child) => { + return child.intrinsicSizes(); + })); + + if (childrenSizes[0].minContentSize == 50 && + childrenSizes[0].maxContentSize == 50) { + return { maxContentSize: 100, minContentSize: 50 }; + } + return { maxContentSize: 0, minContentSize: 0 }; + } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-replaced-percentage-02.https.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-replaced-percentage-02.https.html new file mode 100644 index 0000000000..42e8207b5b --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-replaced-percentage-02.https.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#intrinsic-sizes"> +<link rel="match" href="child-replaced-percentage-ref.html"> +<meta name="assert" content="This test checks that intrinsicSizes is calculated correctly for a replaced child element with a percentage height." /> +<style> +.test { + background: red; + height: 50px; + width: min-content; +} + +@supports (display: layout(parent)) { + .test { + display: layout(parent); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div style="height: 50%"> + <canvas width=100 height=100 style="height: 100%;"></canvas> + </div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('parent', class { + async intrinsicSizes(children, edges, styleMap) { + const childrenSizes = await Promise.all(children.map((child) => { + return child.intrinsicSizes(); + })); + + if (childrenSizes[0].minContentSize == 25 && + childrenSizes[0].maxContentSize == 25) { + return { maxContentSize: 100, minContentSize: 50 }; + } + return { maxContentSize: 0, minContentSize: 0 }; + } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-replaced-percentage-ref.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-replaced-percentage-ref.html new file mode 100644 index 0000000000..762740ffee --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-replaced-percentage-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<style> +.result { + background: green; + height: 50px; + width: 50px; +} +</style> +<div class="result"></div> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-01-ref.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-01-ref.html new file mode 100644 index 0000000000..3702d72080 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-01-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<style> +.result { + background: green; + height: 100px; + width: 50px; +} +</style> +<div class="result"></div> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-01.https.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-01.https.html new file mode 100644 index 0000000000..c0a00e28bb --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-01.https.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#intrinsic-sizes"> +<link rel="match" href="child-size-01-ref.html"> +<meta name="assert" content="This test checks that passing child intrinsicSizes to a parent works correctly." /> +<style> +.test { + background: red; + height: 100px; + width: min-content; +} + +@supports (display: layout(parent)) { + .test { + display: layout(parent); + background: green; + } + + .child { + display: layout(child); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +const MAX_CONTENT_SIZE = 100; +const MIN_CONTENT_SIZE = 50; + +registerLayout('parent', class { + async intrinsicSizes(children, edges, styleMap) { + const childrenSizes = await Promise.all(children.map((child) => { + return child.intrinsicSizes(); + })); + + if (childrenSizes[0].minContentSize == MIN_CONTENT_SIZE && + childrenSizes[0].maxContentSize == MAX_CONTENT_SIZE) { + return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE }; + } + return { maxContentSize: 0, minContentSize: 0 }; + } + async layout() {} +}); + +registerLayout('child', class { + async intrinsicSizes() { + return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE }; + } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-02-ref.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-02-ref.html new file mode 100644 index 0000000000..76c885e182 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-02-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<style> +.result { + background: green; + height: 100px; + width: 75px; +} +</style> +<div class="result"></div> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-02.https.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-02.https.html new file mode 100644 index 0000000000..030ecfccdc --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-02.https.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#intrinsic-sizes"> +<link rel="match" href="child-size-02-ref.html"> +<meta name="assert" content="This test checks that setting a child's intrinsicSizes does not override its min-width." /> +<style> +.test { + background: red; + height: 100px; + width: min-content; +} + +.child { + min-width: 75px; +} + +@supports (display: layout(parent)) { + .test { + display: layout(parent); + background: green; + } + + .child { + display: layout(child); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +const MAX_CONTENT_SIZE = 100; +const MIN_CONTENT_SIZE = 50; + +registerLayout('parent', class { + static get childInputProperties() { return ['min-width']; } + + async intrinsicSizes(children, edges, styleMap) { + const childrenSizes = await Promise.all(children.map((child) => { + return child.intrinsicSizes(); + })); + + if (childrenSizes[0].minContentSize == child.styleMap.get('min-width').value && + childrenSizes[0].maxContentSize == MAX_CONTENT_SIZE) { + return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE }; + } + return { maxContentSize: 0, minContentSize: 0 }; + } + async layout() {} +}); + +registerLayout('child', class { + async intrinsicSizes() { + return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE }; + } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-03.https.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-03.https.html new file mode 100644 index 0000000000..8b540cf959 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-03.https.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#intrinsic-sizes"> +<link rel="match" href="child-size-02-ref.html"> +<meta name="assert" content="This test checks that setting a child's intrinsicSizes does not override its max-width." /> +<style> +.test { + background: red; + height: 100px; + width: max-content; +} + +.child { + max-width: 75px; +} + +@supports (display: layout(parent)) { + .test { + display: layout(parent); + background: green; + } + + .child { + display: layout(child); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child"></div> +</div> + +<script id="code" type="text/worklet"> +const MAX_CONTENT_SIZE = 100; +const MIN_CONTENT_SIZE = 50; + +registerLayout('parent', class { + static get childInputProperties() { return ['max-width']; } + + async intrinsicSizes(children, edges, styleMap) { + const childrenSizes = await Promise.all(children.map((child) => { + return child.intrinsicSizes(); + })); + + if (childrenSizes[0].minContentSize == MIN_CONTENT_SIZE && + childrenSizes[0].maxContentSize == child.styleMap.get('max-width').value) { + return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE }; + } + return { maxContentSize: 0, minContentSize: 0 }; + } + async layout() {} +}); + +registerLayout('child', class { + async intrinsicSizes() { + return { maxContentSize: MAX_CONTENT_SIZE, minContentSize: MIN_CONTENT_SIZE }; + } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-contribution.https.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-contribution.https.html new file mode 100644 index 0000000000..e21085c9f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/child-size-contribution.https.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#intrinsic-sizes"> +<link rel="match" href="child-size-01-ref.html"> +<meta name="assert" content="This test checks that the child intrinsicSizes returns the min/max size contributions." /> +<style> +.test { + background: red; + height: 100px; + width: min-content; +} + +@supports (display: layout(parent)) { + .test { + display: layout(parent); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div style="width: 100px;"> + <div style="width: 200px;"></div> + </div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('parent', class { + async intrinsicSizes(children, edges, styleMap) { + const childrenSizes = await Promise.all(children.map((child) => { + return child.intrinsicSizes(); + })); + + if (childrenSizes[0].minContentSize == 100 && + childrenSizes[0].maxContentSize == 100) { + return { maxContentSize: 100, minContentSize: 50 }; + } + return { maxContentSize: 0, minContentSize: 0 }; + } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/content-size-ref.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/content-size-ref.html new file mode 100644 index 0000000000..6bccf070a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/content-size-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.test { + background: green; + border: solid 2px; + height: 100px; +} +</style> + +<div class="test" style="width: 96px"></div> +<div class="test" style="width: 46px"></div> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/content-size.https.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/content-size.https.html new file mode 100644 index 0000000000..ed87dd5065 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/content-size.https.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing"> +<link rel="match" href="content-size-ref.html"> +<meta name="assert" content="This test checks that the min-content and max-content sizes respect the values returned from the intrinsicSizes function." /> + +<style> +.test { + background: red; + border: solid 2px; + height: 100px; +} + +.test-1 { + width: max-content; +} + +.test-2 { + width: min-content; +} + +@supports (display: layout(test-layout)) { + .test { + display: layout(test-layout); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + + +<div class="test test-1"></div> +<div class="test test-2"></div> + +<script id="code" type="text/worklet"> +registerLayout('test-layout', class { + async intrinsicSizes() { + return { maxContentSize: 100, minContentSize: 50 }; + } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/floats-ref.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/floats-ref.html new file mode 100644 index 0000000000..11cdb055eb --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/floats-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<style> +.test { + background: green; + border: solid 2px; +} + +.container-1 { + height: 100px; + width: 300px; +} + +.container-2 { + height: 50px; + width: 50px; +} + +.container-3 { + height: 80px; + width: 80px; +} + +.left { + float: left; + writing-mode: horizontal-tb; +} + +.right { + float: right; + writing-mode: vertical-rl; +} +</style> + +<div class="container-1"> + <div class="left test" style="height: 100px; width: 96px;"></div> + <div class="right test" style="height: 96px; width: 100px;"></div> +</div> + +<div class="container-2"> + <div class="left test" style="height: 25px; width: 46px;"></div> + <div class="right test" style="height: 46px; width: 25px;"></div> +</div> + +<div class="container-3"> + <div class="left test" style="height: 25px; width: 76px;"></div> + <div class="right test" style="height: 76px; width: 25px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/floats.https.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/floats.https.html new file mode 100644 index 0000000000..5079b193fe --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/floats.https.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing"> +<link rel="match" href="floats-ref.html"> +<meta name="assert" content="This test checks that if the layout() is a float, the flow layout respects the intrinsicSizes function." /> + +<style> +.test { + background: red; + border: solid 2px; +} + +@supports (display: layout(test-layout)) { + .test { + display: layout(test-layout); + background: green; + } +} + +.container-1 { + height: 100px; + width: 300px; +} + +.container-2 { + height: 50px; + width: 50px; +} + +.container-3 { + height: 80px; + width: 80px; +} + +.left { + float: left; + writing-mode: horizontal-tb; +} + +.right { + float: right; + writing-mode: vertical-rl; +} + +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + + +<div class="container-1"> + <div class="left test" style="height: 100px"></div> + <div class="right test" style="width: 100px"></div> +</div> + +<div class="container-2"> + <div class="left test" style="height: 25px"></div> + <div class="right test" style="width: 25px"></div> +</div> + +<div class="container-3"> + <div class="left test" style="height: 25px"></div> + <div class="right test" style="width: 25px"></div> +</div> + + +<script id="code" type="text/worklet"> +registerLayout('test-layout', class { + async intrinsicSizes() { + return { maxContentSize: 100, minContentSize: 50 }; + } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/invalid-min-max.https.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/invalid-min-max.https.html new file mode 100644 index 0000000000..2b2d8ca76e --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/invalid-min-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/#interaction-sizing"> +<link rel="match" href="invalid-ref.html"> +<meta name="assert" content="This test checks that min-content-size greater than max-content-size is correctly clamped to max-content-size." /> + +<style> +.test { + background: red; + border: solid 2px; + height: 100px; + width: max-content; +} + +@supports (display: layout(invalid-sizes)) { + .test { + display: layout(invalid-sizes); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"></div> + +<script id="code" type="text/worklet"> +registerLayout('invalid-sizes', class { + async intrinsicSizes() { + return { maxContentSize: 10, minContentSize: 200 }; + } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/invalid-ref.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/invalid-ref.html new file mode 100644 index 0000000000..4159356047 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/invalid-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.result { + background: green; + border: solid 2px; + height: 100px; + width: 6px; +} +</style> + +<div class="result"></div> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/negative-max.https.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/negative-max.https.html new file mode 100644 index 0000000000..578803767e --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/negative-max.https.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing"> +<link rel="match" href="negative-ref.html"> +<meta name="assert" content="This test checks that max-content-size is correctly clamped to zero." /> + +<style> + +.test { + background: red; + border: solid 2px; + height: 100px; + width: max-content; +} + +@supports (display: layout(max-content-size-negative)) { + .test { + display: layout(max-content-size-negative); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"></div> + +<script id="code" type="text/worklet"> +registerLayout('max-content-size-negative', class { + async intrinsicSizes() { + return { maxContentSize: -100 }; + } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/negative-min.https.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/negative-min.https.html new file mode 100644 index 0000000000..c614a2fb12 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/negative-min.https.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing"> +<link rel="match" href="negative-ref.html"> +<meta name="assert" content="This test checks that min-content-size is correctly clamped to zero." /> + +<style> + +.test { + background: red; + border: solid 2px; + height: 100px; + width: min-content; +} + +@supports (display: layout(min-content-size-negative)) { + .test { + display: layout(min-content-size-negative); + background: green; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"></div> + +<script id="code" type="text/worklet"> +registerLayout('min-content-size-negative', class { + async intrinsicSizes() { + return { minContentSize: -100 }; + } + async layout() {} +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/negative-ref.html b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/negative-ref.html new file mode 100644 index 0000000000..6808e14eb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/intrinsic-sizes/negative-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.result { + background: green; + border: solid 2px; + height: 100px; + width: min-content; +} +</style> + +<div class="result"></div> diff --git a/testing/web-platform/tests/css/css-layout-api/layout-child/absolute.https.html b/testing/web-platform/tests/css/css-layout-api/layout-child/absolute.https.html new file mode 100644 index 0000000000..7c47e38e7a --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/layout-child/absolute.https.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that absolute children don't appear in the children array." /> + +<style> +.test { + --child-expected: ["2"]; + + background: red; + width: 100px; +} + +.absolute { + position: absolute; + visibility: hidden; + --child: 1; +} + +.inflow { + visibility: hidden; + --child: 2; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="absolute"></div> + <div class="inflow"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/layout-child/before-after.https.html b/testing/web-platform/tests/css/css-layout-api/layout-child/before-after.https.html new file mode 100644 index 0000000000..373392ddfd --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/layout-child/before-after.https.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that boxes created by ::before/::after appear as children." /> + +<style> +.test { + --child-expected: ["1", "2", "3"]; + + background: red; + width: 100px; +} + +.test::before { + visibility: hidden; + content: 'before'; + --child: 1; +} + +.inflow { + visibility: hidden; + --child: 2; +} + +.test::after { + visibility: hidden; + content: 'after'; + --child: 3; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="inflow"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/layout-child/fixed.https.html b/testing/web-platform/tests/css/css-layout-api/layout-child/fixed.https.html new file mode 100644 index 0000000000..95d8852b7d --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/layout-child/fixed.https.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that fixed children don't appear in the children array." /> + +<style> +.test { + --child-expected: ["2"]; + + background: red; + width: 100px; +} + +.fixed { + position: fixed; + visibility: hidden; + --child: 1; +} + +.inflow { + visibility: hidden; + --child: 2; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="fixed"></div> + <div class="inflow"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/layout-child/float.https.html b/testing/web-platform/tests/css/css-layout-api/layout-child/float.https.html new file mode 100644 index 0000000000..e8db261774 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/layout-child/float.https.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that float children appear in the children array." /> + +<style> +.test { + --child-expected: ["1", "2"]; + + background: red; + width: 100px; +} + +.float { + float: right; + visibility: hidden; + --child: 1; +} + +.inflow { + visibility: hidden; + --child: 2; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="float"></div> + <div class="inflow"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/layout-child/inflow.https.html b/testing/web-platform/tests/css/css-layout-api/layout-child/inflow.https.html new file mode 100644 index 0000000000..b43f1a7fac --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/layout-child/inflow.https.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that regular inflow children appear as children." /> + +<style> +.test { + --child-expected: ["1", "2"]; + + background: red; + width: 100px; +} + +.inflow-1 { + visibility: hidden; + --child: 1; +} + +.inflow-2 { + visibility: hidden; + --child: 2; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="inflow-1"></div> + <div class="inflow-2"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/layout-child/inlines-dynamic.https.html b/testing/web-platform/tests/css/css-layout-api/layout-child/inlines-dynamic.https.html new file mode 100644 index 0000000000..50052087f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/layout-child/inlines-dynamic.https.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Layout API: Dynamic blockification of inline children</title> +<link rel="author" href="mailto:obrufau@igalia.com" title="Oriol Brufau"> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children" title="4.1. Layout Children"> +<meta name="assert" content="This test checks that inline children are correctly blockified or unblockified when the display of the parent changes dynamically." /> + +<style> +#wrapper { + display: layout(foo); +} +#test { + display: inline; +} +</style> + +<div id="wrapper"> + <div id="test">Lorem ipsum</div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/worklet-reftest.js"></script> +<script> +promise_test(async function() { + await importWorklet(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); + + const wrapper = document.getElementById("wrapper"); + const test = document.getElementById("test"); + + assert_equals(getComputedStyle(test).display, "block", "The child should have been blockified by the custom layout"); + + wrapper.style.display = "block"; + assert_equals(getComputedStyle(test).display, "inline", "The child should no longer be blockified in block layout"); + + wrapper.style.display = ""; + assert_equals(getComputedStyle(test).display, "block", "The child should have been blockified again"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/layout-child/inlines.https.html b/testing/web-platform/tests/css/css-layout-api/layout-child/inlines.https.html new file mode 100644 index 0000000000..dac7e0b26b --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/layout-child/inlines.https.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that inline children are correctly blockified or wrapped in anonymous boxes." /> + +<style> +/* We have a wrapper in this test to ensure that any text that is positioned + * slightly outside the "test" box doesn't affect the rendering. + * This wrapper has a 10px inline padding which does the trick. */ +.wrapper { + background: green; + padding: 0 10px; + width: 80px; +} + +.test { + --child-expected: ["1", "default", "3", "4", "5"]; + + background: red; + color: green; + width: 80px; + --child: default; +} + +.inflow { + visibility: hidden; + --child: 3; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="wrapper"> + <div class="test"> + <span style="--child: 1;">Text,</span> more text + <div class="inflow"></div> + <span style="--child: 4;">Text, + <div>block!</div> + </span> + <span style="--child: 5;">Other text</span> + </div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/layout-child/support/layout-child-worklet.js b/testing/web-platform/tests/css/css-layout-api/layout-child/support/layout-child-worklet.js new file mode 100644 index 0000000000..70d1b7e457 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/layout-child/support/layout-child-worklet.js @@ -0,0 +1,26 @@ +import {areArraysEqual} from '/common/arrays.js'; + +registerLayout('test', class { + static get inputProperties() { + return [ '--child-expected']; + } + + static get childInputProperties() { + return [ '--child' ]; + } + + async intrinsicSizes() {} + async layout(children, edges, constraints, styleMap) { + const expected = JSON.parse(styleMap.get('--child-expected').toString()); + const actual = children.map((child) => { + return child.styleMap.get('--child').toString().trim(); + }); + + const childFragments = await Promise.all(children.map(child => child.layoutNextFragment({}))); + + if (!areArraysEqual(expected, actual)) + return {autoBlockSize: 0, childFragments}; + + return {autoBlockSize: 100, childFragments}; + } +}); diff --git a/testing/web-platform/tests/css/css-layout-api/layout-child/text-01.https.html b/testing/web-platform/tests/css/css-layout-api/layout-child/text-01.https.html new file mode 100644 index 0000000000..090034fc18 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/layout-child/text-01.https.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that text children are correctly blockified." /> + +<style> +/* We have a wrapper in this test to ensure that any text that is positioned + * slightly outside the "test" box doesn't affect the rendering. + * This wrapper has a 10px inline padding which does the trick. */ +.wrapper { + background: green; + padding: 0 10px; + width: 80px; +} + +.test { + --child-expected: ["default", "2", "default"]; + + background: red; + color: green; + width: 80px; + --child: default; +} + +.inflow { + visibility: hidden; + --child: 2; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="wrapper"> + <div class="test"> + Text text text + <div class="inflow"></div> + Text text text + </div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/layout-child/text-02.https.html b/testing/web-platform/tests/css/css-layout-api/layout-child/text-02.https.html new file mode 100644 index 0000000000..0df7498668 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/layout-child/text-02.https.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children"> +<link rel="match" href="../green-square-ref.html"> +<meta name="assert" content="This test checks that text children are correctly blockified when no other children exist." /> + +<style> +/* We have a wrapper in this test to ensure that any text that is positioned + * slightly outside the "test" box doesn't affect the rendering. + * This wrapper has a 10px inline padding which does the trick. */ +.wrapper { + background: green; + padding: 0 10px; + width: 80px; +} + +.test { + --child-expected: ["default"]; + + background: red; + color: green; + width: 80px; + --child: default; +} + +@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="wrapper"> + <div class="test"> + Text text text + </div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/list-item-multicol-with-custom-layout-child-crash.https.html b/testing/web-platform/tests/css/css-layout-api/list-item-multicol-with-custom-layout-child-crash.https.html new file mode 100644 index 0000000000..be91346c54 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/list-item-multicol-with-custom-layout-child-crash.https.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1127112#c8"> +<div style="display:list-item; columns:2;"> + <div style="display:layout(child-layout);">Do not crash.</div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/multicol-break-before-crash.https.html b/testing/web-platform/tests/css/css-layout-api/multicol-break-before-crash.https.html new file mode 100644 index 0000000000..c2a33802e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/multicol-break-before-crash.https.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-layout-api-1/#breaking-and-fragmentation"> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="height:1px;"></div> + <div style="display:layout(child-layout); break-before:column; height:200px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/multicol-child-crash.https.html b/testing/web-platform/tests/css/css-layout-api/multicol-child-crash.https.html new file mode 100644 index 0000000000..e16532f772 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/multicol-child-crash.https.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1127112#c9"> +<div style="columns:2;"> + <div style="display:layout(child-layout);"> + line1<br> + line2<br> + line3<br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/multicol-details-crash.https.html b/testing/web-platform/tests/css/css-layout-api/multicol-details-crash.https.html new file mode 100644 index 0000000000..8c45190cec --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/multicol-details-crash.https.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1219874"> +<div style="columns:2;"> + <details style="display:layout(foo); columns:2;"></details> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/multicol-fieldset-crash.https.html b/testing/web-platform/tests/css/css-layout-api/multicol-fieldset-crash.https.html new file mode 100644 index 0000000000..a267a6d42b --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/multicol-fieldset-crash.https.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221885"> +<div style="columns:2;"> + <fieldset style="display:layout(child-layout); columns:2;"> + BOO! + </fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/position-fragment/htb-ltr.https.html b/testing/web-platform/tests/css/css-layout-api/position-fragment/htb-ltr.https.html new file mode 100644 index 0000000000..f60109ca57 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/position-fragment/htb-ltr.https.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment"> +<link rel="match" href="ref.html"> +<meta name="assert" content="This test checks that child fragments get positioned correctly." /> +<style> +.test { + background: red; + width: 100px; + height: 100px; +} + +.test { + writing-mode: horizontal-tb; + direction: ltr; +} + +.child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + --inline-offset: 5; + --block-offset: 25; +} + +.child-2 { + writing-mode: vertical-rl; + background: rebeccapurple; + width: 15px; + height: 25px; + + --inline-offset: 50; + --block-offset: 60; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child-1"></div> + <div class="child-2"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/position-fragment/htb-rtl.https.html b/testing/web-platform/tests/css/css-layout-api/position-fragment/htb-rtl.https.html new file mode 100644 index 0000000000..980a3cdc25 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/position-fragment/htb-rtl.https.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment"> +<link rel="match" href="ref.html"> +<meta name="assert" content="This test checks that child fragments get positioned correctly." /> +<style> +.test { + background: red; + width: 100px; + height: 100px; +} + +.test { + writing-mode: horizontal-tb; + direction: rtl; +} + +.child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + --inline-offset: 85; + --block-offset: 25; +} + +.child-2 { + writing-mode: vertical-rl; + background: rebeccapurple; + width: 15px; + height: 25px; + + --inline-offset: 35; + --block-offset: 60; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child-1"></div> + <div class="child-2"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/position-fragment/ref.html b/testing/web-platform/tests/css/css-layout-api/position-fragment/ref.html new file mode 100644 index 0000000000..4ce0a6e39d --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/position-fragment/ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<style> +.result { + position: relative; + background: green; + width: 100px; + height: 100px; +} + +.result-child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + position: absolute; + top: 25px; + left: 5px; +} + +.result-child-2 { + background: rebeccapurple; + width: 15px; + height: 25px; + + position: absolute; + top: 60px; + left: 50px; +} +</style> +<div class="result"> + <div class="result-child-1"></div> + <div class="result-child-2"></div> +</div> diff --git a/testing/web-platform/tests/css/css-layout-api/position-fragment/support/layout-position-child-worklet.js b/testing/web-platform/tests/css/css-layout-api/position-fragment/support/layout-position-child-worklet.js new file mode 100644 index 0000000000..7d5c494952 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/position-fragment/support/layout-position-child-worklet.js @@ -0,0 +1,20 @@ +registerLayout('test', class { + static get childInputProperties() { + return [ + '--inline-offset', + '--block-offset', + ]; + } + + async intrinsicSizes() {} + async layout(children, edges, constraints, styleMap) { + const childFragments = await Promise.all(children.map((child) => child.layoutNextFragment({}))); + + for (let i = 0; i < children.length; i++) { + childFragments[i].inlineOffset = parseInt(children[i].styleMap.get('--inline-offset').toString()); + childFragments[i].blockOffset = parseInt(children[i].styleMap.get('--block-offset').toString()); + } + + return {autoBlockSize: 0, childFragments}; + } +}); diff --git a/testing/web-platform/tests/css/css-layout-api/position-fragment/vlr-ltr.https.html b/testing/web-platform/tests/css/css-layout-api/position-fragment/vlr-ltr.https.html new file mode 100644 index 0000000000..d75a4af639 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/position-fragment/vlr-ltr.https.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment"> +<link rel="match" href="ref.html"> +<meta name="assert" content="This test checks that child fragments get positioned correctly." /> +<style> +.test { + background: red; + width: 100px; + height: 100px; +} + +.test { + writing-mode: vertical-lr; + direction: ltr; +} + +.child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + --inline-offset: 25; + --block-offset: 5; +} + +.child-2 { + writing-mode: vertical-rl; + background: rebeccapurple; + width: 15px; + height: 25px; + + --inline-offset: 60; + --block-offset: 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 class="child-1"></div> + <div class="child-2"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/position-fragment/vlr-rtl.https.html b/testing/web-platform/tests/css/css-layout-api/position-fragment/vlr-rtl.https.html new file mode 100644 index 0000000000..a8ef6c699c --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/position-fragment/vlr-rtl.https.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment"> +<link rel="match" href="ref.html"> +<meta name="assert" content="This test checks that child fragments get positioned correctly." /> +<style> +.test { + background: red; + width: 100px; + height: 100px; +} + +.test { + writing-mode: vertical-lr; + direction: rtl; +} + +.child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + --inline-offset: 55; + --block-offset: 5; +} + +.child-2 { + writing-mode: vertical-rl; + background: rebeccapurple; + width: 15px; + height: 25px; + + --inline-offset: 15; + --block-offset: 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 class="child-1"></div> + <div class="child-2"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/position-fragment/vrl-ltr.https.html b/testing/web-platform/tests/css/css-layout-api/position-fragment/vrl-ltr.https.html new file mode 100644 index 0000000000..21c9ce54d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/position-fragment/vrl-ltr.https.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment"> +<link rel="match" href="ref.html"> +<meta name="assert" content="This test checks that child fragments get positioned correctly." /> +<style> +.test { + background: red; + width: 100px; + height: 100px; +} + +.test { + writing-mode: vertical-rl; + direction: ltr; +} + +.child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + --inline-offset: 25; + --block-offset: 85; +} + +.child-2 { + writing-mode: vertical-rl; + background: rebeccapurple; + width: 15px; + height: 25px; + + --inline-offset: 60; + --block-offset: 35; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child-1"></div> + <div class="child-2"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/position-fragment/vrl-rtl.https.html b/testing/web-platform/tests/css/css-layout-api/position-fragment/vrl-rtl.https.html new file mode 100644 index 0000000000..777e725da9 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/position-fragment/vrl-rtl.https.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment"> +<link rel="match" href="ref.html"> +<meta name="assert" content="This test checks that child fragments get positioned correctly." /> +<style> +.test { + background: red; + width: 100px; + height: 100px; +} + +.test { + writing-mode: vertical-rl; + direction: rtl; +} + +.child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + --inline-offset: 55; + --block-offset: 85; +} + +.child-2 { + writing-mode: vertical-rl; + background: rebeccapurple; + width: 15px; + height: 25px; + + --inline-offset: 15; + --block-offset: 35; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child-1"></div> + <div class="child-2"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/style-map-multi-ref.html b/testing/web-platform/tests/css/css-layout-api/style-map-multi-ref.html new file mode 100644 index 0000000000..fc54068418 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/style-map-multi-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<style> +.result { + background: green; + margin: 10px; + margin-left: 2px; + + width: 100px; + height: 100px; +} +</style> + +<div class="result"></div> diff --git a/testing/web-platform/tests/css/css-layout-api/style-map-multi.https.html b/testing/web-platform/tests/css/css-layout-api/style-map-multi.https.html new file mode 100644 index 0000000000..fe6017b80c --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/style-map-multi.https.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-invalidation"> +<link rel="match" href="style-map-multi-ref.html"> +<meta name="assert" content="This test checks that properties are correctly given to the layout function." /> + +<style> +.test { + background: red; + margin: 10px; + width: 100px; + + /* Properties under test. */ + --foo:bar; + margin-left: 2px; +} + +@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 id="code" type="text/worklet"> +registerLayout('test', class { + static get inputProperties() { + return [ '--bar', '--foo', 'empty-cells', 'margin-left']; + } + + async intrinsicSizes() {} + async layout(children, edges, constraints, styleMap) { + const expected = [ + {property: '--bar', value: '[CSSUnparsedValue=]'}, + {property: '--foo', value: '[CSSUnparsedValue=bar]'}, + {property: 'empty-cells', value: '[CSSKeywordValue=show]'}, + {property: 'margin-left', value: '[CSSUnitValue=2px]'}, + ]; + + const actual = Array.from(styleMap.keys()).sort().map((property) => { + const valueObject = styleMap.get(property); + const value = '[' + valueObject.constructor.name + '=' + valueObject.toString() + ']'; + return {property, value}; + }); + + if (expected.length != actual.length) + return {autoBlockSize: 0}; + + for (let i = 0; i < expected.length; i++) { + if (expected[i].property != actual[i].property) + return {autoBlockSize: 0}; + + if (expected[i].value != actual[i].value) + return {autoBlockSize: 0}; + } + + return {autoBlockSize: 100}; + } +}); +</script> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/style-map-ref.html b/testing/web-platform/tests/css/css-layout-api/style-map-ref.html new file mode 100644 index 0000000000..c24e3949ee --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/style-map-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<style> +.result { + background: green; + margin: 10px; + margin-left: 2px; + + width: 100px; + height: 100px; +} +</style> + +<div class="result"></div> +<div class="result"></div> +<div class="result"></div> +<div class="result"></div> diff --git a/testing/web-platform/tests/css/css-layout-api/style-map.https.html b/testing/web-platform/tests/css/css-layout-api/style-map.https.html new file mode 100644 index 0000000000..52032d9c67 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/style-map.https.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-invalidation"> +<link rel="match" href="style-map-ref.html"> +<meta name="assert" content="This test checks that properties are correctly given to the layout function." /> + +<style> +.test { + background: red; + margin: 10px; + width: 100px; + + /* Properties under test. */ + --foo:bar; + margin-left: 2px; +} + +@supports (display: layout(test)) { + .test { + background: green; + } + + .test-0 { display: layout(test-0); } + .test-1 { display: layout(test-1); } + .test-2 { display: layout(test-2); } + .test-3 { display: layout(test-3); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test test-0"></div> +<div class="test test-1"></div> +<div class="test test-2"></div> +<div class="test test-3"></div> + +<script> +const tmpl = (test, idx) => { + return ` + registerLayout('test-${idx}', class { + static get inputProperties() { return ['${test.property}']; } + + async intrinsicSizes() {} + async layout(children, edges, constraints, styleMap) { + const value = styleMap.get('${test.property}'); + const result = '[' + value.constructor.name + '=' + value.toString() + ']'; + if (result != '${test.expected}') + return {autoBlockSize: 0}; + + const size = Array.from(styleMap.keys()).length; + if (size != 1) + return {autoBlockSize: 0}; + + return {autoBlockSize: 100}; + } + }); + `; +} + +const tests = [ + {property: '--bar', expected: '[CSSUnparsedValue=]'}, + {property: '--foo', expected: '[CSSUnparsedValue=bar]'}, + {property: 'empty-cells', expected: '[CSSKeywordValue=show]'}, + {property: 'margin-left', expected: '[CSSUnitValue=2px]'}, +]; + +const workletSource = tests.map(tmpl).join('\n'); + +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, workletSource); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-layout-api/supports.https.html b/testing/web-platform/tests/css/css-layout-api/supports.https.html new file mode 100644 index 0000000000..e269b29214 --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/supports.https.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#valdef-display-layout"> +<meta name="assert" content="This test checks that a layout() function works correctly with CSS.supports()." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<script> +test(function() { + assert_true(CSS.supports('display', 'layout(foo)')); +}); +</script> diff --git a/testing/web-platform/tests/css/css-layout-api/sync-layout-microtasks.https.html b/testing/web-platform/tests/css/css-layout-api/sync-layout-microtasks.https.html new file mode 100644 index 0000000000..84457c0c9d --- /dev/null +++ b/testing/web-platform/tests/css/css-layout-api/sync-layout-microtasks.https.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback"> +<meta name="assert" content="This test checks running the microtask queue for a layout() class won't run the main world's microtask queue." /> +<style> +#test { + display: layout(child-layout); + width: 100px; +} + +#test > div { + height: 100px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div id="test"> + <div></div> +</div> + +<script id="code" type="text/worklet"> +registerLayout('child-layout', class { + async intrinsicSizes() {} + async layout([child]) { + const fragment = await child.layoutNextFragment(); + return {autoBlockSize: 50, childFragments: [fragment]}; + } +}); +</script> + +<script> +promise_test(async t => { + if (typeof CSS.layoutWorklet === 'undefined') { + throw Error('CSS Layout API not supported.'); + } + + await importWorklet(CSS.layoutWorklet, document.getElementById('code').textContent); + + let resolved = false; + let p = Promise.resolve().then(() => { + resolved = true; + }); + assert_false(resolved); + + // Running the layout-worklet's microtask queue shouldn't trigger the main + // world's microtask queue. + assert_equals(document.getElementById('test').clientHeight, 50); + assert_false(resolved); + + await p; + assert_true(resolved); +}); +</script> +</html> |