From 3ca827d27a9e569be8ddf4775129948276991deb Mon Sep 17 00:00:00 2001
From: Matthew Olsson <matthewcolsson@gmail.com>
Date: Sat, 2 Mar 2024 09:41:25 -0700
Subject: [PATCH] LibWeb: Add a test for changing animation-name

---
 .../css/changing-animation-name-crash.txt     |  2 ++
 .../css/changing-animation-name-crash.html    | 20 +++++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 Tests/LibWeb/Text/expected/css/changing-animation-name-crash.txt
 create mode 100644 Tests/LibWeb/Text/input/css/changing-animation-name-crash.html

diff --git a/Tests/LibWeb/Text/expected/css/changing-animation-name-crash.txt b/Tests/LibWeb/Text/expected/css/changing-animation-name-crash.txt
new file mode 100644
index 0000000000..083cdbd06f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/css/changing-animation-name-crash.txt
@@ -0,0 +1,2 @@
+   before: rule1
+after: rule2
diff --git a/Tests/LibWeb/Text/input/css/changing-animation-name-crash.html b/Tests/LibWeb/Text/input/css/changing-animation-name-crash.html
new file mode 100644
index 0000000000..6b7a5b504d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/css/changing-animation-name-crash.html
@@ -0,0 +1,20 @@
+<style>
+    #foo {
+        animation-name: rule1;
+    }
+    @keyframes rule1 { }
+    @keyframes rule2 { }
+</style>
+<div id="foo"></div>
+<script src="../include.js"></script>
+<script>
+    asyncTest(done => {
+        const foo = document.getElementById("foo");
+        println(`before: ${getComputedStyle(foo).getPropertyValue("animation-name")}`);
+        foo.style.setProperty("animation-name", "rule2");
+        requestAnimationFrame(() => {
+            println(`after: ${getComputedStyle(foo).getPropertyValue("animation-name")}`);
+            done();
+        });
+    });
+</script>