select-picker-option-animation-reopens.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:
- /html/semantics/forms/the-select-element/customizable-select/select-picker-option-animation-reopens.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

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

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

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

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

<style>

select, ::picker(select) {

  appearance: base-select;

@keyframes fade-in {

  from { opacity: 0 }

  to { opacity: 1 }

option {

  opacity: 0;

  animation: fade-in 100s forwards;

</style>

<select>

  <option>one</option>

  <option>two</option>

</select>

<script>

const select = document.querySelector('select');

const option = document.querySelector('option');

promise_test(async () => {

  // First open: animation should start.

  await test_driver.click(select);

  const animationsFirstOpen = option.getAnimations();

  assert_equals(animationsFirstOpen.length, 1,

    'Option should have one animation during first open.');

  assert_equals(animationsFirstOpen[0].playState, 'running',

    'Animation should be running during first open.');

  // Close the picker.

  await test_driver.click(select);

  // Second open: animation should restart.

  await test_driver.click(select);

  const animationsSecondOpen = option.getAnimations();

  assert_equals(animationsSecondOpen.length, 1,

    'Option should have one animation during second open (animation restarted).');

  assert_equals(animationsSecondOpen[0].playState, 'running',

    'Animation should be running during second open.');

}, 'CSS animations on option elements restart when the base-select picker reopens.');

</script>