1 files changed, 38 insertions, 0 deletions
diff --git a/layout/reftests/css-animations/updating-animation-on-pseudo-element.html b/layout/reftests/css-animations/updating-animation-on-pseudo-element.html
new file mode 100644
index 0000000000..cae7d2723c
--- /dev/null
+++ b/layout/reftests/css-animations/updating-animation-on-pseudo-element.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+@keyframes anim {
+  from { margin-left: 10em; }
+  to { margin-left: 10em; }
+}
+#target::before {
+  content: 'before';
+}
+#target.anim::before {
+  animation: anim 100s infinite;
+  font-size: 10px;
+}
+#target.bigger-font::before {
+  font-size: 20px;
+}
+</style>
+<div id="target"></div>
+<script>
+addEventListener('DOMContentLoaded', () => {
+  var target = document.getElementById('target');
+
+  // Start an animation on pseudo element.
+  target.classList.add('anim');
+
+  requestAnimationFrame(() => {
+    // The animation on pseudo element should be updated
+    // when the target element classes are modified.
+    target.classList.add('bigger-font');
+
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('reftest-wait');
+    });
+  });
+});
+</script>
+</html>