Skip to content

Commit 574914d

Browse files
marco-cmarco-c
committed
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 <mstenshochromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrickchromium.org> Cr-Commit-Position: refs/heads/master{#689023} -- wpt-commits: 443459a640bf144ec0ea6c7ab4b5e8bc6432f362 wpt-pr: 18570 UltraBlame original commit: 49e8bb08d5d951bb744bd29feb0c3bfd34888c0b
1 parent 4209d95 commit 574914d

17 files changed

+1194
-0
lines changed

‎testing/web-platform/tests/css/css-layout-api/edges/all-ref.html

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<!DOCTYPE html>
2+
<style>
3+
td { text-align: center; }
4+
5+
.parent {
6+
box-sizing: border-box;
7+
width: 60px;
8+
height: 60px;
9+
border: solid;
10+
border-width: 1px 2px 3px 4px;
11+
padding: 0px 4px 8px 12px;
12+
position: relative;
13+
}
14+
15+
.child {
16+
position: absolute;
17+
width: 10px;
18+
height: 10px;
19+
background: green;
20+
}
21+
22+
.top-left {
23+
top: 0;
24+
left: 12px;
25+
}
26+
27+
.top-right {
28+
top: 0;
29+
right: 4px;
30+
}
31+
32+
.bottom-left {
33+
bottom: 8px;
34+
left: 12px;
35+
}
36+
37+
.bottom-right {
38+
bottom: 8px;
39+
right: 4px;
40+
}
41+
</style>
42+
43+
<table>
44+
<tr>
45+
<td></td>
46+
<td colspan=2>LTR</td>
47+
<td colspan=2>RTL</td>
48+
</tr>
49+
<tr>
50+
<td></td>
51+
<td>Y</td>
52+
<td>X</td>
53+
<td>Y</td>
54+
<td>X</td>
55+
</tr>
56+
<tr>
57+
<td>HTB</td>
58+
<td>
59+
<div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;">
60+
<div class="child top-left"></div>
61+
<div class="child top-right"></div>
62+
<div class="child bottom-left"></div>
63+
<div class="child bottom-right"></div>
64+
</div>
65+
</td>
66+
<td>
67+
<div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;">
68+
<div class="child top-left"></div>
69+
<div class="child top-right"></div>
70+
<div class="child bottom-left"></div>
71+
<div class="child bottom-right"></div>
72+
</div>
73+
</td>
74+
<td>
75+
<div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;">
76+
<div class="child top-left"></div>
77+
<div class="child top-right"></div>
78+
<div class="child bottom-left"></div>
79+
<div class="child bottom-right"></div>
80+
</div>
81+
</td>
82+
<td>
83+
<div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;">
84+
<div class="child top-left"></div>
85+
<div class="child top-right"></div>
86+
<div class="child bottom-left"></div>
87+
<div class="child bottom-right"></div>
88+
</div>
89+
</td>
90+
</tr>
91+
<tr>
92+
<td>VRL</td>
93+
<td>
94+
<div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;">
95+
<div class="child top-left"></div>
96+
<div class="child top-right"></div>
97+
<div class="child bottom-left"></div>
98+
<div class="child bottom-right"></div>
99+
</div>
100+
</td>
101+
<td>
102+
<div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;">
103+
<div class="child top-left"></div>
104+
<div class="child top-right"></div>
105+
<div class="child bottom-left"></div>
106+
<div class="child bottom-right"></div>
107+
</div>
108+
</td>
109+
<td>
110+
<div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;">
111+
<div class="child top-left"></div>
112+
<div class="child top-right"></div>
113+
<div class="child bottom-left"></div>
114+
<div class="child bottom-right"></div>
115+
</div>
116+
</td>
117+
<td>
118+
<div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;">
119+
<div class="child top-left"></div>
120+
<div class="child top-right"></div>
121+
<div class="child bottom-left"></div>
122+
<div class="child bottom-right"></div>
123+
</div>
124+
</td>
125+
</tr>
126+
<tr>
127+
<td>VLR</td>
128+
<td>
129+
<div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;">
130+
<div class="child top-left"></div>
131+
<div class="child top-right"></div>
132+
<div class="child bottom-left"></div>
133+
<div class="child bottom-right"></div>
134+
</div>
135+
</td>
136+
<td>
137+
<div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;">
138+
<div class="child top-left"></div>
139+
<div class="child top-right"></div>
140+
<div class="child bottom-left"></div>
141+
<div class="child bottom-right"></div>
142+
</div>
143+
</td>
144+
<td>
145+
<div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;">
146+
<div class="child top-left"></div>
147+
<div class="child top-right"></div>
148+
<div class="child bottom-left"></div>
149+
<div class="child bottom-right"></div>
150+
</div>
151+
</td>
152+
<td>
153+
<div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;">
154+
<div class="child top-left"></div>
155+
<div class="child top-right"></div>
156+
<div class="child bottom-left"></div>
157+
<div class="child bottom-right"></div>
158+
</div>
159+
</td>
160+
</tr>
161+
</table>

‎testing/web-platform/tests/css/css-layout-api/edges/all.https.html

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
4+
<link rel="match" href="all-ref.html">
5+
<meta name="assert" content="This test checks that 'all' sizes are passed to the layout correctly." />
6+
<style>
7+
td { text-align: center; }
8+
9+
.parent {
10+
box-sizing: border-box;
11+
width: 60px;
12+
height: 60px;
13+
border: solid;
14+
border-width: 1px 2px 3px 4px;
15+
padding: 0px 4px 8px 12px;
16+
position: relative;
17+
background: red;
18+
}
19+
20+
@supports (display: layout(test)) {
21+
.parent {
22+
display: layout(test);
23+
background: initial;
24+
}
25+
}
26+
27+
.child {
28+
width: 10px;
29+
height: 10px;
30+
background: green;
31+
}
32+
</style>
33+
34+
35+
36+
37+
<table>
38+
<tr>
39+
<td></td>
40+
<td colspan=2>LTR</td>
41+
<td colspan=2>RTL</td>
42+
</tr>
43+
<tr>
44+
<td></td>
45+
<td>Y</td>
46+
<td>X</td>
47+
<td>Y</td>
48+
<td>X</td>
49+
</tr>
50+
<tr>
51+
<td>HTB</td>
52+
<td>
53+
<div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;">
54+
<div class="child"></div>
55+
<div class="child"></div>
56+
<div class="child"></div>
57+
<div class="child"></div>
58+
</div>
59+
</td>
60+
<td>
61+
<div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;">
62+
<div class="child"></div>
63+
<div class="child"></div>
64+
<div class="child"></div>
65+
<div class="child"></div>
66+
</div>
67+
</td>
68+
<td>
69+
<div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;">
70+
<div class="child"></div>
71+
<div class="child"></div>
72+
<div class="child"></div>
73+
<div class="child"></div>
74+
</div>
75+
</td>
76+
<td>
77+
<div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;">
78+
<div class="child"></div>
79+
<div class="child"></div>
80+
<div class="child"></div>
81+
<div class="child"></div>
82+
</div>
83+
</td>
84+
</tr>
85+
<tr>
86+
<td>VRL</td>
87+
<td>
88+
<div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;">
89+
<div class="child"></div>
90+
<div class="child"></div>
91+
<div class="child"></div>
92+
<div class="child"></div>
93+
</div>
94+
</td>
95+
<td>
96+
<div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;">
97+
<div class="child"></div>
98+
<div class="child"></div>
99+
<div class="child"></div>
100+
<div class="child"></div>
101+
</div>
102+
</td>
103+
<td>
104+
<div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;">
105+
<div class="child"></div>
106+
<div class="child"></div>
107+
<div class="child"></div>
108+
<div class="child"></div>
109+
</div>
110+
</td>
111+
<td>
112+
<div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;">
113+
<div class="child"></div>
114+
<div class="child"></div>
115+
<div class="child"></div>
116+
<div class="child"></div>
117+
</div>
118+
</td>
119+
</tr>
120+
<tr>
121+
<td>VLR</td>
122+
<td>
123+
<div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;">
124+
<div class="child"></div>
125+
<div class="child"></div>
126+
<div class="child"></div>
127+
<div class="child"></div>
128+
</div>
129+
</td>
130+
<td>
131+
<div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;">
132+
<div class="child"></div>
133+
<div class="child"></div>
134+
<div class="child"></div>
135+
<div class="child"></div>
136+
</div>
137+
</td>
138+
<td>
139+
<div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;">
140+
<div class="child"></div>
141+
<div class="child"></div>
142+
<div class="child"></div>
143+
<div class="child"></div>
144+
</div>
145+
</td>
146+
<td>
147+
<div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;">
148+
<div class="child"></div>
149+
<div class="child"></div>
150+
<div class="child"></div>
151+
<div class="child"></div>
152+
</div>
153+
</td>
154+
</tr>
155+
</table>
156+
<script src="/common/reftest-wait.js"></script>
157+
<script src="/common/worklet-reftest.js"></script>
158+
<script id="code" type="text/worklet">
159+
registerLayout('test', class {
160+
async intrinsicSizes() {}
161+
async layout(children, edges, constraints) {
162+
const topLeftFragment = await children[0].layoutNextFragment();
163+
const topRightFragment = await children[1].layoutNextFragment();
164+
const bottomLeftFragment = await children[2].layoutNextFragment();
165+
const bottomRightFragment = await children[3].layoutNextFragment();
166+
167+
topLeftFragment.inlineOffset = edges.inlineStart;
168+
topLeftFragment.blockOffset = edges.blockStart;
169+
170+
topRightFragment.inlineOffset =
171+
constraints.fixedInlineSize - topRightFragment.inlineSize - edges.inlineEnd;
172+
topRightFragment.blockOffset = edges.blockStart;
173+
174+
bottomLeftFragment.inlineOffset = edges.inlineStart;
175+
bottomLeftFragment.blockOffset =
176+
constraints.fixedBlockSize - bottomLeftFragment.blockSize - edges.blockEnd;
177+
178+
bottomRightFragment.inlineOffset =
179+
constraints.fixedInlineSize - bottomRightFragment.inlineSize - edges.inlineEnd;
180+
bottomRightFragment.blockOffset =
181+
constraints.fixedBlockSize - bottomRightFragment.blockSize - edges.blockEnd;
182+
183+
return {childFragments: [
184+
topLeftFragment,
185+
topRightFragment,
186+
bottomLeftFragment,
187+
bottomRightFragment
188+
]};
189+
}
190+
});
191+
</script>
192+
<script>
193+
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
194+
</script>

‎testing/web-platform/tests/css/css-layout-api/edges/border-htb-rtl.https.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
4+
<link rel="match" href="../green-square-ref.html">
5+
<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." />
6+
<style>
7+
.test {
8+
writing-mode: horizontal-tb;
9+
direction: rtl;
10+
background: red;
11+
box-sizing: border-box;
12+
width: 100px;
13+
14+
--edges-inline-start-expected: 8;
15+
--edges-inline-end-expected: 20;
16+
--edges-block-start-expected: 10;
17+
--edges-block-end-expected: 0;
18+
19+
font-size: 8px;
20+
21+
border-color: transparent;
22+
border-style: solid;
23+
border-width: 10px 1em 0 20px;
24+
}
25+
26+
@supports (display: layout(test)) {
27+
.test {
28+
display: layout(test);
29+
background: green;
30+
}
31+
}
32+
</style>
33+
<script src="/common/reftest-wait.js"></script>
34+
<script src="/common/worklet-reftest.js"></script>
35+
36+
<div class="test"></div>
37+
<script>
38+
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
39+
</script>

0 commit comments

Comments
 (0)