Prechádzať zdrojové kódy

LibWeb: Fire "scroll" events on DOM elements

Before this change "scroll" events were only fired on document but now
it happens for all elements with scrollable overflow.
Aliaksandr Kalenik 1 rok pred
rodič
commit
dd73cccf8f

+ 1 - 0
Tests/LibWeb/Text/expected/element-scroll-event.txt

@@ -0,0 +1 @@
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.   scroll event fired y=100

+ 29 - 0
Tests/LibWeb/Text/input/element-scroll-event.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<style>
+    #scrollable-div {
+        width: 300px;
+        height: 200px;
+        overflow: auto;
+        border: 1px solid black;
+        padding: 10px;
+        font-size: 50px;
+    }
+</style>
+<script src="include.js"></script>
+<div id="scrollable-div">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed
+    cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis
+    ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum
+    lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+    inceptos himenaeos.
+</div>
+<script>
+    asyncTest(done => {
+        const scrollable = document.getElementById("scrollable-div");
+        scrollable.addEventListener("scroll", event => {
+            println(`scroll event fired y=${scrollable.scrollTop}`);
+            done();
+        });
+        scrollable.scrollTop = 100;
+    });
+</script>

+ 20 - 0
Userland/Libraries/LibWeb/Painting/PaintableBox.cpp

@@ -91,6 +91,26 @@ void PaintableBox::set_scroll_offset(CSSPixelPoint offset)
         return;
     }
 
+    // https://drafts.csswg.org/cssom-view-1/#scrolling-events
+    // Whenever an element gets scrolled (whether in response to user interaction or by an API),
+    // the user agent must run these steps:
+
+    // 1. Let doc be the element’s node document.
+    auto& document = layout_box().document();
+
+    // FIXME: 2. If the element is a snap container, run the steps to update snapchanging targets for the element with
+    //           the element’s eventual snap target in the block axis as newBlockTarget and the element’s eventual snap
+    //           target in the inline axis as newInlineTarget.
+
+    JS::NonnullGCPtr<DOM::EventTarget> const event_target = *dom_node();
+
+    // 3. If the element is already in doc’s pending scroll event targets, abort these steps.
+    if (document.pending_scroll_event_targets().contains_slow(event_target))
+        return;
+
+    // 4. Append the element to doc’s pending scroll event targets.
+    document.pending_scroll_event_targets().append(*layout_box().dom_node());
+
     set_needs_display();
 }