зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1575353 [wpt PR 18570] - [css-layout-api] Re-add LayoutEdges., a=testonly
Automatic update from web-platform-tests [css-layout-api] Re-add LayoutEdges. This patch was created by reverting: https://chromium-review.googlesource.com/c/chromium/src/+/1282724 And converting the tests to use promises, and switching the API to NG. I run the patch against the mac-bots a few times to determine if I could reproduced the flakiness which occurred initially to no avail. Bug: 726125 Change-Id: I5f6197699977c03d3efbd4ca0926815faabee19d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1761372 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#689023} -- wpt-commits: 443459a640bf144ec0ea6c7ab4b5e8bc6432f362 wpt-pr: 18570
This commit is contained in:
Ian Kilpatrick
moz-wptsync-bot
Родитель
4c4a5491b5
Коммит
e5301cef4b
|
|
@ -0,0 +1,161 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
td { text-align: center; }
|
||||
|
||||
.parent {
|
||||
box-sizing: border-box;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: solid;
|
||||
border-width: 1px 2px 3px 4px;
|
||||
padding: 0px 4px 8px 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.child {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
top: 0;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
top: 0;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.bottom-left {
|
||||
bottom: 8px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.bottom-right {
|
||||
bottom: 8px;
|
||||
right: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td colspan=2>LTR</td>
|
||||
<td colspan=2>RTL</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Y</td>
|
||||
<td>X</td>
|
||||
<td>Y</td>
|
||||
<td>X</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HTB</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VRL</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VLR</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="all-ref.html">
|
||||
<meta name="assert" content="This test checks that 'all' sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
td { text-align: center; }
|
||||
|
||||
.parent {
|
||||
box-sizing: border-box;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: solid;
|
||||
border-width: 1px 2px 3px 4px;
|
||||
padding: 0px 4px 8px 12px;
|
||||
position: relative;
|
||||
background: red;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.parent {
|
||||
display: layout(test);
|
||||
background: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.child {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
This test works by placing four children in each corner of the layout using the edges.
|
||||
The reference to this test uses absolute positioning to achieve the same effect.
|
||||
-->
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td colspan=2>LTR</td>
|
||||
<td colspan=2>RTL</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Y</td>
|
||||
<td>X</td>
|
||||
<td>Y</td>
|
||||
<td>X</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HTB</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VRL</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VLR</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('test', class {
|
||||
async intrinsicSizes() {}
|
||||
async layout(children, edges, constraints) {
|
||||
const topLeftFragment = await children[0].layoutNextFragment();
|
||||
const topRightFragment = await children[1].layoutNextFragment();
|
||||
const bottomLeftFragment = await children[2].layoutNextFragment();
|
||||
const bottomRightFragment = await children[3].layoutNextFragment();
|
||||
|
||||
topLeftFragment.inlineOffset = edges.inlineStart;
|
||||
topLeftFragment.blockOffset = edges.blockStart;
|
||||
|
||||
topRightFragment.inlineOffset =
|
||||
constraints.fixedInlineSize - topRightFragment.inlineSize - edges.inlineEnd;
|
||||
topRightFragment.blockOffset = edges.blockStart;
|
||||
|
||||
bottomLeftFragment.inlineOffset = edges.inlineStart;
|
||||
bottomLeftFragment.blockOffset =
|
||||
constraints.fixedBlockSize - bottomLeftFragment.blockSize - edges.blockEnd;
|
||||
|
||||
bottomRightFragment.inlineOffset =
|
||||
constraints.fixedInlineSize - bottomRightFragment.inlineSize - edges.inlineEnd;
|
||||
bottomRightFragment.blockOffset =
|
||||
constraints.fixedBlockSize - bottomRightFragment.blockSize - edges.blockEnd;
|
||||
|
||||
return {childFragments: [
|
||||
topLeftFragment,
|
||||
topRightFragment,
|
||||
bottomLeftFragment,
|
||||
bottomRightFragment
|
||||
]};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: horizontal-tb;
|
||||
direction: rtl;
|
||||
background: red;
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
|
||||
--edges-inline-start-expected: 8;
|
||||
--edges-inline-end-expected: 20;
|
||||
--edges-block-start-expected: 10;
|
||||
--edges-block-end-expected: 0;
|
||||
|
||||
font-size: 8px;
|
||||
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 10px 1em 0 20px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: horizontal-tb;
|
||||
background: red;
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
|
||||
--edges-inline-start-expected: 20;
|
||||
--edges-inline-end-expected: 8;
|
||||
--edges-block-start-expected: 10;
|
||||
--edges-block-end-expected: 0;
|
||||
|
||||
font-size: 8px;
|
||||
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 10px 1em 0 20px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
background: red;
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
|
||||
--edges-inline-start-expected: 0;
|
||||
--edges-inline-end-expected: 10;
|
||||
--edges-block-start-expected: 20;
|
||||
--edges-block-end-expected: 8;
|
||||
|
||||
font-size: 8px;
|
||||
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 10px 1em 0 20px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-lr;
|
||||
background: red;
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
|
||||
--edges-inline-start-expected: 10;
|
||||
--edges-inline-end-expected: 0;
|
||||
--edges-block-start-expected: 20;
|
||||
--edges-block-end-expected: 8;
|
||||
|
||||
font-size: 8px;
|
||||
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 10px 1em 0 20px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
direction: rtl;
|
||||
background: red;
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
|
||||
--edges-inline-start-expected: 0;
|
||||
--edges-inline-end-expected: 10;
|
||||
--edges-block-start-expected: 8;
|
||||
--edges-block-end-expected: 20;
|
||||
|
||||
font-size: 8px;
|
||||
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 10px 1em 0 20px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
|
||||
--edges-inline-start-expected: 10;
|
||||
--edges-inline-end-expected: 0;
|
||||
--edges-block-start-expected: 8;
|
||||
--edges-block-end-expected: 20;
|
||||
|
||||
font-size: 8px;
|
||||
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 10px 1em 0 20px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: horizontal-tb;
|
||||
direction: rtl;
|
||||
background: red;
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
|
||||
--edges-inline-start-expected: 8;
|
||||
--edges-inline-end-expected: 20;
|
||||
--edges-block-start-expected: 10;
|
||||
--edges-block-end-expected: 0;
|
||||
|
||||
font-size: 8px;
|
||||
|
||||
padding: 10px 1em 0 20px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: horizontal-tb;
|
||||
background: red;
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
|
||||
--edges-inline-start-expected: 20;
|
||||
--edges-inline-end-expected: 8;
|
||||
--edges-block-start-expected: 10;
|
||||
--edges-block-end-expected: 0;
|
||||
|
||||
font-size: 8px;
|
||||
|
||||
padding: 10px 1em 0 20px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
background: red;
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
|
||||
--edges-inline-start-expected: 0;
|
||||
--edges-inline-end-expected: 10;
|
||||
--edges-block-start-expected: 20;
|
||||
--edges-block-end-expected: 8;
|
||||
|
||||
font-size: 8px;
|
||||
|
||||
padding: 10px 1em 0 20px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-lr;
|
||||
background: red;
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
|
||||
--edges-inline-start-expected: 10;
|
||||
--edges-inline-end-expected: 0;
|
||||
--edges-block-start-expected: 20;
|
||||
--edges-block-end-expected: 8;
|
||||
|
||||
font-size: 8px;
|
||||
|
||||
padding: 10px 1em 0 20px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
direction: rtl;
|
||||
background: red;
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
|
||||
--edges-inline-start-expected: 0;
|
||||
--edges-inline-end-expected: 10;
|
||||
--edges-block-start-expected: 8;
|
||||
--edges-block-end-expected: 20;
|
||||
|
||||
font-size: 8px;
|
||||
|
||||
padding: 10px 1em 0 20px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
|
||||
--edges-inline-start-expected: 10;
|
||||
--edges-inline-end-expected: 0;
|
||||
--edges-block-start-expected: 8;
|
||||
--edges-block-end-expected: 20;
|
||||
|
||||
font-size: 8px;
|
||||
|
||||
padding: 10px 1em 0 20px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
display: layout(test);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test"></div>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
td { text-align: center; }
|
||||
|
||||
.parent {
|
||||
box-sizing: border-box;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: solid;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.child {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.bottom-left {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.bottom-right {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td colspan=2>LTR</td>
|
||||
<td colspan=2>RTL</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Y</td>
|
||||
<td>X</td>
|
||||
<td>Y</td>
|
||||
<td>X</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HTB</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VRL</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VLR</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;">
|
||||
<div class="child top-left"></div>
|
||||
<div class="child top-right"></div>
|
||||
<div class="child bottom-left"></div>
|
||||
<div class="child bottom-right"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
|
||||
<link rel="match" href="scrollbar-ref.html">
|
||||
<meta name="assert" content="This test checks that scrollbar sizes are passed to the layout correctly." />
|
||||
<style>
|
||||
td { text-align: center; }
|
||||
|
||||
.parent {
|
||||
box-sizing: border-box;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: solid;
|
||||
position: relative;
|
||||
background: red;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.parent {
|
||||
display: layout(test);
|
||||
background: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.child {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
This test works by placing four children in each corner of the layout using the edges.
|
||||
The reference to this test uses absolute positioning to achieve the same effect.
|
||||
-->
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td colspan=2>LTR</td>
|
||||
<td colspan=2>RTL</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Y</td>
|
||||
<td>X</td>
|
||||
<td>Y</td>
|
||||
<td>X</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HTB</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VRL</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VLR</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
<script id="code" type="text/worklet">
|
||||
registerLayout('test', class {
|
||||
async intrinsicSizes() {}
|
||||
async layout(children, edges, constraints) {
|
||||
const topLeftFragment = await children[0].layoutNextFragment();
|
||||
const topRightFragment = await children[1].layoutNextFragment();
|
||||
const bottomLeftFragment = await children[2].layoutNextFragment();
|
||||
const bottomRightFragment = await children[3].layoutNextFragment();
|
||||
|
||||
topLeftFragment.inlineOffset = edges.inlineStart;
|
||||
topLeftFragment.blockOffset = edges.blockStart;
|
||||
|
||||
topRightFragment.inlineOffset =
|
||||
constraints.fixedInlineSize - topRightFragment.inlineSize - edges.inlineEnd;
|
||||
topRightFragment.blockOffset = edges.blockStart;
|
||||
|
||||
bottomLeftFragment.inlineOffset = edges.inlineStart;
|
||||
bottomLeftFragment.blockOffset =
|
||||
constraints.fixedBlockSize - bottomLeftFragment.blockSize - edges.blockEnd;
|
||||
|
||||
bottomRightFragment.inlineOffset =
|
||||
constraints.fixedInlineSize - bottomRightFragment.inlineSize - edges.inlineEnd;
|
||||
bottomRightFragment.blockOffset =
|
||||
constraints.fixedBlockSize - bottomRightFragment.blockSize - edges.blockEnd;
|
||||
|
||||
return {childFragments: [
|
||||
topLeftFragment,
|
||||
topRightFragment,
|
||||
bottomLeftFragment,
|
||||
bottomRightFragment
|
||||
]};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import {areArraysEqual} from '/common/arrays.js';
|
||||
|
||||
function parseNumber(value) {
|
||||
const num = parseInt(value.toString());
|
||||
if (isNaN(num)) return 0;
|
||||
return num;
|
||||
}
|
||||
|
||||
registerLayout('test', class {
|
||||
static get inputProperties() {
|
||||
return [
|
||||
'--edges-inline-start-expected',
|
||||
'--edges-inline-end-expected',
|
||||
'--edges-block-start-expected',
|
||||
'--edges-block-end-expected',
|
||||
];
|
||||
}
|
||||
|
||||
async intrinsicSizes() {}
|
||||
async layout(children, edges, constraints, styleMap) {
|
||||
const actual = this.constructor.inputProperties.map(
|
||||
prop => parseNumber(styleMap.get(prop))
|
||||
);
|
||||
|
||||
const expected = [
|
||||
edges.inlineStart,
|
||||
edges.inlineEnd,
|
||||
edges.blockStart,
|
||||
edges.blockEnd,
|
||||
];
|
||||
|
||||
if (!areArraysEqual(expected, actual)) {
|
||||
return {autoBlockSize: 0, childFragments: []};
|
||||
}
|
||||
|
||||
return {autoBlockSize: 100, childFragment: []};
|
||||
}
|
||||
});
|
||||
Загрузка…
Ссылка в новой задаче