mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-25 17:25:08 +02:00
11c75a2ffb
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.
33 lines
836 B
HTML
33 lines
836 B
HTML
<!DOCTYPE html>
|
|
<script src="../include.js"></script>
|
|
<style>
|
|
@keyframes fade {
|
|
from { opacity: 0.5; }
|
|
to { opacity: 0.5; }
|
|
}
|
|
</style>
|
|
<div id="host">host</div>
|
|
<script>
|
|
test(() => {
|
|
const host = document.getElementById("host");
|
|
const shadowRoot = host.attachShadow({ mode: "open" });
|
|
shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
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(host).opacity}`);
|
|
});
|
|
</script>
|