mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 09:45:06 +02:00
893fe62588
When @keyframes rules are defined in a <style> element inside a shadow root, animations referencing them should work. Currently the animation is created but has no keyframes, producing "none" for animated transform values. A following commit will fix this.
41 lines
1.3 KiB
HTML
41 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<div id="host"></div>
|
|
<script src="../include.js"></script>
|
|
<script>
|
|
test(() => {
|
|
const host = document.getElementById("host");
|
|
const shadow = host.attachShadow({ mode: "open" });
|
|
|
|
const style = document.createElement("style");
|
|
style.textContent = `
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
.loader {
|
|
display: block;
|
|
width: 48px;
|
|
height: 48px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
`;
|
|
shadow.appendChild(style);
|
|
|
|
const loader = document.createElement("span");
|
|
loader.className = "loader";
|
|
shadow.appendChild(loader);
|
|
|
|
// Force style computation.
|
|
const animations = loader.getAnimations();
|
|
println("animations: " + animations.length);
|
|
if (animations.length > 0) {
|
|
const anim = animations[0];
|
|
anim.pause();
|
|
anim.currentTime = 250;
|
|
println("at 0.25: " + getComputedStyle(loader).transform);
|
|
anim.currentTime = 500;
|
|
println("at 0.5: " + getComputedStyle(loader).transform);
|
|
}
|
|
});
|
|
</script>
|