scoped-reference-animation-001.html (1068B)
1 <!DOCTYPE html> 2 <title>Tests animation with tree-scoped names and references</title> 3 <meta name="assert" content="Custom counter style references should work in keyframes"> 4 <link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names"> 5 <link rel="author" href="mailto:xiaochengh@chromium.org"> 6 <link rel="match" href="scoped-reference-animation-ref.html"> 7 8 <style> 9 /* Overrides predefined lower-roman counter-style */ 10 @counter-style lower-roman { 11 system: cyclic; 12 symbols: 'X'; 13 } 14 15 /* Overrides predefined upper-roman counter-style */ 16 @counter-style upper-roman { 17 system: cyclic; 18 symbols: 'O'; 19 } 20 21 /* Should resolve to the custom counter styles, not the predefined ones */ 22 @keyframes list-style-type-anim { 23 from { list-style-type: lower-roman; } 24 to { list-style-type: upper-roman; } 25 } 26 27 #target1 { 28 animation: list-style-type-anim 2s -0.9s linear paused; 29 } 30 31 #target2 { 32 animation: list-style-type-anim 2s -1s linear paused; 33 } 34 </style> 35 36 <ul id="target1"> 37 <li>List marker should be X 38 </ul> 39 40 <ul id="target2"> 41 <li>List marker should be O 42 </ul>