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

Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
Download patch file Download diff file Expand all files Collapse all files

57
tests/wpt/web-platform-tests/css/css-scroll-snap/ignore-snap-points-orthogonal-to-snap-axis.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<title>Ignore snap points orthogonal to scroll snap axis</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#snap-axis" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
position: absolute;
margin: 0;
}
#scroller {
height: 500px;
width: 500px;
overflow: hidden;
scroll-snap-type: x mandatory;
}
#y-target {
width: 300px;
height: 300px;
top: 100px;
left: 0;
background-color: green;
/* align only on y-axis */
scroll-snap-align: start none;
}
#x-target {
width: 300px;
height: 300px;
top: 0;
left: 100px;
background-color: red;
scroll-snap-align: none start;
}
.area {
width: 2000px;
height: 2000px;
}
</style>
<div id="scroller">
<div class="area"></div>
<div id="x-target"></div>
<div id="y-target"></div>
</div>
<script>
test(t => {
scroller.scrollTo(0,0);
assert_equals(scroller.scrollTop, 0);
assert_equals(scroller.scrollLeft, 100);
}, "Ignore snap points orthogonal to scroll snap axis");
</script>

2
tests/wpt/web-platform-tests/css/css-scroll-snap/input/keyboard.html
View file

@ -16,7 +16,7 @@
<script src="../support/common.js"></script>
<div id="scroller">
<div id="scroller" tabindex="0">
<div id="space"></div>
<div class="snap left top" id="top-left"></div>
<div class="snap right top" id="top-right"></div>

2
tests/wpt/web-platform-tests/css/css-scroll-snap/input/snap-area-overflow-boundary.html
View file

@ -37,7 +37,7 @@
<script src="/resources/testdriver-actions.js"></script>
<script src="../support/common.js"></script>
<div id="scroller">
<div id="scroller" tabindex="0">
<div id="target" class="box">
<div class="header">Header 1</div>
<div class="footer">Footer 1</div>

10
tests/wpt/web-platform-tests/css/css-scroll-snap/scroll-margin-visibility-check.html
View file

@ -19,7 +19,7 @@ body { margin: 0 }
height: 100px;
background-color: blue;
scroll-margin: 100px;
margin-left: 450px;
margin-left: 510px;
}
</style>
@ -32,10 +32,12 @@ body { margin: 0 }
<script>
let scroller = document.getElementById("scroller");
let target = document.getElementById("target");
test(() => {
promise_test(async function() {
scroller.scrollTo(0, 0);
target.focus();
await new Promise(resolve => {
scroller.addEventListener("scroll", () => step_timeout(resolve, 0));
document.getElementById("target").focus();
});
assert_true(scroller.scrollTop > 0, "Visibility check should not account for margin");
assert_true(scroller.scrollLeft > 0, "Visibility check should not account for margin");
});

91
tests/wpt/web-platform-tests/css/css-scroll-snap/scroll-on-large-element-not-covering-snapport.tentative.html Normal file
View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<title>
A test case that scrolling to a point on large element where the snap area
doesn't cover over the snapport
</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-overflow"/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
position: absolute;
width: 100%;
}
#scroller {
left: 10px;
height: 200px;
width: 100px;
overflow-y: scroll;
overflow-x: hidden;
scroll-snap-type: y mandatory;
}
.snap {
scroll-snap-align: start;
background-color: green;
}
.target {
background-color: red;
border-radius: 100%;
height: 88px;
top: 536px;
}
</style>
<div id="scroller">
<div style="height: 2000px;"></div>
<div class="snap" style="top: 0px; height: 40px;">1</div>
<div class="snap" style="top: 40px; height: 40px;">2</div>
<div class="snap" style="top: 80px; height: 1000px;">3</div>
<div class="snap" style="top: 1080px; height: 40px;">4</div>
<div class="snap" style="top: 1120px; height: 40px;">5</div>
<div class="target"></div>
</div>
<script>
test(() => {
const scroller = document.getElementById("scroller");
scroller.scrollBy(0, 10);
// Snap to the first snap point.
assert_equals(scroller.scrollLeft, 0);
assert_equals(scroller.scrollTop, 40);
scroller.scrollBy(0, 10);
// Snap to the second snap point.
assert_equals(scroller.scrollLeft, 0);
assert_equals(scroller.scrollTop, 80);
scroller.scrollBy(0, 100);
// Snap to the given scrolling position since the third snap target element
// is larger than the snapport.
assert_equals(scroller.scrollLeft, 0);
assert_equals(scroller.scrollTop, 180);
scroller.scrollBy(0, 100);
// Again, snap to the given scrolling position.
assert_equals(scroller.scrollLeft, 0);
assert_equals(scroller.scrollTop, 280);
// Scroll to a point where the third target element is still covering over the
// snapport.
scroller.scrollBy(0, 600);
assert_equals(scroller.scrollLeft, 0);
// Again, snap to the given scrolling position.
assert_equals(scroller.scrollTop, 880);
// Scroll to a point where the third target element is no longer convering
// over the snapport, rather the forth snap point is in the snapport.
scroller.scrollBy(0, 10);
// Now, snap to the forth snap point.
assert_equals(scroller.scrollLeft, 0);
assert_equals(scroller.scrollTop, 1080);
// Scroll back a bit.
scroller.scrollBy(0, -10);
// Now, snap back to the third snap point because at the moment when scrolling
// up by 10px, the large third snap target element isn't covering over the
// snapport, i.e. only bottom 10px of the large element is in the snapport.
// See https://github.com/w3c/csswg-drafts/issues/7262
assert_equals(scroller.scrollLeft, 0);
assert_equals(scroller.scrollTop, 80);
}, 'There\'s no valid snap positions on large element if it doesn\'t cover ' +
'the snapport');
</script>

0
tests/wpt/web-platform-tests/css/css-scroll-snap/scroll-snap-stop.html → tests/wpt/web-platform-tests/css/css-scroll-snap/scroll-snap-stop-001.html
View file

238
tests/wpt/web-platform-tests/css/css-scroll-snap/scroll-snap-stop-002.html Normal file
View file

@ -0,0 +1,238 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" />
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-overflow" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
position: absolute;
}
.scroller {
width: 400px;
height: 100px;
overflow: scroll;
scroll-snap-type: x mandatory;
}
#space {
left: 0px;
top: 0px;
width: 2100px;
height: 50px;
}
.target {
width: 50px;
height: 50px;
scroll-snap-align: start;
top: 0px;
}
</style>
<!--
start dest closest always
|------------------------------|--------|--------|
-->
<div class="scroller" id="scroller1">
<div id="space"></div>
<div class="target" style="left: 0px;"></div>
<!-- Add `scroll-snap-stop: always` element into the DOM tree prior to the
closest snap point -->
<div class="target" style="left: 120px; scroll-snap-stop: always;"></div>
<!-- Add a snap point closest-to-destination but further than the destination
from the start position -->
<div class="target" style="left: 110px;"></div>
</div>
<!--
start closest dest always
|------------------------------|------|--------|
-->
<div class="scroller" id="scroller2">
<div id="space"></div>
<div class="target" style="left: 0px;"></div>
<div class="target" style="left: 120px; scroll-snap-stop: always;"></div>
<!-- Add a snap point closest-to-destination and closer than the destination
from the start position -->
<div class="target" style="left: 95px;"></div>
</div>
</div>
<!--
A test case where there's a snap point whose snap area covers the snapport and
there's a `scroll-snap-stop: always` snap point on the opposite side.
-->
<div class="scroller" id="scroller3">
<div id="space"></div>
<div class="target" style="left: 0px;"></div>
<div class="target" style="left: 700px; scroll-snap-stop: always;"></div>
<!-- Add a snap point where the snap area covers the snapport entirely -->
<div class="target" style="left: 100px; width: 500px;"></div>
<!-- Add a snap point where the distance between this and the 100px point is
larger than the snapport size (400px) -->
<div class="target" style="left: 600px;"></div>
</div>
<!--
A similar case above, but two `scroll-snap-stop: always` snap points.
-->
<div class="scroller" id="scroller4">
<div id="space"></div>
<div class="target" style="left: 0px;"></div>
<div class="target" style="left: 700px; scroll-snap-stop: always;"></div>
<!-- Add a snap point where the snap area covers the snapport entirely -->
<div class="target" style="left: 100px; width: 500px;"></div>
<!-- Add a snap point where the distance between this and the 100px point is
larger than the snapport size (400px) -->
<div class="target" style="left: 600px; scroll-snap-stop: always;"></div>
</div>
<!--
Another similar case, but the nearest snap point to the start point is
`scroll-snap-stop: always`.
-->
<div class="scroller" id="scroller5">
<div id="space"></div>
<div class="target" style="left: 0px;"></div>
<div class="target" style="left: 700px; scroll-snap-stop: always;"></div>
<!-- Add a snap point where the snap area covers the snapport entirely -->
<div class="target" style="left: 100px; width: 500px; scroll-snap-stop: always;"></div>
<!-- Add a snap point where the distance between this and the 100px point is
larger than the snapport size (400px) -->
<div class="target" style="left: 600px;"></div>
</div>
<!--
A test case that a `scroll-snap-stop: always` snap point is further than the
scroll destination.
-->
<div class="scroller" id="scroller6">
<div id="space"></div>
<div class="target" style="left: 0px;"></div>
<div class="target" style="left: 400px;"></div>
<div class="target" style="left: 700px; scroll-snap-stop: always;"></div
</div>
<!--
Similar to above but a snap area covers the snapport.
-->
<div class="scroller" id="scroller7">
<div id="space"></div>
<div class="target" style="left: 0px;"></div>
<div class="target" style="left: 400px; width: 900px;"></div>
<div class="target" style="left: 900px; scroll-snap-stop: always;"></div
</div>
<script>
test(() => {
assert_equals(scroller1.scrollLeft, 0);
assert_equals(scroller1.scrollTop, 0);
// start dest closest always
// |------------------------------|--------|--------|
// 0 100 110 120
scroller1.scrollBy(100, 0);
assert_equals(scroller1.scrollLeft, 110);
assert_equals(scroller1.scrollTop, 0);
}, "The closest snap point is preferred than scroll-snap-stop: always where " +
"it's further than the destination (the closest one is closer to the " +
"scroll start position than the destination)");
test(() => {
assert_equals(scroller2.scrollLeft, 0);
assert_equals(scroller2.scrollTop, 0);
// start closest dest always
// |------------------------------|------|--------|
// 0 95 100 120
scroller2.scrollBy(100, 0);
assert_equals(scroller2.scrollLeft, 95);
assert_equals(scroller2.scrollTop, 0);
}, "The closest snap point is preferred than scroll-snap-stop: always where " +
"it's further than the destination (the closest one is futrher than the " +
"destination from the start position)");
test(() => {
assert_equals(scroller3.scrollLeft, 0);
assert_equals(scroller3.scrollTop, 0);
// start dest always
// |-----|===|============================|------|
// 0 100 150 600 700
// Scoll on the element whose snap area is larger than the snapport.
scroller3.scrollBy(150, 0);
assert_equals(scroller3.scrollLeft, 150);
assert_equals(scroller3.scrollTop, 0);
}, "The scroll destination on a large element whose snap area covers " +
"the snapport entirely is a valid snap position");
test(() => {
assert_equals(scroller4.scrollLeft, 0);
assert_equals(scroller4.scrollTop, 0);
// start dest always always
// |-----|====|============================|------|
// 0 100 150 600 700
// Scoll on the element whose snap area is larger than the snapport.
scroller4.scrollBy(150, 0);
assert_equals(scroller4.scrollLeft, 150);
assert_equals(scroller4.scrollTop, 0);
}, "The scroll destination on a large element whose snap area covers " +
"the snapport entirely is a valid snap position (with two " +
"`scroll-snap-stop: always` snap points");
test(() => {
assert_equals(scroller5.scrollLeft, 0);
assert_equals(scroller5.scrollTop, 0);
// start always dest always
// |-----|=====|============================|------|
// 0 100 150 600 700
// Scoll on the element whose snap area is larger than the snapport, but
// the scroll-snap-stop property is `always`.
scroller5.scrollBy(150, 0);
assert_equals(scroller5.scrollLeft, 100);
assert_equals(scroller5.scrollTop, 0);
// Scroll the direction further, it should NOT be trapped by the
// `scroll-snap-stop: always` snap point.
scroller5.scrollBy(50, 0);
assert_equals(scroller5.scrollLeft, 150);
assert_equals(scroller5.scrollTop, 0);
}, "`scroll-snap-stop: always` snap point is preferred even if the snap area " +
"entire snapport");
test(() => {
assert_equals(scroller6.scrollLeft, 0);
assert_equals(scroller6.scrollTop, 0);
// start dest always
// |-------------------------|-----------------|------|
// 0 400 600 700
// Scroll to a point where it's closer to a `scroll-snap-stop: always` snap
// position.
scroller6.scrollBy(600, 0);
assert_equals(scroller6.scrollLeft, 700);
assert_equals(scroller6.scrollTop, 0);
}, "`scroll-snap-stop: always` snap point is further than the scroll " +
"destination");
test(() => {
assert_equals(scroller7.scrollLeft, 0);
assert_equals(scroller7.scrollTop, 0);
// start dest always
// |-------------------------|================|=====|=====
// 0 400 700 900
// Scoll on the element whose snap area is larger than the snapport.
scroller7.scrollBy(700, 0);
assert_equals(scroller7.scrollLeft, 700);
assert_equals(scroller7.scrollTop, 0);
}, "`scroll-snap-stop: always` snap point is further than the scroll " +
"destination and a snap area covers the snapport");
</script>

2
tests/wpt/web-platform-tests/css/css-scroll-snap/scroll-snap-stop-change.html
View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>

11
tests/wpt/web-platform-tests/css/css-scroll-snap/scroll-target-margin-005.html
View file

@ -22,10 +22,13 @@
</div>
<script>
test(function() {
document.scrollingElement.scrollTo(0, 20000);
document.getElementById("target").focus();
promise_test(async function() {
document.scrollingElement.scrollTo(0, 20000);
await new Promise(resolve => {
document.addEventListener("scroll", () => step_timeout(resolve, 0));
document.getElementById("target").focus();
});
// Should be around 4900 (5000 - 200px of margin). Give some leeway to account for line height / borders / input padding / etc.
assert_between_exclusive(document.scrollingElement.scrollTop, 4750, 4850, "Should honor date input scroll-margin");
assert_between_exclusive(document.scrollingElement.scrollTop, 4600, 4850, "Should honor date input scroll-margin");
});
</script>

57
tests/wpt/web-platform-tests/css/css-scroll-snap/scroll-target-margin-006.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<title>scrollIntoView() and scroll-margin applied to an inline element</title>
<link rel='author' title='Martin Robinson' href='http://igalia.com'>
<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style type='text/css'>
.container {
border: solid black 1px;
height: 40px;
width: 40px;
overflow: auto;
}
</style>
<div class="container">
<div style="height: 1000px; width: 2000px;"></div>
<div style="width: 2000px;">
<span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
<span id="target">TARGETTARGETTARGETTARGET</span>
<span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
</div>
<div style="height: 1000px; width: 2000px;"></div>
</div>
<script>
test(() => {
target.scrollIntoView();
const scroller = target.parentElement.parentElement;
let expectedScrollPosition = [scroller.scrollLeft - 20, scroller.scrollTop - 20];
scroller.scrollTo(0, 0);
target.style.scrollMarginTop = "20px";
target.style.scrollMarginLeft = "20px";
target.scrollIntoView();
assert_equals(scroller.scrollLeft, expectedScrollPosition[0]);
assert_equals(scroller.scrollTop, expectedScrollPosition[1]);
target.style.scrollMarginTop = "0px";
target.style.scrollMarginLeft = "0px";
scroller.scrollTo(2000, 2000);
target.scrollIntoView({"block": "end", "inline": "end"});
expectedScrollPosition = [scroller.scrollLeft + 20, scroller.scrollTop + 20];
scroller.scrollTo(2000, 2000);
target.style.scrollMarginBottom = "20px";
target.style.scrollMarginRight = "20px";
target.scrollIntoView({"block": "end", "inline": "end"});
assert_equals(scroller.scrollLeft, expectedScrollPosition[0]);
assert_equals(scroller.scrollTop, expectedScrollPosition[1]);
}, "scroll-margin is taken into account when scrolling an inline element into view");
</script>

95
tests/wpt/web-platform-tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-type-on-root-element.html Normal file
View file

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html>
<title>
Updating the scroll-snap-type of the root element should make it resnap accordingly.
This is another vairant of changing-scroll-snap-type.html for the root element.
</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
position: absolute;
margin: 0;
}
html {
overflow: hidden;
scroll-snap-type: none;
}
#y-target {
width: 300px;
height: 300px;
top: 100px;
left: 0;
background-color: green;
scroll-snap-align: start none;
}
#x-target {
width: 300px;
height: 300px;
top: 0;
left: 100px;
background-color: red;
scroll-snap-align: none start;
}
.area {
width: 1000vw;
height: 1000vh;
}
</style>
<div class="area"></div>
<div id="x-target"></div>
<div id="y-target"></div>
<script>
const x_target = document.getElementById("x_target");
const y_target = document.getElementById("y_target");
const scroller = document.documentElement;
function cleanup() {
scroller.style.setProperty("scroll-snap-type", "none");
}
test(t => {
t.add_cleanup(cleanup);
scroller.scrollTo(0,0);
assert_equals(scroller.scrollTop, 0);
assert_equals(scroller.scrollLeft, 0);
scroller.style.setProperty("scroll-snap-type", "y mandatory");
assert_equals(scroller.scrollTop, 100);
assert_equals(scroller.scrollLeft, 0);
}, "Changing the scroller's snap type to y should make it resnap on the y-axis.");
test(t => {
t.add_cleanup(cleanup);
scroller.scrollTo(0,0);
assert_equals(scroller.scrollTop, 0);
assert_equals(scroller.scrollLeft, 0);
scroller.style.setProperty("scroll-snap-type", "x mandatory");
assert_equals(scroller.scrollLeft, 100);
assert_equals(scroller.scrollTop, 0);
}, "Changing the scroller's snap type to x should make it resnap on the x-axis.");
test(t => {
t.add_cleanup(cleanup);
scroller.scrollTo(0,0);
assert_equals(scroller.scrollTop, 0);
assert_equals(scroller.scrollLeft, 0);
scroller.style.setProperty("scroll-snap-type", "x mandatory");
assert_equals(scroller.scrollLeft, 100);
assert_equals(scroller.scrollTop, 0);
scroller.style.setProperty("scroll-snap-type", "y mandatory");
assert_equals(scroller.scrollTop, 100);
}, "Changing the scroller's snap type axis should make it resnap.");
</script>
</html>

66
tests/wpt/web-platform-tests/css/css-scroll-snap/snap-after-relayout/not-resnap-outside-proximity-threshold.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE html>
<title>
Not re-snap once after a scroll operation has finished without snapping
because the scroll destination was outside of the snap proximity threshold.
</title>
<!-- This test assumes that all major browsers' default scroll-snap proximity
thresholds are greater than 200px. -->
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" />
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1780154">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
position: absolute;
margin: 0;
}
#scroller {
height: 600px;
width: 600px;
overflow: hidden;
scroll-snap-type: y proximity;
}
.snap {
width: 300px;
height: 300px;
background-color: green;
scroll-snap-align: start;
}
.area {
width: 2000px;
height: 2000px;
}
</style>
<div id="scroller">
<div class="area"></div>
<div class="snap" style="top: 0px;"></div>
<div class="snap" style="top: 500px;"></div>
</div>
<script>
test(() => {
// The initial snap position is at (0, 0).
assert_equals(scroller.scrollTop, 0);
assert_equals(scroller.scrollLeft, 0);
// Scroll to a position where it's outside of the scroll-snap proximity
// threshold, so that it won't trigger snapping.
scroller.scrollTo(0, 250);
assert_equals(scroller.scrollTop, 250);
assert_equals(scroller.scrollLeft, 0);
// Changing the initial snap target position, but still it's outside of the
// threshold.
document.querySelectorAll(".snap")[0].style.top = "10px";
// Not re-snap to the last snap point.
assert_equals(scroller.scrollTop, 250);
assert_equals(scroller.scrollLeft, 0);
}, "Not re-snap once after a scroll operation has finished without snapping " +
"because the scroll destination was outside of the snap proximity threshold.");
</script>

2
tests/wpt/web-platform-tests/css/css-scroll-snap/snap-after-relayout/snap-to-different-targets.html
View file

@ -74,7 +74,7 @@ const x_target = document.getElementById("x-axis-target");
const y_target = document.getElementById("y-axis-target");
const scroller = document.getElementById("scroller");
test(() => {
test(t => {
// The scroller should be snapped to the two closest points on first layout.
assert_equals(scroller.scrollTop, 200);
assert_equals(scroller.scrollLeft, 200);

48
tests/wpt/web-platform-tests/css/css-scroll-snap/snap-intended-direction.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<title>`intended direction` scroll snaps only at points ahead of the scroll direction</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" />
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1766805">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
position: absolute;
margin: 0px;
}
#scroller {
width: 200px;
height: 100px;
overflow: scroll;
scroll-snap-type: x mandatory;
}
.snap {
scroll-snap-align: start;
background: green;
}
</style>
<div id="scroller">
<div style="width: 2000px; height: 100px;"></div>
<div class="snap" style="left: 0px; width: 20px; height: 100px;">1</div>
<div class="snap" style="left: 100px; width: 20px; height: 100px;">2</div>
<div class="snap" style="left: 120px; width: 20px; height: 100px;">3</div>
<div class="snap" style="left: 300px; width: 20px; height: 100px;">4</div>
<div class="snap" style="left: 400px; width: 20px; height: 100px;">5</div>
</div>
<script>
test(() => {
scroller.scrollBy(10, 0);
assert_equals(scroller.scrollLeft, 100);
scroller.scrollBy(10, 0);
assert_equals(scroller.scrollLeft, 120);
scroller.scrollBy(10, 0);
// Snaps to the next snap point even if the previous snap point is closer to
// the current position.
assert_equals(scroller.scrollLeft, 300);
}, "`intended direction` scroll snaps only at points ahead of the scroll " +
"direction");
</script>

55
tests/wpt/web-platform-tests/css/css-scroll-snap/snap-on-focus.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<title>Scroll snap on Element.focus()</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
position: absolute;
margin: 0;
}
#scroller {
height: 500px;
width: 500px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.snap {
width: 100%;
height: 300px;
top: 100px;
left: 0;
background-color: green;
scroll-snap-align: start none;
}
.no-snap {
width: 100%;
height: 300px;
top: 100px;
left: 0;
background-color: red;
}
.area {
width: 100%;
height: 2000px;
}
</style>
<div id="scroller">
<div class="area"></div>
<div class="snap" style="top: 0px;"></div>
<div class="no-snap" style="top: 1000px;" tabindex=-1></div>
<div class="snap" style="top: 1200px;"></div>
</div>
<script>
test(() => {
document.querySelector(".no-snap").focus();
assert_equals(scroller.scrollTop, 1200);
}, "scroll snap should happens on Element.focus()");
</script>

2
tests/wpt/web-platform-tests/css/css-scroll-snap/snap-to-visible-areas-both.html
View file

@ -54,7 +54,7 @@ div {
<div id="right-top" class="snap"></div>
</div>
<script>
test(() => {
test(t => {
const scroller = document.getElementById("scroller");
scroller.scrollTo(0, 0);
assert_equals(scroller.scrollLeft, 0);

0
tests/wpt/web-platform-tests/css/css-scroll-snap/unreachable-snap-positions.html → tests/wpt/web-platform-tests/css/css-scroll-snap/unreachable-snap-positions-001.html
View file

67
tests/wpt/web-platform-tests/css/css-scroll-snap/unreachable-snap-positions-002.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#unreachable" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.scroller {
width: 100vw;
height: 100px;
display: flex;
scroll-snap-type: x mandatory;
overflow-x: auto;
}
.scroller.rtl {
direction: rtl;
}
.scroller.end > span {
scroll-snap-align: end;
}
.scroller.center > span {
scroll-snap-align: end;
}
</style>
<div class="scroller end">
<span style="min-width: 25px;"></span>
<span style="min-width: 100vw;"></span>
</div>
<div class="scroller center">
<span style="min-width: 25px;"></span>
<span style="min-width: 100vw;"></span>
</div>
<div class="scroller end rtl">
<span style="min-width: 25px;"></span>
<span style="min-width: 100vw;"></span>
</div>
<div class="scroller center rtl">
<span style="min-width: 25px;"></span>
<span style="min-width: 100vw;"></span>
</div>
<script>
test(() => {
const scroller = document.querySelector(".scroller.end");
assert_equals(scroller.scrollLeft, 0);
assert_equals(scroller.scrollTop, 0);
}, "Unreachable snap point with `scroll-snap-align: end`");
test(() => {
const scroller = document.querySelector(".scroller.center");
assert_equals(scroller.scrollLeft, 0);
assert_equals(scroller.scrollTop, 0);
}, "Unreachable snap point with `scroll-snap-align: center`");
test(() => {
const scroller = document.querySelector(".scroller.end.rtl");
assert_equals(scroller.scrollLeft, 0);
assert_equals(scroller.scrollTop, 0);
}, "Unreachable snap point with `scroll-snap-align: end` in RTL");
test(() => {
const scroller = document.querySelector(".scroller.center.rtl");
assert_equals(scroller.scrollLeft, 0);
assert_equals(scroller.scrollTop, 0);
}, "Unreachable snap point with `scroll-snap-align: center` in RTL");
</script>
</html>