backdrop-animate.html (1076B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: ::backdrop & web animations</title> 4 <link rel="help" href="https://fullscreen.spec.whatwg.org/#::backdrop-pseudo-element"> 5 <link rel="help" href="https://drafts.csswg.org/web-animations-1/"> 6 <meta name="assert" content="This test checks that ::backdrop can be animated with Web Animations." /> 7 <div id="log"></div> 8 <dialog id="target">Dialog contents</dialog> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script> 12 const target = document.getElementById("target"); 13 target.showModal(); 14 15 test(function() { 16 const options = { 17 pseudoElement: "::backdrop", 18 duration: 2, 19 delay: -1, 20 }; 21 const cs = getComputedStyle(target, "::backdrop"); 22 const anim = target.animate([ 23 {backgroundColor: "rgb(0, 100, 200)"}, 24 {backgroundColor: "rgb(200, 0, 100)"}, 25 ], options); 26 this.add_cleanup(() => anim.cancel()); 27 assert_equals(cs.backgroundColor, "rgb(100, 50, 150)", "background-color"); 28 }, "'backgroundColor' animation"); 29 </script>