backdrop-animate.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-pseudo/backdrop-animate.html - WPT Dashboard Interop Dashboard

<!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>