marker-animate.html (1893B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: Reverted styles for ::marker</title> 4 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> 5 <link rel="help" href="https://drafts.csswg.org/web-animations-1/"> 6 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 7 <meta name="assert" content="This test checks that ::marker can be animated with Web Animations, but only the supported properties." /> 8 <div id="log"></div> 9 <ul> 10 <li id="target">list item</li> 11 </ul> 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <script> 15 const target = document.getElementById("target"); 16 const cs = getComputedStyle(target, "::marker"); 17 const options = { 18 pseudoElement: "::marker", 19 duration: 2, 20 delay: -1, 21 }; 22 23 // 'color' applies to ::marker so it should be animatable 24 test(function() { 25 const anim = target.animate([ 26 {color: "rgb(0, 100, 200)"}, 27 {color: "rgb(200, 0, 100)"}, 28 ], options); 29 this.add_cleanup(() => anim.cancel()); 30 assert_equals(cs.color, "rgb(100, 50, 150)", "color"); 31 }, "'color' animation"); 32 33 // 'opacity' doesn't apply to ::marker so it shouldn't be animatable 34 test(function() { 35 const anim = target.animate([ 36 {opacity: .2}, 37 {opacity: .8}, 38 ], options); 39 this.add_cleanup(() => anim.cancel()); 40 assert_equals(cs.opacity, "1", "opacity"); 41 }, "'opacity' animation"); 42 43 // When both 'color' and 'opacity' are specified, only the former should be animated. 44 test(function() { 45 const anim = target.animate([ 46 { 47 color: "rgb(0, 100, 200)", 48 opacity: .2, 49 }, 50 { 51 color: "rgb(200, 0, 100)", 52 opacity: .8, 53 }, 54 ], options); 55 this.add_cleanup(() => anim.cancel()); 56 assert_equals(cs.color, "rgb(100, 50, 150)", "color"); 57 assert_equals(cs.opacity, "1", "opacity"); 58 }, "'color' + 'opacity' animation"); 59 </script>