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 11, 2024 · 3eb8539 · 3eb8539
1 parent 2e49022
commit 3eb8539
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 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:[email protected]">
+<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/...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>