input-element-pseudo-open.optional.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 7 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-pseudo/input-element-pseudo-open.optional.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

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

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

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

<!-- This test is marked as optional because the specification does not mandate

     which particular elements support pickers or not. Picker support for elements

     varies across browsers and platforms. -->

<button>reset</button>

<div class=supported>

  <input type=date>

  <input type=datetime-local>

  <input type=week>

  <input type=month>

  <input type=time>

  <input type=color>

</div>

<input type=text list=datalist>

<datalist id=datalist>

  <option>one</option>

  <option>two</option>

</datalist>

<script>

document.querySelectorAll('.supported > input').forEach(input => {

  const inputType = input.getAttribute('type');

  promise_test(async () => {

    assert_false(input.matches(':open'),

      'Should not match :open at the start of the test.');

    await test_driver.bless();

    input.showPicker();

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

      'Should match :open after opening the picker.');

    await test_driver.click(document.querySelector('button'));

    assert_false(input.matches(':open'),

      'Should not match :open after closing the picker.');

  }, `CSS :open for <input type=${inputType}>`);

});

// TODO(crbug.com/383306186): Support :open for <input type=text list=datalist>

promise_test(async () => {

  const input = document.querySelector('input[list]');

  assert_false(input.matches(':open'),

    'Should not match :open at the start of the test.');

  await test_driver.bless();

  input.showPicker();

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

    'Should match :open after opening the list.');

  await test_driver.click(document.querySelector('button'));

  assert_false(input.matches(':open'),

    'Should not match :open after closing the list.');

}, 'CSS :open for <input type=text list=datalist>');

</script>