mirror of
https://github.com/servo/servo.git
synced 2025-08-05 21:50:18 +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
|
|
@ -1,8 +1,8 @@
|
|||
<!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." />
|
||||
<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 {
|
||||
|
|
@ -61,5 +61,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
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>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<!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." />
|
||||
<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 {
|
||||
|
|
@ -61,5 +61,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<!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." />
|
||||
<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 {
|
||||
|
|
@ -61,5 +61,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
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>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<!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." />
|
||||
<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 {
|
||||
|
|
@ -61,5 +61,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
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>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!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">
|
||||
<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>
|
||||
|
|
@ -56,5 +56,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!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">
|
||||
<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>
|
||||
|
|
@ -55,5 +55,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!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">
|
||||
<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>
|
||||
|
|
@ -56,5 +56,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!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">
|
||||
<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>
|
||||
|
|
@ -55,5 +55,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
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>
|
||||
|
|
@ -13,6 +13,8 @@ registerLayout('test', class {
|
|||
'--available-block-size',
|
||||
'--fixed-inline-size',
|
||||
'--fixed-block-size',
|
||||
'--percentage-inline-size',
|
||||
'--percentage-block-size',
|
||||
'--inline-size-expected',
|
||||
'--block-size-expected'
|
||||
];
|
||||
|
|
@ -26,11 +28,15 @@ registerLayout('test', class {
|
|||
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
|
||||
fixedBlockSize,
|
||||
percentageInlineSize,
|
||||
percentageBlockSize,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue