Add checkmark to base-select options

This is being discussed in OpenUI here: openui/open-ui#863 The discussion suggested that we should use a unicode checkmark instead of an SVG, so that's what this patch does. It might be better to use ::marker instead of ::before, but we might also end up with something else entirely and I think that reusing ::marker would be harder to implement, so I am using ::before for now. Bug: 1511354 Change-Id: I29c1dfc26208e6fc13cf42782a3d9d6fae2e711c
web-platform-tests · Jun 3, 2024 · 05925e7 · 05925e7
1 parent 060cd15
commit 05925e7
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 7 deletions.
diff --git a/html/semantics/forms/the-select-element/stylable-select/option-computed-style.tentative.html b/html/semantics/forms/the-select-element/stylable-select/option-computed-style.tentative.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/openui/open-ui/issues/863#issuecomment-1769004174">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<select style="appearance:base-select">
+  <option>option</option>
+</select>
+
+<script>
+test(() => {
+  assert_equals(
+    getComputedStyle(document.querySelector('option'), '::before').content,
+    `"\u2713" / ""`);
+}, 'appearance:base-select options should have a checkmark with empty alt text.');
+</script>
diff --git a/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css b/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css
@@ -38,6 +38,13 @@
   align-content: center;
 }
 
+.stylable-select-option::before {
+  content: '\2713' / '';
+}
+.stylable-select-option:not(.selected)::before {
+  visibility: hidden;
+}
+
 .stylable-select-button {
   color: FieldText;
   background-color: Field;

diff --git a/...s/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html b/...s/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html
@@ -4,7 +4,7 @@
 <div id=container class=stylable-select-container>
   <button>one</button>
   <div id=popover popover=auto anchor=container class=stylable-select-datalist>
-    <div class=stylable-select-option>one</div>
+    <div class="stylable-select-option selected">one</div>
     <div class=stylable-select-option>two</div>
   </div>
 </div>

diff --git a/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode-ref.html b/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode-ref.html
@@ -14,7 +14,7 @@
     <div class=stylable-select-button-icon></div>
   </button>
   <div id=popover popover=auto anchor=container class=stylable-select-datalist>
-    <div class=stylable-select-option>one</div>
+    <div class="stylable-select-option selected">one</div>
     <div class=stylable-select-option>two</div>
   </div>
 </div>

diff --git a/...forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html b/...forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html
@@ -8,7 +8,7 @@
     <div class=stylable-select-button-icon></div>
   </button>
   <div id=popover popover=auto anchor=container class=stylable-select-datalist>
-    <div class=stylable-select-option>one</div>
+    <div class="stylable-select-option selected">one</div>
     <div class=stylable-select-option>two</div>
   </div>
 </div>

diff --git a/...ms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html b/...ms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html
@@ -14,7 +14,7 @@
     <div class=stylable-select-button-icon></div>
   </button>
   <div id=popover popover=auto anchor=container class=stylable-select-datalist>
-    <div class=stylable-select-option>one</div>
+    <div class="stylable-select-option selected">one</div>
     <div class=stylable-select-option>two</div>
   </div>
 </div>

diff --git a/...ms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html b/...ms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html
@@ -14,7 +14,7 @@
     <div class=stylable-select-button-icon></div>
   </button>
   <div id=popover popover=auto anchor=container class=stylable-select-datalist>
-    <div class=stylable-select-option>one</div>
+    <div class="stylable-select-option selected">one</div>
     <div class=stylable-select-option>two</div>
   </div>
 </div>

diff --git a/...antics/forms/the-select-element/stylable-select/select-child-button-and-datalist-ref.html b/...antics/forms/the-select-element/stylable-select/select-child-button-and-datalist-ref.html
@@ -10,7 +10,7 @@
 <div id=container class=stylable-select-container>
   <button popovertarget=popover id=button>button</button>
   <div id=popover popover=auto anchor=container class=stylable-select-datalist>
-    <div tabindex=0 class=stylable-select-option>
+    <div tabindex=0 class="stylable-select-option selected">
       <span class=blue>option</span> one
     </div>
     <div tabindex=0 class=stylable-select-option>

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
@@ -10,7 +10,7 @@
 <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 tabindex=0 class="stylable-select-option selected">one</div>
     <div class=stylable-select-option>two</div>
   </div>
 </div>