| <!DOCTYPE html> |
| <link rel=help href="https://drafts.csswg.org/css-pseudo-4/#open-pseudo"> |
| <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> |
| |
| <!-- Like input-element-pseudo-open.optional.html but uses clicking to open |
| pickers rather than showPicker(). --> |
| |
| <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.click(input); |
| 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}>`); |
| }); |
| |
| promise_test(async () => { |
| const input = document.querySelector('input[list]'); |
| await test_driver.click(input); |
| 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> |
