mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision bf42dca1ce568ce559d5a4cad507239035b91dcb
This commit is contained in:
WPT Sync Bot
parent
91d2bd3d64
commit
20e57b5c74
81 changed files with 3616 additions and 289 deletions
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Snap to a visible area only even when there is a closer snap point for an area
|
||||
that is closer but not visible (using both axes snap type)
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
overflow: scroll;
|
||||
scroll-snap-type: both mandatory;
|
||||
}
|
||||
|
||||
#space {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
|
||||
.snap {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: blue;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#left-top {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#left-bottom {
|
||||
left: 0px;
|
||||
top: 800px;
|
||||
}
|
||||
|
||||
#right-top {
|
||||
left: 800px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div id="space"></div>
|
||||
<div id="left-top" class="snap"></div>
|
||||
<div id="left-bottom" class="snap"></div>
|
||||
<div id="right-top" class="snap"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
const scroller = document.getElementById("scroller");
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
scroller.scrollTo(500, 600);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 800);
|
||||
scroller.scrollTo(600, 500);
|
||||
assert_equals(scroller.scrollLeft, 800);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
}, 'Only snap to visible areas in the case where taking the closest snap point of \
|
||||
each axis does not snap to a visible area');
|
||||
</script>
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
|
||||
<title>
|
||||
Snap to an area where the element's scroll-margin is visible but not the
|
||||
element itself (using both axes snap type)
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
|
@ -7,12 +11,14 @@ div {
|
|||
position: absolute;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
overflow: scroll;
|
||||
scroll-snap-type: both mandatory;
|
||||
}
|
||||
|
||||
#space {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
|
|
@ -30,57 +36,41 @@ div {
|
|||
top: 0px;
|
||||
}
|
||||
|
||||
#right-top {
|
||||
left: 800px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#left-bottom {
|
||||
left: 0px;
|
||||
top: 800px;
|
||||
/* 800px scroll-margin makes the snap area span to the right end of the
|
||||
right-top area */
|
||||
scroll-margin-right: 800px;
|
||||
}
|
||||
|
||||
#right-bottom {
|
||||
left: 1800px;
|
||||
top: 1800px;
|
||||
scroll-margin-top: 1000px;
|
||||
scroll-margin-left: 1000px;
|
||||
#right-top {
|
||||
left: 800px;
|
||||
top: 0px;
|
||||
/* 800px scroll-margin makes the snap area span to the bottom end of the
|
||||
left-bottom area */
|
||||
scroll-margin-bottom: 800px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div id="space"></div>
|
||||
<div id="left-top" class="snap"></div>
|
||||
<div id="right-top" class="snap"></div>
|
||||
<div id="left-bottom" class="snap"></div>
|
||||
<div id="right-bottom" class="snap"></div>
|
||||
<div id="right-top" class="snap"></div>
|
||||
</div>
|
||||
<script>
|
||||
var scroller = document.getElementById("scroller");
|
||||
test(() => {
|
||||
const scroller = document.getElementById("scroller");
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
scroller.scrollTo(300, 0);
|
||||
assert_equals(scroller.scrollLeft, 800);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
}, 'Only snap to visible area on X axis, even when the non-visible ones are closer');
|
||||
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
scroller.scrollTo(0, 300);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 800);
|
||||
}, 'Only snap to visible area on Y axis, even when the non-visible ones are closer');
|
||||
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
scroller.scrollTo(300, 300);
|
||||
scroller.scrollTo(500, 600);
|
||||
assert_equals(scroller.scrollLeft, 800);
|
||||
assert_equals(scroller.scrollTop, 800);
|
||||
}, 'snap to snap area inflated by scroll-margin, even when the non-visible ones are closer');
|
||||
scroller.scrollTo(600, 500);
|
||||
assert_equals(scroller.scrollLeft, 800);
|
||||
assert_equals(scroller.scrollTop, 800);
|
||||
}, 'Snap to area such that only the scroll margin from both axes\' areas are \
|
||||
visible');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Snap to an area where the element's scroll-margin is visible but not the
|
||||
element itself (using x-axis snap type)
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
overflow: scroll;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
|
||||
#space {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
|
||||
.snap {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: blue;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#left-visible {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#right-visible {
|
||||
left: 800px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#middle-margin-visible {
|
||||
left: 700px;
|
||||
top: 800px;
|
||||
/* 300px makes snap area visible with margin but non-visible without it */
|
||||
scroll-margin-top: 300px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div id="space"></div>
|
||||
<div id="left-visible" class="snap"></div>
|
||||
<div id="middle-margin-visible" class="snap"></div>
|
||||
<div id="right-visible" class="snap"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
const scroller = document.getElementById("scroller");
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
scroller.scrollTo(500, 0);
|
||||
assert_equals(scroller.scrollLeft, 700);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
}, 'Scroll margin should be considered when calculating snap area visibilty \
|
||||
while snapping on the x-axis');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Snap to an area where the element's scroll-margin is visible but not the
|
||||
element itself (using y-axis snap type)
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
overflow: scroll;
|
||||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
|
||||
#space {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
|
||||
.snap {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: blue;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#top-visible {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#bottom-visible {
|
||||
left: 0px;
|
||||
top: 800px;
|
||||
}
|
||||
|
||||
#middle-margin-visible {
|
||||
left: 800px;
|
||||
top: 700px;
|
||||
/* 300px makes snap area visible with margin but non-visible without it */
|
||||
scroll-margin-left: 300px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div id="space"></div>
|
||||
<div id="top-visible" class="snap"></div>
|
||||
<div id="middle-margin-visible" class="snap"></div>
|
||||
<div id="bottom-visible" class="snap"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
const scroller = document.getElementById("scroller");
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
scroller.scrollTo(0, 500);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 700);
|
||||
}, 'Scroll margin should be considered when calculating snap area visibilty \
|
||||
while snapping on the y-axis');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Snap to a visible area only even when there is a closer snap point for an area
|
||||
that is closer but not visible (using x-axis snap type)
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
overflow: scroll;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
|
||||
#space {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
|
||||
.snap {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: blue;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#left-visible {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#right-visible {
|
||||
left: 800px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#middle-not-visible {
|
||||
left: 700px;
|
||||
top: 800px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div id="space"></div>
|
||||
<div id="left-visible" class="snap"></div>
|
||||
<div id="middle-not-visible" class="snap"></div>
|
||||
<div id="right-visible" class="snap"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
const scroller = document.getElementById("scroller");
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
scroller.scrollTo(500, 0);
|
||||
assert_equals(scroller.scrollLeft, 800);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
}, 'Only snap to visible area on X axis, even when the non-visible ones are closer');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Snap to a visible area only even when there is a closer snap point for an area
|
||||
that is closer but not visible (using y-axis snap type)
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
overflow: scroll;
|
||||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
|
||||
#space {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
|
||||
.snap {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: blue;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#top-visible {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#bottom-visible {
|
||||
left: 0px;
|
||||
top: 800px;
|
||||
}
|
||||
|
||||
#middle-not-visible {
|
||||
left: 800px;
|
||||
top: 700px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div id="space"></div>
|
||||
<div id="top-visible" class="snap"></div>
|
||||
<div id="middle-not-visible" class="snap"></div>
|
||||
<div id="bottom-visible" class="snap"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
const scroller = document.getElementById("scroller");
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
scroller.scrollTo(0, 500);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 800);
|
||||
}, 'Only snap to visible area on Y axis, even when the non-visible ones are closer');
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue