1 files changed, 42 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scoping/scoped-reference-animation-001.html b/testing/web-platform/tests/css/css-scoping/scoped-reference-animation-001.html
new file mode 100644
index 0000000000..891bda52a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scoping/scoped-reference-animation-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>Tests animation with tree-scoped names and references</title>
+<meta name="assert" content="Custom counter style references should work in keyframes">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="scoped-reference-animation-ref.html">
+
+<style>
+/* Overrides predefined lower-roman counter-style */
+@counter-style lower-roman {
+  system: cyclic;
+  symbols: 'X';
+}
+
+/* Overrides predefined upper-roman counter-style */
+@counter-style upper-roman {
+  system: cyclic;
+  symbols: 'O';
+}
+
+/* Should resolve to the custom counter styles, not the predefined ones */
+@keyframes list-style-type-anim {
+  from { list-style-type: lower-roman; }
+  to { list-style-type: upper-roman; }
+}
+
+#target1 {
+  animation: list-style-type-anim 2s -0.9s linear paused;
+}
+
+#target2 {
+  animation: list-style-type-anim 2s -1s linear paused;
+}
+</style>
+
+<ul id="target1">
+  <li>List marker should be X
+</ul>
+
+<ul id="target2">
+  <li>List marker should be O
+</ul>