diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-layout-api/layout-child')
10 files changed, 433 insertions, 0 deletions
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> |