Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-23 02:05:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1373835 - Add a test case for unreachable snap positions. r=botond

Browse Source 
The snap alignment position of the target element is the top left of the target
and the position is located out of scroll port (top: -100px, left: -100px).
Even so we try to snap a position as much as possible.

From the spec [1];
 If a snap position is unreachable as specified, such that aligning to it would
 require scrolling the scroll container’s viewport past the edge of its
 scrollable overflow region, the used snap position for this snap area is the
 position resulting from scrolling as much as possible in each relevant axis
 toward the desired snap position.

[1] https://drafts.csswg.org/css-scroll-snap-1/#unreachabLe

Depends on D21630

Differential Revision: https://phabricator.services.mozilla.com/D21631

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Hiroyuki Ikezoe 2019-04-11 06:20:58 +00:00
parent f905a44094
commit 3a6373adc1
1 changed files with 53 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
testing/web-platform/tests/css/css-scroll-snap/unreachable-snap-positions.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#unreachable" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
position: absolute;
margin: 0px;
}
#scroller {
height: 500px;
width: 500px;
overflow: hidden;
scroll-snap-type: both mandatory;
}
#unreachable {
width: 300px;
height: 300px;
top: -100px;
left: -100px;
background-color: blue;
scroll-snap-align: start;
}
#reachable {
width: 300px;
height: 300px;
top: 400px;
left: 400px;
background-color: blue;
scroll-snap-align: start;
}
</style>
<div id="scroller">
<div style="width: 2000px; height: 2000px;"></div>
<div id="unreachable"></div>
<div id="reachable"></div>
</div>
<script>
test(() => {
// Firstly move to the reachable snap position.
scroller.scrollTo(400, 400);
assert_equals(scroller.scrollLeft, 400);
assert_equals(scroller.scrollTop, 400);
// Then move to a position between the unreachable snap position and the
// reachable position but closer to the unreachable one.
scroller.scrollTo(100, 100);
assert_equals(scroller.scrollLeft, 0);
assert_equals(scroller.scrollTop, 0);
}, "Snaps to the positions defined by the element as much as possible");
</script>