Add option:hover styles to appearance:base-select

These styles were implemented for <selectlist> and I think they should be included for appearance:base-select as well. Bug: 1511354 Change-Id: I22b23cd7102cb197ba37b3d150071306ef9d8b9e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5493158 Reviewed-by: David Baron <dbaron@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1297145}
web-platform-tests · May 7, 2024 · d3214b5 · d3214b5
1 parent 2ee22c6
commit d3214b5
Showing 1 changed file with 68 additions and 0 deletions.
diff --git a/...antics/forms/the-select-element/stylable-select/select-option-hover-styles.tentative.html b/...antics/forms/the-select-element/stylable-select/select-option-hover-styles.tentative.html
@@ -0,0 +1,68 @@
+<!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>