updating-animation-on-marker-pseudo-element.html (888B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <style> 4 @keyframes anim { 5 from { margin-left: 10em; } 6 to { margin-left: 10em; } 7 } 8 #target::marker { 9 content: 'marker'; 10 } 11 #target.anim::marker { 12 animation: anim 100s infinite; 13 font-size: 10px; 14 } 15 #target.bigger-font::marker { 16 font-size: 20px; 17 } 18 #target { 19 display: list-item; 20 margin-left: 200px; 21 } 22 </style> 23 <div id="target"></div> 24 <script> 25 addEventListener('DOMContentLoaded', () => { 26 var target = document.getElementById('target'); 27 28 // Start an animation on pseudo element. 29 target.classList.add('anim'); 30 31 requestAnimationFrame(() => { 32 // The animation on pseudo element should be updated 33 // when the target element classes are modified. 34 target.classList.add('bigger-font'); 35 36 requestAnimationFrame(() => { 37 document.documentElement.classList.remove('reftest-wait'); 38 }); 39 }); 40 }); 41 </script> 42 </html>