mirror of
https://github.com/servo/servo.git
synced 2025-08-16 02:45:36 +01:00
Update web-platform-tests to revision 50ff4f970fd8592a9f436d4e86e7d572de143260
This commit is contained in:
WPT Sync Bot
parent
82bbf3ad45
commit
8ea5658199
150 changed files with 4737 additions and 998 deletions
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Testing default value of scroll-behavior</title>
|
||||
<meta name="timeout" content="long"/>
|
||||
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/scroll-behavior.js"></script>
|
||||
<style>
|
||||
.scrollable {
|
||||
overflow: auto;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
<div id="log">
|
||||
</div>
|
||||
<div id="overflowNode" class="scrollable">
|
||||
<div style="width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);">
|
||||
<span style="display: inline-block; width: 500px; height: 250px;"></span><span id="elementToReveal" style="display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var scrollingElement = overflowNode;
|
||||
var elementToRevealLeft = 500;
|
||||
var elementToRevealTop = 250;
|
||||
var scrollFunction = "scroll";
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, "scroll", "instant", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, "Instant scrolling of an element with default scroll-behavior");
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, "Smooth scrolling of an element with default scroll-behavior");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on an element</title>
|
||||
<meta name="timeout" content="long"/>
|
||||
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/scroll-behavior.js"></script>
|
||||
<style>
|
||||
.scrollable {
|
||||
overflow: auto;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
}
|
||||
.autoBehavior {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
.smoothBehavior {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
<div id="log">
|
||||
</div>
|
||||
<div id="overflowNode" class="scrollable">
|
||||
<div style="width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);">
|
||||
<span style="display: inline-block; width: 500px; height: 250px;"></span><span id="elementToReveal" style="display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var scrollingElement = overflowNode;
|
||||
var styledElement = overflowNode;
|
||||
var elementToRevealLeft = 500;
|
||||
var elementToRevealTop = 250;
|
||||
|
||||
["scroll", "scrollTo", "scrollBy", "scrollIntoView"].forEach((scrollFunction) => {
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Element with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Element with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Element with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Element with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Element with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Element with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Element with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Element with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
|
||||
});
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft / 2, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop / 2, "Final value of scrollTop");
|
||||
});
|
||||
}, "Aborting an ongoing smooth scrolling on an element with another smooth scrolling");
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
scrollNode(scrollingElement, "scroll", "instant", 0, 0);
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, 0, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, 0, "Final value of scrollTop");
|
||||
});
|
||||
}, "Aborting an ongoing smooth scrolling on an element with an instant scrolling");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on the root of the main frame</title>
|
||||
<meta name="timeout" content="long"/>
|
||||
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/scroll-behavior.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.autoBehavior {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
.smoothBehavior {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
<div id="log">
|
||||
</div>
|
||||
<div id="pageContent" style="position: absolute; left: 0; top: 0;">
|
||||
<div id="elementToReveal" style="position: absolute; display: inline-block; width: 10px; height: 15px; background: black;"></div>
|
||||
</div>
|
||||
<script>
|
||||
var pageLoaded = async_test("Page loaded");
|
||||
var scrollingElement, styledElement, elementToRevealLeft, elementToRevealTop;
|
||||
window.addEventListener("load", pageLoaded.step_func_done(function() {
|
||||
scrollingElement = document.scrollingElement;
|
||||
styledElement = document.documentElement;
|
||||
pageContent.style.width = (10 + window.innerWidth) * 5 + "px";
|
||||
pageContent.style.height = (20 + window.innerHeight) * 6 + "px";
|
||||
elementToRevealLeft = (10 + window.innerWidth) * 3;
|
||||
elementToRevealTop = (20 + window.innerHeight) * 4;
|
||||
elementToReveal.style.left = elementToRevealLeft + "px";
|
||||
elementToReveal.style.top = elementToRevealTop + "px";
|
||||
|
||||
add_completion_callback(() => { resetScroll(scrollingElement); });
|
||||
|
||||
["scroll", "scrollTo", "scrollBy", "scrollIntoView"].forEach((scrollFunction) => {
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
|
||||
});
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft / 2, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop / 2, "Final value of scrollTop");
|
||||
});
|
||||
}, "Aborting an ongoing smooth scrolling on the main frame with another smooth scrolling");
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
scrollNode(scrollingElement, "scroll", "instant", 0, 0);
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, 0, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, 0, "Final value of scrollTop");
|
||||
});
|
||||
}, "Aborting an ongoing smooth scrolling on the main frame with an instant scrolling");
|
||||
}));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Testing scrollOptions' behavior for Element.scroll* on the window of the main frame</title>
|
||||
<meta name="timeout" content="long"/>
|
||||
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/scroll-behavior.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.autoBehavior {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
.smoothBehavior {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
<div id="log">
|
||||
</div>
|
||||
<div id="pageContent" style="position: absolute; left: 0; top: 0;">
|
||||
<div id="elementToReveal" style="position: absolute; display: inline-block; width: 10px; height: 15px; background: black;"></div>
|
||||
</div>
|
||||
<script>
|
||||
var pageLoaded = async_test("Page loaded");
|
||||
var scrollingWindow, styledElement, elementToRevealLeft, elementToRevealTop;
|
||||
window.addEventListener("load", pageLoaded.step_func_done(function() {
|
||||
scrollingWindow = window;
|
||||
styledElement = document.documentElement;
|
||||
pageContent.style.width = (10 + window.innerWidth) * 5 + "px";
|
||||
pageContent.style.height = (20 + window.innerHeight) * 6 + "px";
|
||||
elementToRevealLeft = (10 + window.innerWidth) * 3;
|
||||
elementToRevealTop = (20 + window.innerHeight) * 4;
|
||||
elementToReveal.style.left = elementToRevealLeft + "px";
|
||||
elementToReveal.style.top = elementToRevealTop + "px";
|
||||
|
||||
add_completion_callback(() => { resetScrollForWindow(window); });
|
||||
|
||||
["scroll", "scrollTo", "scrollBy"].forEach((scrollFunction) => {
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
|
||||
});
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
|
||||
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft / 2, "Final value of scrollLeft");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop / 2, "Final value of scrollTop");
|
||||
});
|
||||
}, "Aborting an ongoing smooth scrolling on the main frame with another smooth scrolling");
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
scrollWindow(scrollingWindow, "scroll", "instant", 0, 0);
|
||||
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
|
||||
assert_equals(scrollingWindow.scrollX, 0, "Final value of scrollLeft");
|
||||
assert_equals(scrollingWindow.scrollY, 0, "Final value of scrollTop");
|
||||
});
|
||||
}, "Aborting an ongoing smooth scrolling on the main frame with an instant scrolling");
|
||||
}));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Testing scrollOptions' behavior with scrollIntoView for nested scrolling nodes</title>
|
||||
<meta name="timeout" content="long"/>
|
||||
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/scroll-behavior.js"></script>
|
||||
<style>
|
||||
.scrollable {
|
||||
overflow: auto;
|
||||
height: 200px;
|
||||
}
|
||||
.smoothBehavior {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.gradient {
|
||||
background: linear-gradient(135deg, red, green);
|
||||
}
|
||||
</style>
|
||||
<div id="log">
|
||||
</div>
|
||||
<div>
|
||||
<div class="scrollable smoothBehavior" style="width: 450px">
|
||||
<div class="gradient" style="width: 100px; height: 500px;"></div>
|
||||
<div class="scrollable smoothBehavior" style="width: 400px">
|
||||
<div class="gradient" style="width: 100px; height: 500px;"></div>
|
||||
<div class="scrollable" style="width: 350px">
|
||||
<div class="gradient" style="width: 100px; height: 500px;"></div>
|
||||
<div class="scrollable" style="width: 300px">
|
||||
<div class="gradient" style="width: 100px; height: 500px;"></div>
|
||||
<div class="scrollable smoothBehavior" style="width: 250px">
|
||||
<div class="gradient" style="width: 100px; height: 500px;"></div>
|
||||
<div class="scrollable" style="width: 200px">
|
||||
<div class="gradient" style="width: 100px; height: 500px;"></div>
|
||||
<div id="elementToReveal" style="width: 10px; height: 10px; background: black;"></div>
|
||||
<div class="gradient" style="width: 100px; height: 500px;"></div>
|
||||
</div>
|
||||
<div class="gradient" style="width: 100px; height: 500px;"></div>
|
||||
</div>
|
||||
<div class="gradient" style="width: 100px; height: 500px;"></div>
|
||||
</div>
|
||||
<div class="gradient" style="width: 100px; height: 500px;"></div>
|
||||
</div>
|
||||
<div class="gradient" style="width: 100px; height: 500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// The CSSOM-View spec and implementations follow different algorithms (scrolls performed in parallel, as inner-to-outer sequence or as outer-to-inner sequence).
|
||||
// See https://github.com/w3c/csswg-drafts/issues/3127
|
||||
promise_test(() => {
|
||||
return new Promise(function(resolve, reject) {
|
||||
var divs = document.querySelectorAll(".scrollable");
|
||||
divs.forEach((scrollableDiv) => {
|
||||
resetScroll(scrollableDiv);
|
||||
});
|
||||
elementToReveal.scrollIntoView({inline: "start", block: "start", behavior: "auto"});
|
||||
var scrollTop = new Map();
|
||||
var isSmooth = new Map();
|
||||
divs.forEach((scrollableDiv) => {
|
||||
scrollTop.set(scrollableDiv, scrollableDiv.scrollTop);
|
||||
isSmooth.set(scrollableDiv, scrollableDiv.classList.contains("smoothBehavior"));
|
||||
// If scroll operations are not performed in parallel, scroll boxes with instant behavior might also need to wait for their predecessors.
|
||||
if (isSmooth.get(scrollableDiv))
|
||||
assert_less_than(scrollTop.get(scrollableDiv), 500, "Element with smooth behavior should not scroll immediately");
|
||||
});
|
||||
|
||||
observeScrolling(Array.from(divs), function(done) {
|
||||
try {
|
||||
divs.forEach((scrollableDiv) => {
|
||||
assert_less_than_equal(scrollTop.get(scrollableDiv), scrollableDiv.scrollTop, "ScrollTop keeps increasing");
|
||||
if (!isSmooth.get(scrollableDiv))
|
||||
assert_any(assert_equals, scrollableDiv.scrollTop, [0, 500], "Element with instant behavior should jump to the final position");
|
||||
if (done)
|
||||
assert_equals(scrollableDiv.scrollTop, 500, "Final value of scrollTop");
|
||||
scrollTop.set(scrollableDiv, scrollableDiv.scrollTop);
|
||||
});
|
||||
} catch(e) {
|
||||
reject(e);
|
||||
}
|
||||
if (done)
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}, "scrollIntoView with nested elements with different scroll-behavior");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Testing scroll positions when scrolling an element with smooth behavior</title>
|
||||
<meta name="timeout" content="long"/>
|
||||
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/scroll-behavior.js"></script>
|
||||
<style>
|
||||
.scrollable {
|
||||
overflow: auto;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
<div id="log">
|
||||
</div>
|
||||
<div id="overflowNode" class="scrollable">
|
||||
<div style="width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);">
|
||||
<span style="display: inline-block; width: 500px; height: 250px;"></span><span id="elementToReveal" style="display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// For smooth behavior, evolution of scroll positions over time is not specified by CSSOM View.
|
||||
// This test relies on the minimal assumption that scroll position functions are monotonic.
|
||||
["scroll", "scrollTo", "scrollBy", "scrollIntoView"].forEach(function(scrollFunction) {
|
||||
[{left:0, top:0}, {left:1000, top:0}, {left:0, top:500}, {left:1000, top:500}].forEach((initial) => {
|
||||
var finalLeft = 500;
|
||||
var finalTop = 250;
|
||||
promise_test(() => {
|
||||
return new Promise(function(resolve, reject) {
|
||||
scrollNode(overflowNode, "scroll", "instant", initial.left, initial.top);
|
||||
var oldLeft = overflowNode.scrollLeft;
|
||||
var oldTop = overflowNode.scrollTop;
|
||||
assert_equals(oldLeft, initial.left, "ScrollLeft should be at initial position");
|
||||
assert_equals(oldTop, initial.top, "ScrollTop should be at initial position");
|
||||
if (scrollFunction === "scrollBy")
|
||||
scrollNode(overflowNode, scrollFunction, "smooth", finalLeft - initial.left, finalTop - initial.top);
|
||||
else
|
||||
scrollNode(overflowNode, scrollFunction, "smooth", finalLeft, finalTop);
|
||||
observeScrolling(overflowNode, function(done) {
|
||||
try {
|
||||
var newLeft = overflowNode.scrollLeft;
|
||||
var newTop = overflowNode.scrollTop;
|
||||
assert_less_than_equal(Math.hypot(finalLeft - newLeft, finalTop - newTop), Math.hypot(finalLeft - oldLeft, finalTop - oldTop), "Scroll position should move towards the final position");
|
||||
if (done) {
|
||||
assert_equals(newLeft, finalLeft, "ScrollLeft should reach final position");
|
||||
assert_equals(newTop, finalTop, "ScrollTop should reach final position");
|
||||
}
|
||||
oldLeft = newLeft;
|
||||
oldTop = newTop;
|
||||
} catch(e) {
|
||||
reject(e);
|
||||
}
|
||||
if (done)
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}, `Scroll positions when performing smooth scrolling from (${initial.left}, ${initial.top}) to (${finalLeft}, ${finalTop}) using ${scrollFunction}() `);
|
||||
});
|
||||
});
|
||||
|
||||
promise_test(() => {
|
||||
return new Promise(function(resolve, reject) {
|
||||
resetScroll(overflowNode);
|
||||
var initialScrollAborted = false;
|
||||
var scrollDirectionChanged = false;
|
||||
var oldLeft = overflowNode.scrollLeft;
|
||||
var oldTop = overflowNode.scrollTop;
|
||||
assert_equals(oldLeft, 0);
|
||||
assert_equals(oldTop, 0);
|
||||
scrollNode(overflowNode, "scroll", "smooth", 1500, 750);
|
||||
observeScrolling(overflowNode, function(done) {
|
||||
try {
|
||||
var newLeft = overflowNode.scrollLeft;
|
||||
var newTop = overflowNode.scrollTop;
|
||||
if (initialScrollAborted) {
|
||||
if (scrollDirectionChanged) {
|
||||
assert_greater_than_equal(oldLeft, newLeft, "ScrollLeft keeps decreasing");
|
||||
assert_greater_than_equal(oldTop, newTop, "ScrollTop keeps decreasing");
|
||||
} else
|
||||
scrollDirectionChanged = newLeft <= oldLeft && newTop <= oldTop;
|
||||
} else {
|
||||
assert_less_than_equal(oldLeft, newLeft, "ScrollLeft keeps increasing");
|
||||
assert_less_than_equal(oldTop, newTop, "ScrollTop keeps increasing");
|
||||
if (newLeft > 1000 && newTop > 500) {
|
||||
// Abort the initial scroll.
|
||||
initialScrollAborted = true;
|
||||
scrollNode(overflowNode, "scroll", "smooth", 500, 250);
|
||||
newLeft = overflowNode.scrollLeft;
|
||||
newTop = overflowNode.scrollTop;
|
||||
}
|
||||
}
|
||||
if (done) {
|
||||
assert_equals(newLeft, 500, "ScrollLeft should reach final position");
|
||||
assert_equals(newTop, 250, "ScrollTop should reach final position");
|
||||
}
|
||||
oldLeft = newLeft;
|
||||
oldTop = newTop;
|
||||
} catch(e) {
|
||||
reject(e);
|
||||
}
|
||||
if (done)
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}, "Scroll positions when aborting a smooth scrolling with another smooth scrolling");
|
||||
|
||||
promise_test(() => {
|
||||
return new Promise(function(resolve) {
|
||||
resetScroll(overflowNode);
|
||||
var initialScrollAborted = false;
|
||||
var oldLeft = overflowNode.scrollLeft;
|
||||
var oldTop = overflowNode.scrollTop;
|
||||
assert_equals(oldLeft, 0);
|
||||
assert_equals(oldTop, 0);
|
||||
scrollNode(overflowNode, "scroll", "smooth", 1500, 750);
|
||||
observeScrolling(overflowNode, function(done) {
|
||||
try {
|
||||
var newLeft = overflowNode.scrollLeft;
|
||||
var newTop = overflowNode.scrollTop;
|
||||
if (!initialScrollAborted) {
|
||||
assert_less_than_equal(oldLeft, newLeft, "ScrollLeft keeps increasing");
|
||||
assert_less_than_equal(oldTop, newTop, "ScrollTop keeps increasing");
|
||||
if (newLeft > 1000 && newTop > 500) {
|
||||
// Abort the initial scroll.
|
||||
initialScrollAborted = true;
|
||||
scrollNode(overflowNode, "scroll", "instant", 500, 250);
|
||||
newLeft = overflowNode.scrollLeft;
|
||||
newTop = overflowNode.scrollTop;
|
||||
assert_equals(newLeft, 500, "ScrollLeft should reach final position");
|
||||
assert_equals(newTop, 250, "ScrollTop should reach final position");
|
||||
}
|
||||
}
|
||||
if (done) {
|
||||
assert_equals(newLeft, 500, "ScrollLeft should stay at final position");
|
||||
assert_equals(newTop, 250, "ScrollTop should stay at final position");
|
||||
}
|
||||
oldLeft = newLeft;
|
||||
oldTop = newTop;
|
||||
} catch(e) {
|
||||
reject(e);
|
||||
}
|
||||
if (done)
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}, "Scroll positions when aborting a smooth scrolling with an instant scrolling");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on the root of a subframe</title>
|
||||
<meta name="timeout" content="long"/>
|
||||
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/scroll-behavior.js"></script>
|
||||
<div id="log">
|
||||
</div>
|
||||
<iframe id="iframeNode" width="400px" height="200px" srcdoc="<!DOCTYPE>
|
||||
<html>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.autoBehavior {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
.smoothBehavior {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div style='width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);'>
|
||||
<span style='display: inline-block; width: 500px; height: 250px;'></span><span id='elementToReveal' style='display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;'></span>
|
||||
</div>
|
||||
</body>
|
||||
</html>">
|
||||
</iframe>
|
||||
<script>
|
||||
var iframeLoadTest = async_test("iframe loaded");
|
||||
var scrollingElement, styledElement, elementToReveal;
|
||||
var elementToRevealLeft = 500;
|
||||
var elementToRevealTop = 250;
|
||||
iframeNode.addEventListener("load", iframeLoadTest.step_func_done(() => {
|
||||
scrollingElement = iframeNode.contentDocument.scrollingElement;
|
||||
styledElement = iframeNode.contentDocument.documentElement;
|
||||
elementToReveal = iframeNode.contentDocument.getElementById("elementToReveal");
|
||||
|
||||
["scroll", "scrollTo", "scrollBy", "scrollIntoView"].forEach((scrollFunction) => {
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Subframe with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Subframe with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Subframe with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Subframe with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Subframe with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Subframe with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Subframe with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Subframe with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
|
||||
});
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft / 2, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, elementToRevealTop / 2, "Final value of scrollTop");
|
||||
});
|
||||
}, "Aborting an ongoing smooth scrolling on a subframe with another smooth scrolling");
|
||||
|
||||
promise_test(() => {
|
||||
resetScroll(scrollingElement);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingElement.scrollLeft, 0);
|
||||
assert_equals(scrollingElement.scrollTop, 0);
|
||||
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
scrollNode(scrollingElement, "scroll", "instant", 0, 0);
|
||||
return waitForScrollEnd(scrollingElement).then(() => {
|
||||
assert_equals(scrollingElement.scrollLeft, 0, "Final value of scrollLeft");
|
||||
assert_equals(scrollingElement.scrollTop, 0, "Final value of scrollTop");
|
||||
});
|
||||
}, "Aborting an ongoing smooth scrolling on a subframe with an instant scrolling");
|
||||
}));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on the root of a subframe</title>
|
||||
<meta name="timeout" content="long"/>
|
||||
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/scroll-behavior.js"></script>
|
||||
<div id="log">
|
||||
</div>
|
||||
<iframe id="iframeNode" width="400px" height="200px" srcdoc="<!DOCTYPE>
|
||||
<html>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.autoBehavior {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
.smoothBehavior {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div style='width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);'>
|
||||
<span style='display: inline-block; width: 500px; height: 250px;'></span><span id='elementToReveal' style='display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;'></span>
|
||||
</div>
|
||||
</body>
|
||||
</html>">
|
||||
</iframe>
|
||||
<script>
|
||||
var iframeLoadTest = async_test("iframe loaded");
|
||||
var scrollingWindow, styledElement, elementToReveal;
|
||||
var elementToRevealLeft = 500;
|
||||
var elementToRevealTop = 250;
|
||||
iframeNode.addEventListener("load", iframeLoadTest.step_func_done(() => {
|
||||
scrollingWindow = iframeNode.contentWindow;
|
||||
styledElement = iframeNode.contentDocument.documentElement;
|
||||
elementToReveal = iframeNode.contentDocument.getElementById("elementToReveal");
|
||||
|
||||
["scroll", "scrollTo", "scrollBy"].forEach((scrollFunction) => {
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "autoBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
|
||||
return new Promise((resolve) => { resolve(); });
|
||||
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
|
||||
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
|
||||
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
|
||||
});
|
||||
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
|
||||
});
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
|
||||
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
|
||||
assert_equals(scrollingWindow.scrollX, elementToRevealLeft / 2, "Final value of scrollLeft");
|
||||
assert_equals(scrollingWindow.scrollY, elementToRevealTop / 2, "Final value of scrollTop");
|
||||
});
|
||||
}, "Aborting an ongoing smooth scrolling on the main frame with another smooth scrolling");
|
||||
|
||||
promise_test(() => {
|
||||
resetScrollForWindow(scrollingWindow);
|
||||
setScrollBehavior(styledElement, "smoothBehavior");
|
||||
assert_equals(scrollingWindow.scrollX, 0);
|
||||
assert_equals(scrollingWindow.scrollY, 0);
|
||||
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
|
||||
scrollWindow(scrollingWindow, "scroll", "instant", 0, 0);
|
||||
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
|
||||
assert_equals(scrollingWindow.scrollX, 0, "Final value of scrollLeft");
|
||||
assert_equals(scrollingWindow.scrollY, 0, "Final value of scrollTop");
|
||||
});
|
||||
}, "Aborting an ongoing smooth scrolling on the main frame with an instant scrolling");
|
||||
|
||||
}));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
function observeScrolling(elements, callback) {
|
||||
if (!Array.isArray(elements))
|
||||
elements = [elements];
|
||||
var lastChangedFrame = 0;
|
||||
var lastLeft = new Map();
|
||||
var lastTop = new Map();
|
||||
elements.forEach((element) => {
|
||||
lastLeft.set(element, element.scrollLeft);
|
||||
lastTop.set(element, element.scrollTop);
|
||||
});
|
||||
function tick(frames) {
|
||||
// We requestAnimationFrame either for 500 frames or until 20 frames with
|
||||
// no change have been observed.
|
||||
if (frames >= 500 || frames - lastChangedFrame > 20) {
|
||||
callback(true);
|
||||
} else {
|
||||
var scrollHappened = elements.some((element) => {
|
||||
return element.scrollLeft != lastLeft.get(element) || element.scrollTop != lastTop.get(element);
|
||||
});
|
||||
if (scrollHappened) {
|
||||
lastChangedFrame = frames;
|
||||
elements.forEach((element) => {
|
||||
lastLeft.set(element, element.scrollLeft);
|
||||
lastTop.set(element, element.scrollTop);
|
||||
});
|
||||
callback(false);
|
||||
}
|
||||
requestAnimationFrame(tick.bind(null, frames + 1));
|
||||
}
|
||||
}
|
||||
tick(0);
|
||||
}
|
||||
|
||||
function waitForScrollEnd(elements) {
|
||||
return new Promise((resolve) => {
|
||||
observeScrolling(elements, (done) => {
|
||||
if (done)
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function resetScroll(scrollingElement) {
|
||||
// Try various methods to ensure the element position is reset immediately.
|
||||
scrollingElement.scrollLeft = 0;
|
||||
scrollingElement.scrollTop = 0;
|
||||
scrollingElement.scroll({left: 0, top: 0, behavior: "instant"});
|
||||
}
|
||||
|
||||
function resetScrollForWindow(scrollingWindow) {
|
||||
// Try various methods to ensure the element position is reset immediately.
|
||||
scrollingWindow.document.scrollingElement.scrollLeft = 0;
|
||||
scrollingWindow.document.scrollingElement.scrollTop = 0;
|
||||
scrollingWindow.scroll({left: 0, top: 0, behavior: "instant"});
|
||||
}
|
||||
|
||||
function setScrollBehavior(styledElement, className) {
|
||||
styledElement.classList.remove("autoBehavior", "smoothBehavior");
|
||||
styledElement.classList.add(className);
|
||||
}
|
||||
|
||||
function scrollNode(scrollingElement, scrollFunction, behavior, elementToRevealLeft, elementToRevealTop) {
|
||||
var args = {};
|
||||
if (behavior)
|
||||
args.behavior = behavior;
|
||||
switch (scrollFunction) {
|
||||
case "scrollIntoView":
|
||||
args.inline = "start";
|
||||
args.block = "start";
|
||||
elementToReveal.scrollIntoView(args);
|
||||
break;
|
||||
default:
|
||||
args.left = elementToRevealLeft;
|
||||
args.top = elementToRevealTop;
|
||||
scrollingElement[scrollFunction](args);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function scrollWindow(scrollingWindow, scrollFunction, behavior, elementToRevealLeft, elementToRevealTop) {
|
||||
var args = {};
|
||||
if (behavior)
|
||||
args.behavior = behavior;
|
||||
args.left = elementToRevealLeft;
|
||||
args.top = elementToRevealTop;
|
||||
scrollingWindow[scrollFunction](args);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue