Browse Source

LibWeb: Implement scrollIntoView with 'center' block position

This fixes a crash on:

https://docs.github.com/en/get-started/learning-about-github/githubs-plans
Shannon Booth 1 year ago
parent
commit
ccdf82c9be

+ 1 - 0
Tests/LibWeb/Text/expected/scroll-into-view-center.txt

@@ -0,0 +1 @@
+    The page has been scrolled to y: 800

+ 29 - 0
Tests/LibWeb/Text/input/scroll-into-view-center.html

@@ -0,0 +1,29 @@
+<script src="include.js"></script>
+<style>
+    body {
+        margin: 0;
+    }
+
+    #box {
+        width: 200px;
+        height: 200px;
+        background-color: magenta;
+    }
+</style>
+<div style="height: 1000px"></div>
+<div style="margin-left: 500px" onclick="clickHandler(event)" id="box"></div>
+<div style="height: 1000px"></div>
+<script>
+    function clickHandler(event) {
+        document.getElementById("box").scrollIntoView({ block: "center" });
+    }
+
+    asyncTest(done => {
+        document.addEventListener("scroll", event => {
+            println("The page has been scrolled to y: " + window.scrollY);
+            done();
+        });
+
+        document.getElementById("box").dispatchEvent(new Event("click"));
+    });
+</script>

+ 1 - 1
Userland/Libraries/LibWeb/DOM/Element.cpp

@@ -1672,7 +1672,7 @@ static ErrorOr<void> scroll_an_element_into_view(DOM::Element& target, Bindings:
             }
             // 3. Otherwise, if block is "center", then align the center of target bounding border box with the center of scrolling box in scrolling box’s block flow direction.
             else if (block == Bindings::ScrollLogicalPosition::Center) {
-                TODO();
+                y = element_edge_a + (element_height / 2) - (scrolling_box_height / 2);
             }
             // 4. Otherwise, block is "nearest":
             else {