Apply scroll snap in ScrollToShowRect in PresShell.cpp.
Differential Revision: https://phabricator.services.mozilla.com/D147708
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1771830
gecko-commit: 381371a34ad1da9eb4dfdc70381e6ea63fdf8762
gecko-reviewers: emilio
diff --git a/css/css-scroll-snap/snap-on-focus.html b/css/css-scroll-snap/snap-on-focus.html
new file mode 100644
index 0000000..b876399
--- /dev/null
+++ b/css/css-scroll-snap/snap-on-focus.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<title>Scroll snap on Element.focus()</title>
+<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+div {
+ position: absolute;
+ margin: 0;
+}
+
+#scroller {
+ height: 500px;
+ width: 500px;
+ overflow-y: scroll;
+ scroll-snap-type: y mandatory;
+}
+
+.snap {
+ width: 100%;
+ height: 300px;
+ top: 100px;
+ left: 0;
+ background-color: green;
+ scroll-snap-align: start none;
+}
+
+.no-snap {
+ width: 100%;
+ height: 300px;
+ top: 100px;
+ left: 0;
+ background-color: red;
+}
+
+.area {
+ width: 100%;
+ height: 2000px;
+}
+</style>
+
+<div id="scroller">
+ <div class="area"></div>
+ <div class="snap" style="top: 0px;"></div>
+ <div class="no-snap" style="top: 1000px;" tabindex=-1></div>
+ <div class="snap" style="top: 1200px;"></div>
+</div>
+
+<script>
+test(t => {
+ document.querySelector(".no-snap").focus();
+ assert_equals(scroller.scrollTop, 1200);
+}, "scroll snap should happens on Element.focus()");
+
+</script>
