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