mirror of
https://github.com/servo/servo.git
synced 2025-06-26 18:14:34 +01:00
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>
|