RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 02:37:35 +00:00
Code Issues Activity Actions

LibWeb: Implement ResizeObserver::unobserve()

Browse source
This commit is contained in:
Aliaksandr Kalenik 2024-02-18 21:50:35 +01:00 • committed by Andreas Kling
parent fcf293a8df
commit 70a0f07732
3 changed files with 66 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Tests/LibWeb/Text/expected/ResizeObserver/unobserve.txt Normal file
View file

@ -0,0 +1 @@
Size changed: 200px x 200px

55
Tests/LibWeb/Text/input/ResizeObserver/unobserve.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<head>
<style>
#box {
width: 200px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script src="../include.js"></script>
<script>
asyncTest(async done => {
const box = document.getElementById("box");
let resolve = null;
function createResizeObserverPromise() {
return new Promise(r => {
resolve = r;
});
}
function createTimeoutPromise(timeout) {
return new Promise(r => {
setTimeout(r, timeout);
});
}
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const { width, height } = entry.contentRect;
println(`Size changed: ${width}px x ${height}px`);
}
if (resolve) resolve();
});
let observerCallbackInvocation = createResizeObserverPromise();
resizeObserver.observe(box);
await observerCallbackInvocation;
resizeObserver.unobserve(box);
box.style.width = "400px";
box.style.height = "400px";
// Let event loop run to ensure that observer callback is not invoked.
await createTimeoutPromise(0);
done();
});
</script>

13
Userland/Libraries/LibWeb/ResizeObserver/ResizeObserver.cpp
View file

@ -75,11 +75,18 @@ void ResizeObserver::observe(DOM::Element& target, ResizeObserverOptions options
m_observation_targets.append(resize_observation); m_observation_targets.append(resize_observation);
} }
// https://drafts.csswg.org/resize-observer/#dom-resizeobserver-unobserve // https://drafts.csswg.org/resize-observer-1/#dom-resizeobserver-unobserve
void ResizeObserver::unobserve(DOM::Element& target) void ResizeObserver::unobserve(DOM::Element& target)
{ {
// FIXME: Implement // 1. Let observation be ResizeObservation in [[observationTargets]] whose target slot is target.
(void)target; auto observation = m_observation_targets.find_if([&](auto& observation) { return observation->target().ptr() == &target; });
// 2. If observation is not found, return.
if (observation.is_end())
return;
// 3. Remove observation from [[observationTargets]].
m_observation_targets.remove(observation.index());
} }
// https://drafts.csswg.org/resize-observer/#dom-resizeobserver-disconnect // https://drafts.csswg.org/resize-observer/#dom-resizeobserver-disconnect