1 рік тому · 2b7e7cc1ad
--- 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
	`@@ -0,0 +1,2 @@`
			`+ Size changed: 100px x 100px`
			`+Size changed: 200px x 200px`