checkmark-animation-002.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/customizable-select/checkmark-animation-002.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class=reftest-wait>

<meta charset="utf-8">

<title>CSS Test: Web Animations on ::checkmark</title>

<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">

<link rel="help" href="https://drafts.csswg.org/css-forms/#checkmark">

<link rel="match" href="checkmark-animation-002-ref.html">

<meta name="fuzzy" content="maxDifference=0-8; totalPixels=0-5">

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<style>

select, ::picker(select) { appearance: base-select; }

:focus-visible { outline: none; }

</style>

<p id="start">Click me to start test. PASS if you see a green checkmark.</p>

<select id="target">

  <option id="opt" selected>option</option>

</select>

<script>

const target = document.getElementById("target");

const opt = document.getElementById("opt");

start.onclick = (async () => {

  await target.showPicker();

  await new Promise(requestAnimationFrame);

  await new Promise(requestAnimationFrame);

  opt.animate({

    color: ["green", "green"],

  }, {

    pseudoElement: "::checkmark",

    duration: Infinity,

});

  await new Promise(requestAnimationFrame);

  document.documentElement.classList.remove("reftest-wait");

});

window.addEventListener("load", () => {

  test_driver.click(start);

});

</script>