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