scoped-reference-animation-002.html (1379B)
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 shadow DOM 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 @counter-style lower-roman { system: extends disc; } 10 @counter-style upper-roman { system: extends disc; } 11 </style> 12 13 <div id="host"> 14 </div> 15 16 <script> 17 host.attachShadow({mode: 'open'}).innerHTML = ` 18 <style> 19 /* Overrides predefined and outer tree scope's custom lower-roman counter-style */ 20 @counter-style lower-roman { 21 system: cyclic; 22 symbols: 'X'; 23 } 24 25 /* Overrides predefined and outer tree scope's upper-roman counter-style */ 26 @counter-style upper-roman { 27 system: cyclic; 28 symbols: 'O'; 29 } 30 31 /* Should resolve to the custom counter styles, not the predefined or the outer 32 tree scope's ones */ 33 @keyframes list-style-type-anim { 34 from { list-style-type: lower-roman; } 35 to { list-style-type: upper-roman; } 36 } 37 38 #target1 { 39 animation: list-style-type-anim 2s -0.9s linear paused; 40 } 41 42 #target2 { 43 animation: list-style-type-anim 2s -1s linear paused; 44 } 45 </style> 46 47 <ul id="target1"> 48 <li>List marker should be X 49 </ul> 50 51 <ul id="target2"> 52 <li>List marker should be O 53 </ul> 54 `; 55 </script>