mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +02:00
e5301cef4b
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
194 lines
5.7 KiB
HTML
194 lines
5.7 KiB
HTML
<!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>
|