1 files changed, 51 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-content/content-animation.html b/testing/web-platform/tests/css/css-content/content-animation.html
new file mode 100644
index 0000000000..396af94e49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-content/content-animation.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>content animation</title>
+<link rel="help" href="https://drafts.csswg.org/css-content/#content-property">
+<meta name="test" content="box-shadow supports animation">
+<link rel="author" href="mailto:graouts@apple.com" title="Antoine Quint">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+
+.target::after {
+  content: "default";
+}
+
+@keyframes content-animation {
+  from { content: "from" }
+  to   { content: "to" }
+}
+
+.target.animated::after {
+  animation: content-animation 1s paused linear forwards;
+}
+
+</style>
+<body>
+<div class="target"></div>
+<script>
+
+test(function() {
+  const target = document.querySelector(".target");
+  const style = getComputedStyle(target, "::after");
+
+  assert_equals(style.content, '"default"', "Before the animation is applied.");
+
+  target.classList.add("animated");
+  const animation = target.getAnimations({ subtree: true })[0];
+
+  const testContentAtTime = (time, expected) => {
+    animation.currentTime = time;
+    assert_equals(style.content, `"${expected}"`, `Check the animated value at time = ${time}ms`);
+  };
+
+  testContentAtTime(0, 'from');
+  testContentAtTime(499, 'from');
+  testContentAtTime(500, 'to');
+  testContentAtTime(999, 'to');
+  testContentAtTime(1000, 'to');
+}, "The content property can be animated with a discrete animation type.");
+
+</script>
+</body>