mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Update web-platform-tests to revision 3503c50a6452e153bde906a9c6644cb6237224fc
This commit is contained in:
WPT Sync Bot
parent
3db473714b
commit
dc71e05859
379 changed files with 37923 additions and 5120 deletions
|
|
@ -8,20 +8,24 @@ div, html, body {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-snap-type: x mandatory;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
scroll-snap-type: x mandatory;
|
||||
overflow: scroll;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.large_space {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
|
||||
.snap_area {
|
||||
scroll-snap-align: none start;
|
||||
width: 100px;
|
||||
|
|
@ -29,13 +33,20 @@ html {
|
|||
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.snap_area:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.snap_area:nth-child(2) {
|
||||
margin-left: 100px;
|
||||
}
|
||||
.snap_area:nth-child(2) {
|
||||
|
||||
.snap_area:nth-child(3) {
|
||||
margin-left: 300px;
|
||||
}
|
||||
.snap_area:nth-child(3) {
|
||||
|
||||
.snap_area:nth-child(4) {
|
||||
margin-left: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -44,11 +55,13 @@ html {
|
|||
<div class="snap_area"></div>
|
||||
<div class="snap_area"></div>
|
||||
<div class="snap_area"></div>
|
||||
<div class="snap_area"></div>
|
||||
|
||||
<div id="scroller">
|
||||
<div class="snap_area"></div>
|
||||
<div class="snap_area"></div>
|
||||
<div class="snap_area"></div>
|
||||
<div class="snap_area"></div>
|
||||
<div class="large_space"></div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Scrollers should snap to the closest snap point on initial layout (using 'direction: rtl')
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" />
|
||||
<link rel="match" href="snap-after-initial-layout-ref.html" />
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
scroll-snap-type: both mandatory;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
#close-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 100px;
|
||||
right: 200px;
|
||||
background-color: green;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#far-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 100px;
|
||||
right: 700px;
|
||||
background-color: red;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.area {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div class="area"></div>
|
||||
<div id="close-target"></div>
|
||||
<div id="far-target"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference</title>
|
||||
<style>
|
||||
div {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 0;
|
||||
left: 200px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Scrollers should snap to the closest snap point on initial layout
|
||||
(using 'writing-mode: horizontal-tb')
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" />
|
||||
<link rel="match" href="snap-after-initial-layout-ref.html" />
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
scroll-snap-type: both mandatory;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
#close-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 100px;
|
||||
left: 200px;
|
||||
background-color: green;
|
||||
scroll-snap-align: start end;
|
||||
}
|
||||
|
||||
#far-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
background-color: red;
|
||||
scroll-snap-align: start end;
|
||||
}
|
||||
|
||||
.area {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div class="area"></div>
|
||||
<div id="close-target"></div>
|
||||
<div id="far-target"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Scrollers should snap to the closest snap point on initial layout
|
||||
(using 'writing-mode: vertical-lr')
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" />
|
||||
<link rel="match" href="snap-after-initial-layout-ref.html" />
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
scroll-snap-type: both mandatory;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
#close-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 100px;
|
||||
left: 200px;
|
||||
background-color: green;
|
||||
scroll-snap-align: end start;
|
||||
}
|
||||
|
||||
#far-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
background-color: red;
|
||||
scroll-snap-align: end start;
|
||||
}
|
||||
|
||||
.area {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div class="area"></div>
|
||||
<div id="close-target"></div>
|
||||
<div id="far-target"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Scrollers should snap to the closest snap point on initial layout
|
||||
(using 'writing-mode: vertical-rl')
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" />
|
||||
<link rel="match" href="snap-after-initial-layout-ref.html" />
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
/* Chrome bug using 'position:absolute' with LayoutNG disabled */
|
||||
position: relative;
|
||||
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
scroll-snap-type: both mandatory;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
#close-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 100px;
|
||||
left: 200px;
|
||||
background-color: green;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#far-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
background-color: red;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.area {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div class="area"></div>
|
||||
<div id="close-target"></div>
|
||||
<div id="far-target"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Adding a new snap area when there are none should make the scroller snap to it.
|
||||
</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;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
scroll-snap-type: both mandatory;
|
||||
}
|
||||
|
||||
#target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
background-color: green;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.area {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div class="area"></div>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const target = document.getElementById("target");
|
||||
const scroller = document.getElementById("scroller");
|
||||
|
||||
test(() => {
|
||||
scroller.removeChild(target);
|
||||
scroller.scrollTo(0,0);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
|
||||
scroller.appendChild(target);
|
||||
assert_equals(scroller.scrollTop, 100);
|
||||
assert_equals(scroller.scrollLeft, 100);
|
||||
}, "Adding a new snap area when there are none should make the scroller snap to it.");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Adding a new snap area while already snapped should not make the scroller snap to it.
|
||||
</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;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
scroll-snap-type: both mandatory;
|
||||
}
|
||||
|
||||
#initial-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
background-color: green;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#other-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 300px;
|
||||
left: 300px;
|
||||
background-color: red;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.area {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div class="area"></div>
|
||||
<div id="initial-target"></div>
|
||||
<div id="other-target"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const initial_target = document.getElementById("initial-target");
|
||||
const other_target = document.getElementById("other-target");
|
||||
const scroller = document.getElementById("scroller");
|
||||
|
||||
test(() => {
|
||||
scroller.removeChild(other_target);
|
||||
scroller.scrollTo(0,0);
|
||||
assert_equals(scroller.scrollTop, 100);
|
||||
assert_equals(scroller.scrollLeft, 100);
|
||||
|
||||
scroller.appendChild(other_target);
|
||||
assert_equals(scroller.scrollTop, 100);
|
||||
assert_equals(scroller.scrollLeft, 100);
|
||||
}, "Adding a new snap area while already snapped should not make the scroller snap to it.");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Moving the current snap target should make the scroller resnap to it.
|
||||
</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: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#block {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
scroll-snap-type: both mandatory;
|
||||
}
|
||||
|
||||
#initial-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
left: 100px;
|
||||
top: 0;
|
||||
transform: none;
|
||||
background-color: green;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#other-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
left: 300px;
|
||||
background-color: red;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.area {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div id="block"></div>
|
||||
<div id="initial-target"></div>
|
||||
<div id="other-target"></div>
|
||||
<div class="area"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const initial_target = document.getElementById("initial-target");
|
||||
const other_target = document.getElementById("other-target");
|
||||
const block = document.getElementById("block");
|
||||
const scroller = document.getElementById("scroller");
|
||||
|
||||
function cleanup() {
|
||||
initial_target.style.setProperty("transform", "none");
|
||||
initial_target.style.setProperty("top", "0");
|
||||
block.style.setProperty("height", "100px");
|
||||
}
|
||||
|
||||
test(t => {
|
||||
t.add_cleanup(cleanup);
|
||||
scroller.scrollTo(0,0);
|
||||
assert_equals(scroller.scrollTop, 100);
|
||||
assert_equals(scroller.scrollLeft, 100);
|
||||
|
||||
initial_target.style.setProperty("top", "300px");
|
||||
assert_equals(scroller.scrollTop, 400);
|
||||
assert_equals(scroller.scrollLeft, 100);
|
||||
}, "Moving the current snap target should make the scroller resnap to it.");
|
||||
|
||||
test(t => {
|
||||
t.add_cleanup(cleanup);
|
||||
scroller.scrollTo(0,0);
|
||||
assert_equals(scroller.scrollTop, 100);
|
||||
assert_equals(scroller.scrollLeft, 100);
|
||||
|
||||
block.style.setProperty("height", "200px");
|
||||
assert_equals(scroller.scrollTop, 200);
|
||||
assert_equals(scroller.scrollLeft, 100);
|
||||
}, "Changing the layout of other elements should be able to cause resnapping to \
|
||||
the target.");
|
||||
|
||||
test(t => {
|
||||
t.add_cleanup(cleanup);
|
||||
scroller.scrollTo(0,0);
|
||||
assert_equals(scroller.scrollTop, 100);
|
||||
assert_equals(scroller.scrollLeft, 100);
|
||||
|
||||
// TODO(alsan): Chrome currently doesn't correctly re-snap due to transform.
|
||||
// It seems to be an invalidation issue. http://crbug.com/1028316
|
||||
initial_target.style.setProperty("transform", "translate(0,100px)");
|
||||
assert_equals(scroller.scrollTop, 200);
|
||||
assert_equals(scroller.scrollLeft, 100);
|
||||
}, "Transforming the current snap target should make the scroller resnap to it.");
|
||||
|
||||
test(t => {
|
||||
t.add_cleanup(cleanup);
|
||||
initial_target.style.setProperty("top", "100px");
|
||||
scroller.scrollTo(0,0);
|
||||
assert_equals(scroller.scrollTop, 200);
|
||||
assert_equals(scroller.scrollLeft, 100);
|
||||
|
||||
initial_target.style.setProperty("transform", "translate(0,100px)");
|
||||
initial_target.style.setProperty("top", "0");
|
||||
assert_equals(scroller.scrollTop, 200);
|
||||
assert_equals(scroller.scrollLeft, 100);
|
||||
}, "Applying two property changes that do not change the visual offset of the \
|
||||
target should not change the scroll offset.");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Removing the current snap target should make the scroller snap to a new target.
|
||||
</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;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
scroll-snap-type: both mandatory;
|
||||
}
|
||||
|
||||
#initial-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
background-color: red;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#other-target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 300px;
|
||||
left: 300px;
|
||||
background-color: green;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.area {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div class="area"></div>
|
||||
<div id="initial-target"></div>
|
||||
<div id="other-target"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const initial_target = document.getElementById("initial-target");
|
||||
const other_target = document.getElementById("other-target");
|
||||
const scroller = document.getElementById("scroller");
|
||||
|
||||
test(() => {
|
||||
scroller.scrollTo(0,0);
|
||||
assert_equals(scroller.scrollTop, 100);
|
||||
assert_equals(scroller.scrollLeft, 100);
|
||||
|
||||
scroller.removeChild(initial_target);
|
||||
assert_equals(scroller.scrollTop, 300);
|
||||
assert_equals(scroller.scrollLeft, 300);
|
||||
}, "Removing the current snap target should make the scroller snap to a new target.");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
The scroller should try to resnap to targets for both axes if possible.
|
||||
</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;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
scroll-snap-type: both mandatory;
|
||||
}
|
||||
|
||||
#x-axis-target {
|
||||
scroll-snap-align: none start;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 400px;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
#y-axis-target {
|
||||
scroll-snap-align: start none;
|
||||
background-color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 200px;
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
#far-x-axis-target {
|
||||
scroll-snap-align: none start;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 1200px;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
#far-y-axis-target {
|
||||
scroll-snap-align: start none;
|
||||
background-color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 300px;
|
||||
left: 1200px;
|
||||
}
|
||||
|
||||
.area {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div class="area"></div>
|
||||
<div id="x-axis-target"></div>
|
||||
<div id="y-axis-target"></div>
|
||||
<div id="far-x-axis-target"></div>
|
||||
<div id="far-y-axis-target"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
const x_target = document.getElementById("x-axis-target");
|
||||
const y_target = document.getElementById("y-axis-target");
|
||||
const scroller = document.getElementById("scroller");
|
||||
|
||||
test(() => {
|
||||
// The scroller should be snapped to the two closest points on first layout.
|
||||
assert_equals(scroller.scrollTop, 200);
|
||||
assert_equals(scroller.scrollLeft, 200);
|
||||
x_target.style.setProperty("left", "1000px");
|
||||
y_target.style.setProperty("top", "1000px");
|
||||
|
||||
// The style change makes it impossible for the scroller to snap to both
|
||||
// targets, but at least one of the targets should be preserved. The scroller
|
||||
// should then re-evaluate the snap point for the other axis.
|
||||
const snapped_to_x = scroller.scrollLeft == 1000 && scroller.scrollTop == 300;
|
||||
const snapped_to_y = scroller.scrollTop == 1000 && scroller.scrollLeft == 300;
|
||||
assert_true(snapped_to_x || snapped_to_y);
|
||||
}, "Scroller should snap to at least one of the targets if unable to snap to\
|
||||
both after a layout change.");
|
||||
</script>
|
||||
|
|
@ -89,7 +89,7 @@ const document_scroller = document.scrollingElement;
|
|||
test(() => {
|
||||
// Confirm that the document-level scroller is the snap container for all of
|
||||
// the snap areas.
|
||||
document_scroller.scrollBy(0, 10);
|
||||
document_scroller.scrollTo(0, 10);
|
||||
assert_equals(document_scroller.scrollTop, 500);
|
||||
// Snaps to the inner snap area.
|
||||
document_scroller.scrollBy(0, 75);
|
||||
|
|
@ -121,9 +121,13 @@ test(() => {
|
|||
|
||||
// Test that attaching a new snap container also properly assigns snap areas.
|
||||
test(() => {
|
||||
// All containers should capture snap areas.
|
||||
middle_scroller.style.setProperty("overflow", "scroll");
|
||||
inner_scroller.style.setProperty("overflow", "scroll");
|
||||
|
||||
// Sanity check that the scrollers still snap to the snap areas.
|
||||
document_scroller.scrollBy(0, 10);
|
||||
inner_scroller.scrollBy(0,10);
|
||||
document_scroller.scrollTo(0, 10);
|
||||
inner_scroller.scrollTo(0,10);
|
||||
assert_equals(inner_scroller.scrollTop, 300);
|
||||
assert_equals(document_scroller.scrollTop, 500);
|
||||
|
||||
|
|
@ -142,7 +146,7 @@ test(() => {
|
|||
assert_equals(document_scroller.scrollTop, 400);
|
||||
|
||||
// Inserted scroller snaps.
|
||||
inserted_scroller.scrollBy(0, 10);
|
||||
inserted_scroller.scrollTo(0, 10);
|
||||
assert_equals(inserted_scroller.scrollTop, 500);
|
||||
}, "Attaching a new element that is scrollable should assign the correct snap\
|
||||
areas to it.");
|
||||
|
|
@ -80,16 +80,14 @@ test(() => {
|
|||
const middle_scroller = document.getElementById("middle-scroller");
|
||||
const document_scroller = document.scrollingElement;
|
||||
|
||||
// Inner scroller should snap to its captured area.
|
||||
// Middle scroller doesn't snap.
|
||||
// Document scroller should snap to its only captured area.
|
||||
document_scroller.scrollBy(0, 100);
|
||||
inner_scroller.scrollBy(0,10);
|
||||
middle_scroller.scrollBy(0, 10);
|
||||
assert_equals(inner_scroller.scrollTop, 0);
|
||||
assert_equals(middle_scroller.scrollTop, 10);
|
||||
assert_equals(document_scroller.scrollTop, 500);
|
||||
|
||||
// Inner scroller snaps.
|
||||
inner_scroller.scrollBy(0, 10);
|
||||
// Scroll to (0,600), where we would expect the inner snap area to be relative
|
||||
// to the document scroller.
|
||||
document_scroller.scrollTo(0, 600);
|
||||
assert_equals(inner_scroller.scrollTop, 300);
|
||||
assert_equals(middle_scroller.scrollTop, 10);
|
||||
assert_equals(document_scroller.scrollTop, 500);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue