LibWeb: Implement ResizeObserver::disconnect()

Author: https://github.com/kalenikaliaksandr Commit: https://github.com/SerenityOS/serenity/commit/2b7e7cc1ad Pull-request: https://github.com/SerenityOS/serenity/pull/23260 Issue: https://github.com/SerenityOS/serenity/issues/23197
2024-02-19 00:07:42 +01:00 · 2024-02-19 00:07:42 +01:00 · 2b7e7cc1ad · 2024-07-17 07:43:05 +09:00
commit 2b7e7cc1ad
parent 70a0f07732
3 changed files with 80 additions and 2 deletions
--- a/Tests/LibWeb/Text/expected/ResizeObserver/disconnect.txt
+++ b/Tests/LibWeb/Text/expected/ResizeObserver/disconnect.txt
@ -0,0 +1,2 @@
+      Size changed: 100px x 100px
+Size changed: 200px x 200px
--- a/Tests/LibWeb/Text/input/ResizeObserver/disconnect.html
+++ b/Tests/LibWeb/Text/input/ResizeObserver/disconnect.html
@ -0,0 +1,72 @@
+<!DOCTYPE html>
+
+<head>
+    <style>
+        #outer {
+            width: 200px;
+            height: 200px;
+            background-color: lightblue;
+        }
+
+        #inner {
+            width: 100px;
+            height: 100px;
+            background-color: pink;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="outer">
+        <div id="inner"></div>
+    </div>
+</body>
+<script src="../include.js"></script>
+<script>
+    asyncTest(async done => {
+        const outerBox = document.getElementById("outer");
+        const innerBox = document.getElementById("inner");
+
+        function createTimeoutPromise(timeout) {
+            return new Promise(r => {
+                setTimeout(r, timeout);
+            });
+        }
+
+        function createResizeObserverCallback() {
+            let resolve;
+            const promise = new Promise(r => {
+                resolve = r;
+            });
+
+            const callback = (entries) => {
+                for (let entry of entries) {
+                    const { width, height } = entry.contentRect;
+                    println(`Size changed: ${width}px x ${height}px`);
+                }
+
+                resolve();
+            };
+
+            return { promise, callback };
+        }
+
+        const { callback, promise } = createResizeObserverCallback();
+
+        const resizeObserver = new ResizeObserver(callback);
+        resizeObserver.observe(innerBox);
+        resizeObserver.observe(outerBox);
+
+        await promise;
+
+        resizeObserver.disconnect();
+
+        innerBox.style.width = "500px";
+        outerBox.style.width = "600px";
+
+        // Let event loop run to ensure that observer callback is not invoked.
+        await createTimeoutPromise(0);
+
+        done();
+    });
+</script>
--- a/Userland/Libraries/LibWeb/ResizeObserver/ResizeObserver.cpp
+++ b/Userland/Libraries/LibWeb/ResizeObserver/ResizeObserver.cpp
@ -89,10 +89,14 @@ void ResizeObserver::unobserve(DOM::Element& target)
    m_observation_targets.remove(observation.index());
 }

-// https://drafts.csswg.org/resize-observer/#dom-resizeobserver-disconnect
+// https://drafts.csswg.org/resize-observer-1/#dom-resizeobserver-disconnect
 void ResizeObserver::disconnect()
 {
-    // FIXME: Implement
+    // 1. Clear the [[observationTargets]] list.
+    m_observation_targets.clear();
+
+    // 2. Clear the [[activeTargets]] list.
+    m_active_targets.clear();
 }

 void ResizeObserver::invoke_callback(Vector<JS::NonnullGCPtr<ResizeObserverEntry>>& entries) const