Files
ladybird/Tests/LibWeb/Text/input/css/shadow-slotted-animation-name-uses-shadow-root-keyframes.html
Andreas Kling 11c75a2ffb LibWeb: Fix @keyframes resolution for slotted elements
A @keyframes rule scoped to a shadow root was not reliably reached
from an animated slotted light-DOM element: the keyframes lookup
walked the element's own root first, then fell back to the document,
but slotted elements can pick up animation-name from a ::slotted(...)
rule that lives in an ancestor shadow root rather than in the
element's own tree.

Track the shadow-root scope that supplied each winning cascaded
declaration, and use that scope to resolve the matching @keyframes
when processing animation definitions. A shared constructable
stylesheet can be adopted into several scopes at once, so the
declaration object alone is too weak as a key; the per-entry
shadow-root pointer disambiguates which adoption actually contributed.

Also refresh running CSS animations' keyframe sets when style is
recomputed. Previously only the first animation creation path set a
keyframe set, so an existing animation never picked up newly inserted
@keyframes rules.
2026-04-22 20:59:00 +02:00

32 lines
924 B
HTML

<!DOCTYPE html>
<script src="../include.js"></script>
<style>
@keyframes fade {
from { opacity: 0.5; }
to { opacity: 0.5; }
}
</style>
<div id="host"><span id="slotted" class="item">slotted</span></div>
<script>
test(() => {
const slotted = document.getElementById("slotted");
const shadowRoot = document.getElementById("host").attachShadow({ mode: "open" });
shadowRoot.innerHTML = `
<style>
::slotted(.item) {
animation-name: fade;
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes fade {
from { opacity: 0.25; }
to { opacity: 0.25; }
}
</style>
<slot></slot>
`;
println(`opacity: ${getComputedStyle(slotted).opacity}`);
});
</script>