diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-scoping/scoped-reference-animation-001.html')
-rw-r--r-- | testing/web-platform/tests/css/css-scoping/scoped-reference-animation-001.html | 42 |
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> |