| <!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> |
