Add invalidation to select:open when datalist popover toggles

This patch makes select:open selectors get updated when the select is toggled open or closed due to popover triggering code. Without this, appearance:base-select <select>s might have styles applies for the closed state when they are open or vice versa. Bug: 40146374 Change-Id: If955675abf45a059f23cd005111152e72e1e5cda Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5545431 Reviewed-by: David Baron <dbaron@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1303858}
web-platform-tests · May 21, 2024 · 089ad58 · 089ad58
1 parent aeced2f
commit 089ad58
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-open-invalidation-ref.html b/html/semantics/forms/the-select-element/stylable-select/select-open-invalidation-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/stylable-select-styles.css">
+
+<style>
+button {
+  color: green;
+}
+</style>
+
+<div id=container class=stylable-select-container>
+  <button>button</button>
+  <div id=popover popover=auto anchor=container class=stylable-select-datalist>
+    <div tabindex=0 class=stylable-select-option>one</div>
+    <div class=stylable-select-option>two</div>
+  </div>
+</div>
+
+<script>
+document.getElementById('popover').showPopover();
+document.querySelector('.stylable-select-option').focus();
+</script>
diff --git a/...emantics/forms/the-select-element/stylable-select/select-open-invalidation.tentative.html b/...emantics/forms/the-select-element/stylable-select/select-open-invalidation.tentative.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/issues/9799">
+<link rel=match href="select-open-invalidation-ref.html">
+
+<style>
+select > button {
+  color: red;
+}
+select:open > button {
+  color: green;
+}
+</style>
+
+<select style="appearance:base-select">
+  <button type=popover>button</button>
+  <datalist>
+    <option>one</option>
+    <option>two</option>
+  </datalist>
+</select>
+
+<script>
+(async () => {
+  await new Promise(requestAnimationFrame);
+  try {
+    document.querySelector('datalist').showPopover();
+  } catch (error) {}
+  await new Promise(requestAnimationFrame);
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>