0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

LibWeb: Null layout and paintable pointers of removed DOM::Node

Browse source 
When a node is removed from the DOM tree, its paintable needs to be
removed to ensure that it is not used to obtain sizes that are no
longer valid.

This change enables the ResizeObserver to send a notification if a node
is removed, as it should, because a removed node now has a size of zero

It should be okay to nullify pointers without concerning
parent/sibling/child relationships because the layout and paintable
trees will be rebuilt following any DOM mutation anyway.
This commit is contained in:
Aliaksandr Kalenik 2024-02-19 02:22:15 +01:00 • committed by Andreas Kling
parent 2b7e7cc1ad
commit 036cd9b2dd
Notes: sideshowbarker 2024-07-16 23:23:26 +09:00
6 changed files with 103 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Tests/LibWeb/Text/expected/ResizeObserver/notify-if-node-is-removed.txt Normal file
View file

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

2
Tests/LibWeb/Text/expected/ResizeObserver/notify-if-parent-is-removed.txt Normal file
View file

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

46
Tests/LibWeb/Text/input/ResizeObserver/notify-if-node-is-removed.html Normal file
View file

@ -0,0 +1,46 @@
<!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;
});
}
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;
box.remove();
observerCallbackInvocation = createResizeObserverPromise();
await observerCallbackInvocation;
done();
});
</script>

46
Tests/LibWeb/Text/input/ResizeObserver/notify-if-parent-is-removed.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<head>
<style>
#box {
width: 200px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div><div id="box"></div></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;
});
}
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;
box.parentElement.remove();
observerCallbackInvocation = createResizeObserverPromise();
await observerCallbackInvocation;
done();
});
</script>

6
Userland/Libraries/LibWeb/DOM/Node.cpp
View file

@ -974,6 +974,12 @@ void Node::inserted()
set_needs_style_update(true);
}
void Node::removed_from(Node*)
{
m_layout_node = nullptr;
m_paintable = nullptr;
}
ParentNode* Node::parent_or_shadow_host()
{
if (is<ShadowRoot>(*this))

2
Userland/Libraries/LibWeb/DOM/Node.h
View file

@ -187,7 +187,7 @@ public:
Element const* parent_element() const;
virtual void inserted();
virtual void removed_from(Node*) { }
virtual void removed_from(Node*);
virtual void children_changed() { }
virtual void adopted_from(Document&) { }
virtual void cloned(Node&, bool) {};