LibWeb: Don't treat SVG "use clone" removals as "use source" removals
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run

We were failing to discriminate between DOM removals happening to SVG
elements cloned as part of an SVG use element instantiation.

When a "use source" element is removed, all clones of that source must
be updated to reflect the change. But when a "use clone" element is
removed, that's fine.

This was causing the surprising disappearance of use element subtrees,
seen for example on https://cal.com/
This commit is contained in:
Andreas Kling 2025-08-07 18:55:45 +02:00 committed by Alexander Kalenik
commit 34ec33d71c
Notes: github-actions[bot] 2025-08-07 20:17:18 +00:00
3 changed files with 42 additions and 0 deletions

View file

@ -240,6 +240,13 @@ void SVGElement::removed_from(Node* old_parent, Node& old_root)
{
Base::removed_from(old_parent, old_root);
if (auto* shadow_root = as_if<DOM::ShadowRoot>(root())) {
// If this element is in a shadow root hosted by a use element,
// it already represents a clone and is not itself referenced.
if (shadow_root->host() && is<SVGUseElement>(*shadow_root->host()))
return;
}
remove_from_use_element_that_reference_this();
}

View file

@ -0,0 +1,4 @@
use1 > [object SVGSVGElement] foo
use2 > [object SVGSVGElement] foo
no use1
use2 > [object SVGSVGElement] foo

View file

@ -0,0 +1,31 @@
<!doctype html>
<script src="../include.js"></script>
<div id="svgContainer1">
<svg><use id="use1" href="#foo" /></svg>
</div>
<div id="svgContainer2">
<svg><use id="use2" href="#foo" /></svg>
</div>
<svg id="foo"></svg>
<script>
function check(use) {
let sr = internals.getShadowRoot(use);
println(use.id + " > " + sr.firstChild + " " + sr.firstChild.id);
}
asyncTest((done) => {
// NOTE: We use setTimeout() here to ensure that the SVG use elements have had their shadow clone trees instantiated.
setTimeout(function() {
check(use1);
check(use2);
svgContainer1.remove();
// use1 is gone, but use2 should still have children!
try {
check(use1);
} catch (e) {
println("no use1");
}
check(use2);
done();
}, 10);
});
</script>