mirror of
https://github.com/servo/servo.git
synced 2025-08-05 13:40:08 +01:00
Update web-platform-tests to revision 3d117ae1266e6bd039a3a1ab92b27e82c3ccc92d
This commit is contained in:
WPT Sync Bot
parent
647796ede6
commit
20a08918d9
132 changed files with 3012 additions and 689 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue