select-option-hover-styles.tentative.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/stylable-select/select-option-hover-styles.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<link rel=author href="mailto:jarhar@chromium.org">

<link rel=help href="https://github.com/whatwg/html/issues/9799">

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

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

<style>

#selecteditem {

  color: SelectedItemText;

  background-color: SelectedItem;

</style>

<div id=selecteditem>SelectedItem test colors</div>

<select style="appearance:base-select">

  <option class=one>one</option>

  <option class=two>two</option>

  <option class=three disabled>disabled</option>

</select>

<script>

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

const optionOne = document.querySelector('.one');

const optionTwo = document.querySelector('.two');

const disabledOption = document.querySelector('.three');

promise_test(async () => {

  await new Promise(requestAnimationFrame);

  const selectedItemTestElement = document.getElementById('selecteditem');

  const selectedItemTextColor = getComputedStyle(selectedItemTestElement).color;

  const selectedItemColor = getComputedStyle(selectedItemTestElement).backgroundColor;

  await test_driver.bless();

  select.showPicker();

  assert_true(select.matches(':open'),

    'dropdown should open after calling showPicker().');

  await (new test_driver.Actions()

    .pointerMove(1, 1, {origin: optionOne}))

    .send();

  await new Promise(requestAnimationFrame);

  assert_equals(getComputedStyle(optionOne).color, selectedItemTextColor,

    'The hovered option should have color:SelectedItemText.');

  assert_equals(getComputedStyle(optionOne).backgroundColor, selectedItemColor,

    'The hovered option should have background-color:SelectedItem.');

  // SelectedItemTextColor might be the same as the default text color, so

  // don't test that optionTwo's color isn't selectedItemTextColor.

  assert_not_equals(getComputedStyle(optionTwo).backgroundColor, selectedItemColor,

    'The not hovered option should not have background-color:SelectedItem.');

  const disabledColor = getComputedStyle(disabledOption).color;

  const disabledBackgroundColor = getComputedStyle(disabledOption).backgroundColor;

  await (new test_driver.Actions()

    .pointerMove(1, 1, disabledOption))

    .send();

  await new Promise(requestAnimationFrame);

  assert_equals(getComputedStyle(disabledOption).color, disabledColor,

    'Disabled options should not change color when hovered.');

  assert_equals(getComputedStyle(disabledOption).backgroundColor, disabledBackgroundColor,

    'Disabled options should not change background-color when hovered.');

}, 'Hover styles should be present for appearance:base-select options.');

</script>