| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Pseudo-Elements Test: ::backdrop & web animations</title> |
| <link rel="help" href="https://fullscreen.spec.whatwg.org/#::backdrop-pseudo-element"> |
| <link rel="help" href="https://drafts.csswg.org/web-animations-1/"> |
| <meta name="assert" content="This test checks that ::backdrop can be animated with Web Animations." /> |
| <div id="log"></div> |
| <dialog id="target">Dialog contents</dialog> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script> |
| const target = document.getElementById("target"); |
| target.showModal(); |
| |
| test(function() { |
| const options = { |
| pseudoElement: "::backdrop", |
| duration: 2, |
| delay: -1, |
| }; |
| const cs = getComputedStyle(target, "::backdrop"); |
| const anim = target.animate([ |
| {backgroundColor: "rgb(0, 100, 200)"}, |
| {backgroundColor: "rgb(200, 0, 100)"}, |
| ], options); |
| this.add_cleanup(() => anim.cancel()); |
| assert_equals(cs.backgroundColor, "rgb(100, 50, 150)", "background-color"); |
| }, "'backgroundColor' animation"); |
| </script> |
