mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-28 02:27:19 +02:00
e4800b2498
The @keyframes parser was storing the keyframes name via Token::to_string(), which keeps a string token in its quoted, serialized form. That meant @keyframes "foo" was stored as "\"foo\"" while animation-name: "foo" resolved to "foo", and the two never matched. Store the unquoted string or identifier value so the @keyframes name and the animation-name reference compare on the same string.
24 lines
772 B
HTML
24 lines
772 B
HTML
<!DOCTYPE html>
|
|
<script src="../include.js"></script>
|
|
<style id="test-style">
|
|
#target {
|
|
animation-name: "123fade";
|
|
animation-duration: 1s;
|
|
animation-fill-mode: both;
|
|
}
|
|
</style>
|
|
<div id="target">target</div>
|
|
<script>
|
|
asyncTest(async done => {
|
|
const target = document.getElementById("target");
|
|
const styleSheet = document.getElementById("test-style").sheet;
|
|
|
|
println(`opacity before keyframes: ${getComputedStyle(target).opacity}`);
|
|
styleSheet.insertRule('@keyframes "123fade" { from { opacity: 0.25; } to { opacity: 0.25; } }', styleSheet.cssRules.length);
|
|
await animationFrame();
|
|
println(`opacity after keyframes: ${getComputedStyle(target).opacity}`);
|
|
|
|
done();
|
|
});
|
|
</script>
|