css/css-pseudo/input-element-pseudo-open.optional.html

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