Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-12 08:55:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'02400d32d48521baa38663fe8601779994fcfb78'

Browse source
This commit is contained in:
WPT Sync Bot 2023-05-21 01:35:12 +00:00
parent bc8cea2495
commit f0bb7a6f9c
483 changed files with 12767 additions and 2644 deletions
Download patch file Download diff file Expand all files Collapse all files

8
tests/wpt/web-platform-tests/css/css-anchor-position/anchor-name-001.html
View file

@ -24,16 +24,16 @@
</style>
<body onload="checkLayoutForAnchorPos('.target')">
<!--
All targets should find the 10px anchor, because it's the first
All targets should find the 30px anchor, because it's the last
one in the pre-order DFS from the `relpos`.
-->
<div class="relpos">
<div class="target" data-expected-width=10></div>
<div class="target" data-expected-width=30></div>
<div class="anchor1" style="width: 10px">
<div class="anchor1" style="width: 20px"></div>
<div class="target" data-expected-width=10></div>
<div class="target" data-expected-width=30></div>
</div>
<div class="anchor1" style="width: 30px"></div>
<div class="target" data-expected-width=10></div>
<div class="target" data-expected-width=30></div>
</div>
</body>

16
tests/wpt/web-platform-tests/css/css-anchor-position/anchor-name-002.html
View file

@ -29,20 +29,26 @@
<div class="relpos">
<div>
<div class="relpos">
<!-- This target should not find the anchor, because the last containing
block has `position: absolute` and is after in tree order. -->
<div class="target" data-expected-width=0></div>
<div class="abspos">
<div class="relpos">
<div class="anchor1" style="position: absolute"></div>
<!-- This target should not find the anchor, because the anchor is
positioned. -->
absolutely positioned after it. -->
<div class="target" data-expected-width=0></div>
<div class="anchor1" style="position: absolute"></div>
<!-- This target should find the anchor, because the anchor is
absolutely positioned before it. -->
<div class="target" data-expected-width=10></div>
</div>
<!-- This target should find the anchor, because the last containing
block has `position: relative`. -->
<div class="target" data-expected-width=10></div>
</div>
<!-- This target should not find the anchor, because the last containing
block has `position: absolute`. -->
<div class="target" data-expected-width=0></div>
<!-- This target should find the anchor, because the last containing
block has `position: absolute` and is before in tree order. -->
<div class="target" data-expected-width=10></div>
</div>
</div>
<!-- This target should find the anchor, because the last containing block

78
tests/wpt/web-platform-tests/css/css-anchor-position/anchor-name-003.html
View file

@ -29,109 +29,123 @@
<body onload="checkLayoutForAnchorPos('.target')">
<!-- In-flow and out-of-flow boxes in a containing block. -->
<div class="relpos">
<div class="target" data-expected-width=30></div>
<div>
<div class="target" data-expected-width=30></div>
<div class="relpos">
<div class="abspos">
<div class="relpos">
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="anchor1" style="width: 20px"></div>
<div class="anchor1" style="position: absolute; width: 30px"></div>
<div class="anchor1" style="width: 40px"></div>
<div class="target" data-expected-width=20></div>
</div>
<div class="target" data-expected-width=10></div>
</div>
<div class="target" data-expected-width=0></div>
<div class="abspos">
<div class="target" data-expected-width=30></div>
<div class="relpos">
<div class="target" data-expected-width=40></div>
<div class="anchor1" style="width: 20px"></div>
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="anchor1" style="width: 40px"></div>
<div class="anchor1" style="position: absolute; width: 30px"></div>
<div class="target" data-expected-width=30></div>
</div>
</div>
<div class="target" data-expected-width=30></div>
</div>
<div class="target" data-expected-width=10></div>
<div class="target" data-expected-width=30></div>
</div>
<div class="target" data-expected-width=10></div>
<div class="target" data-expected-width=30></div>
</div>
<!-- In-flow boxes in ancestors, after the propagated ones. -->
<div class="relpos">
<div>
<div class="relpos">
<div class="target" data-expected-width=0></div>
<div class="abspos">
<div class="relpos">
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="anchor1" style="width: 20px"></div>
<div class="target" data-expected-width=20></div>
<div class="anchor1" style="width: 20px"></div>
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="target" data-expected-width=10></div>
</div>
<div class="anchor1" style="width: 50px"></div>
<div class="target" data-expected-width=10></div>
<div class="target" data-expected-width=50></div>
</div>
<div class="target" data-expected-width=0></div>
<div class="target" data-expected-width=50></div>
</div>
<div class="anchor1" style="width: 60px"></div>
<div class="target" data-expected-width=10></div>
<div class="target" data-expected-width=70></div>
</div>
<div class="anchor1" style="width: 70px"></div>
<div class="target" data-expected-width=10></div>
<div class="target" data-expected-width=70></div>
</div>
<!-- Out-of-flow boxes in ancestors, after the propagated ones. -->
<div class="relpos">
<div>
<div class="relpos">
<div class="target" data-expected-width=0></div>
<div class="abspos">
<div class="relpos">
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="anchor1" style="width: 20px"></div>
<div class="target" data-expected-width=20></div>
<div class="anchor1" style="width: 20px"></div>
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="target" data-expected-width=10></div>
</div>
<div class="anchor1" style="position: absolute; width: 110px"></div>
<div class="target" data-expected-width=10></div>
<div class="target" data-expected-width=110></div>
</div>
<div class="target" data-expected-width=0></div>
<div class="target" data-expected-width=110></div>
</div>
<div class="target" data-expected-width=10></div>
<div class="target" data-expected-width=110></div>
</div>
<div class="anchor1" style="position: absolute; width: 100px"></div>
<div class="target" data-expected-width=10></div>
<div class="target" data-expected-width=100></div>
</div>
<!-- In-flow boxes in ancestors, before the propagated ones. -->
<div class="relpos">
<div class="anchor1" style="width: 100px"></div>
<div>
<div class="relpos">
<div class="anchor1" style="width: 110px"></div>
<div class="abspos">
<div class="anchor1" style="width: 120px"></div>
<div class="relpos">
<div class="target" data-expected-width=20></div>
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="anchor1" style="width: 20px"></div>
<div class="target" data-expected-width=20></div>
</div>
<div class="anchor1" style="width: 120px"></div>
<div class="target" data-expected-width=120></div>
</div>
<div class="anchor1" style="width: 110px"></div>
<div class="target" data-expected-width=110></div>
</div>
<div class="target" data-expected-width=100></div>
</div>
<div class="anchor1" style="width: 100px"></div>
<div class="target" data-expected-width=100></div>
</div>
<!-- Out-of-flow boxes in ancestors, before the propagated ones. -->
<div class="relpos">
<div class="target" data-expected-width=10></div>
<div class="anchor1" style="position: absolute; width: 100px"></div>
<div>
<div class="target" data-expected-width=10></div>
<div class="relpos">
<div class="target" data-expected-width=0></div>
<div class="anchor1" style="position: absolute; width: 110px"></div>
<div class="abspos">
<div class="target" data-expected-width=10></div>
<div class="anchor1" style="position: absolute; width: 120px"></div>
<div class="relpos">
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="anchor1" style="width: 20px"></div>
<div class="target" data-expected-width=20></div>
<div class="anchor1" style="width: 20px"></div>
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="target" data-expected-width=10></div>
</div>
<div class="target" data-expected-width=10></div>
</div>
<div class="target" data-expected-width=0></div>
<div class="target" data-expected-width=10></div>
</div>
<div class="target" data-expected-width=110></div>
<div class="target" data-expected-width=10></div>
</div>
<div class="target" data-expected-width=110></div>
<div class="target" data-expected-width=10></div>
</div>
</body>

4
tests/wpt/web-platform-tests/css/css-anchor-position/anchor-name-inline-001.html
View file

@ -42,10 +42,12 @@
<div class="container relpos xcolumns">
<div style="height: 150px"></div>
<div class="relpos">
<span class="target" data-expected-width=20></span>
<span class="relpos">
<span class="target" data-expected-width=20></span>
<span class="relpos">
<span class="anchor abspos">123</span>
<span class="anchor">12</span>
<span class="anchor abspos">123</span>
<span class="target" data-expected-width=20></span>
</span>
<span class="target" data-expected-width=30></span>

5
tests/wpt/web-platform-tests/css/css-anchor-position/anchor-name-multicol-003.html
View file

@ -43,16 +43,17 @@
}
</style>
<body onload="checkLayoutForAnchorPos('.target')">
<!-- All targets should find the abspos anchor -->
<div class="spacer"></div>
<div class="relpos">
<div class="columns relpos">
<div class="relpos">
<div class="relpos">
<div class="spacer"></div>
<div class="anchor abspos" style="top: 120px; height: 100px"></div>
<div class="anchor" style="height: 60px"></div>
<div class="anchor abspos" style="top: 120px; height: 100px"></div>
<div class="target"
data-expected-width=40 data-expected-height=50></div>
data-expected-width=70 data-expected-height=50></div>
</div>
<div class="target"
data-expected-width=70 data-expected-height=50></div>

3
tests/wpt/web-platform-tests/css/css-anchor-position/anchor-name-multicol-004.html
View file

@ -43,13 +43,14 @@
}
</style>
<body onload="checkLayoutForAnchorPos('.target')">
<!-- All targets should find the static positioned anchor -->
<div class="spacer"></div>
<div class="relpos">
<div class="columns relpos">
<div class="relpos">
<div class="spacer"></div>
<div class="anchor" style="height: 60px"></div>
<div class="anchor abspos" style="top: 120px; height: 100px"></div>
<div class="anchor" style="height: 60px"></div>
<div class="target"
data-expected-width=40 data-expected-height=50></div>
</div>

12
tests/wpt/web-platform-tests/css/css-anchor-position/anchor-position-003.html
View file

@ -30,23 +30,23 @@
}
</style>
<!--
To determine the target anchor element, find the first element el in tree
order.
To determine the target anchor element, find the last acceptable anchor
element el in tree order.
https://drafts.csswg.org/css-anchor-1/#determining
-->
<body onload="checkLayoutForAnchorPos('.target')">
<div class="cb">
<div class="anchor1 size5x7"></div>
<div class="anchor1 size9x11"></div>
<div class="target" style="left: anchor(--a1 right)" data-offset-x=5></div>
<div class="target" style="left: anchor(--a1 right)" data-offset-x=9></div>
</div>
<div class="cb">
<div class="anchor1 size5x7">
<div class="anchor1 size9x11"></div>
<div class="target" style="left: anchor(--a1 right)" data-offset-x=5></div>
<div class="target" style="left: anchor(--a1 right)" data-offset-x=9></div>
</div>
<div class="target" style="left: anchor(--a1 right)" data-offset-x=5></div>
<div class="target" style="left: anchor(--a1 right)" data-offset-x=9></div>
</div>
<div class="cb">
@ -54,6 +54,6 @@
<div class="anchor1 size9x11"></div>
<div class="target" style="left: anchor(--a1 right)" data-offset-x=9></div>
</div>
<div class="target" style="left: anchor(--a1 right)" data-offset-x=5></div>
<div class="target" style="left: anchor(--a1 right)" data-offset-x=9></div>
</div>
</body>

4
tests/wpt/web-platform-tests/css/css-anchor-position/anchor-position-multicol-003.html
View file

@ -40,7 +40,7 @@
<div class="relpos">
<div class="spacer" style="height: 30px"></div>
<div class="anchor1"></div>
<div class="target" data-expected-height=0></div>
<div class="target" data-expected-height=50></div>
</div>
<div class="target" data-expected-height=50></div>
</div>
@ -56,7 +56,7 @@
<div class="relpos">
<div class="spacer" style="height: 10px"></div>
<div class="anchor1"></div>
<div class="target" data-expected-height=0></div>
<div class="target" data-expected-height=50></div>
</div>
<div class="target" data-expected-height=50></div>
</div>

8
tests/wpt/web-platform-tests/css/css-anchor-position/anchor-position-multicol-004.html
View file

@ -54,7 +54,7 @@
}
</style>
<body onload="checkLayoutForAnchorPos('.target')">
<p>The green box should be a union of blue boxes,
<p>The green box should be a union of two blue boxes in the right,
and the purple box should be at the right-bottom of the green box.
</p>
<div class="spacer" style="height: 10px"></div>
@ -76,9 +76,9 @@
</div>
<div class="target target1"
data-offset-x=18 data-offset-y=25
data-expected-width=150 data-expected-height=100></div>
data-offset-x=34 data-offset-y=225
data-expected-width=130 data-expected-height=100></div>
<div class="target target1-rb"
data-offset-x=158 data-offset-y=115></div>
data-offset-x=154 data-offset-y=315></div>
</div>
</body>

9
tests/wpt/web-platform-tests/css/css-anchor-position/anchor-position-multicol-fixed-001.html
View file

@ -35,7 +35,9 @@
}
.fixedpos {
position: fixed;
margin-left: 20px;
margin-left: 0;
left: 20px;
top: 20px;
width: 20px;
height: 30px;
}
@ -50,6 +52,7 @@
}
</style>
<body onload="checkLayoutForAnchorPos('.target')">
<!-- All targets should find the fixed positioned anchor -->
<div class="transform">
<div class="spacer" style="height: 10px"></div>
<div class="columns">
@ -57,11 +60,11 @@
<div class="spacer" style="height: 20px"></div>
<div class="transform">
<div class="spacer" style="height: 20px"></div>
<div class="anchor fixedpos"></div>
<div class="anchor"></div>
<div class="anchor fixedpos"></div>
<div class="target"
data-offset-x="10" data-offset-y="20"
data-expected-width=40 data-expected-height=10></div>
data-expected-width=130 data-expected-height=50></div>
</div>
<div class="target"
data-offset-x="20" data-offset-y="0"

0
tests/wpt/web-platform-tests/css/css-anchor-position/anchor-scroll-basics.tentative.html → tests/wpt/web-platform-tests/css/css-anchor-position/anchor-scroll-001.html
View file

99
tests/wpt/web-platform-tests/css/css-anchor-position/anchor-scroll-002.html Normal file
View file

@ -0,0 +1,99 @@
<!DOCTYPE html>
<title>Tests anchor-scroll resolving name conflicts</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/test-common.js"></script>
<style>
body {
margin: 0;
}
.scroller {
width: 100px;
height: 100px;
overflow-y: scroll;
}
.nonpos-cb {
transform: scale(1);
}
.abspos-cb {
position: absolute;
}
.anchor {
background: orange;
anchor-name: --a1;
position: absolute;
width: 50px;
height: 50px;
top: 50px;
}
.spacer {
height: 200px;
}
.target {
background: lime;
position: absolute;
width: 50px;
height: 50px;
top: anchor(--a1 top);
left: anchor(--a1 right);
anchor-scroll: --a1;
}
</style>
<div class="abspos-cb" style="width: 300px; height: 400px">
<div class="scroller nonpos-cb" id="scroller1">
<div class="anchor" id="anchor1"></div>
<div class="spacer"></div>
</div>
<div class="target" id="target1"></div>
<div class="scroller abspos-cb" style="top: 125px" id="scroller2">
<div class="anchor" id="anchor2"></div>
<div class="spacer"></div>
</div>
<div class="target" id="target2"></div>
<div class="scroller abspos-cb" style="top: 250px" id="scroller3">
<div class="anchor" id="anchor3"></div>
<div class="spacer"></div>
</div>
<div class="target" id="target3"></div>
</div>
<script>
promise_test(async () => {
scroller1.scrollTop = 10;
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
assert_equals(target1.getBoundingClientRect().top, anchor1.getBoundingClientRect().top);
assert_equals(target1.getBoundingClientRect().top, 40);
}, 'target1 should scroll with anchor1');
promise_test(async () => {
scroller2.scrollTop = 20;
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
assert_equals(target2.getBoundingClientRect().top, anchor2.getBoundingClientRect().top);
assert_equals(target2.getBoundingClientRect().top, 155);
}, 'target2 should scroll with anchor2');
promise_test(async () => {
scroller3.scrollTop = 30;
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
assert_equals(target3.getBoundingClientRect().top, anchor3.getBoundingClientRect().top);
assert_equals(target3.getBoundingClientRect().top, 270);
}, 'target3 should scroll with anchor3');
</script>

44
tests/wpt/web-platform-tests/css/css-anchor-position/anchor-scroll-basics.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<title>Tests basics of the 'anchor-scroll' property</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-scroll">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<div id="container">
<div id="target"></div>
</div>
<script>
// anchor-scroll: none | default | <anchor-element>
test_valid_value('anchor-scroll', 'none');
test_valid_value('anchor-scroll', 'default');
test_valid_value('anchor-scroll', 'implicit');
test_valid_value('anchor-scroll', '--foo');
test_invalid_value('anchor-scroll', 'foo-bar');
test_invalid_value('anchor-scroll', '--foo --bar')
test_invalid_value('anchor-scroll', '--foo, --bar')
test_invalid_value('anchor-scroll', '100px');
test_invalid_value('anchor-scroll', '100%');
// Computed value: as specified
test_computed_value('anchor-scroll', 'none');
test_computed_value('anchor-scroll', 'default');
test_computed_value('anchor-scroll', 'implicit');
test_computed_value('anchor-scroll', '--foo');
// Initial: default
// Inherited: no
assert_not_inherited('anchor-scroll', 'default', '--foo');
// Animation type: discrete
test_no_interpolation({
property: 'anchor-scroll',
from: '--foo',
to: 'none',
});
</script>