mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision a89693b62066da0e4808c0bc76c581188398e73d
This commit is contained in:
WPT Sync Bot
parent
1e79f27cd4
commit
7ddb44a302
102 changed files with 1119 additions and 421 deletions
|
|
@ -0,0 +1,66 @@
|
|||
<!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="layout-child-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;
|
||||
margin: 10px;
|
||||
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,66 @@
|
|||
<!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="layout-child-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;
|
||||
margin: 10px;
|
||||
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,66 @@
|
|||
<!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="layout-child-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;
|
||||
margin: 10px;
|
||||
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,66 @@
|
|||
<!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="layout-child-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;
|
||||
margin: 10px;
|
||||
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>
|
||||
|
|
@ -57,5 +57,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -56,5 +56,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -57,5 +57,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -56,5 +56,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ function parseNumber(value) {
|
|||
registerLayout('test', class {
|
||||
static get childInputProperties() {
|
||||
return [
|
||||
'--available-inline-size',
|
||||
'--available-block-size',
|
||||
'--fixed-inline-size',
|
||||
'--fixed-block-size',
|
||||
'--inline-size-expected',
|
||||
|
|
@ -20,9 +22,16 @@ registerLayout('test', class {
|
|||
*layout(children, edges, constraints, styleMap) {
|
||||
const childFragments = yield 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'));
|
||||
return child.layoutNextFragment({fixedInlineSize, fixedBlockSize});
|
||||
return child.layoutNextFragment({
|
||||
availableInlineSize,
|
||||
availableBlockSize,
|
||||
fixedInlineSize,
|
||||
fixedBlockSize
|
||||
});
|
||||
});
|
||||
|
||||
const actual = childFragments.map((childFragment) => {
|
||||
Loading…
Add table
Add a link
Reference in a new issue