Bug 1900494 [wpt PR 46609] - Add checkmark to base-select options, a=…

…testonly Automatic update from web-platform-tests 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 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5578818 Reviewed-by: David Baron <dbaron@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1313329} -- wpt-commits: 56ec66da8735eb2ccbd9be689917b2b1aad6faed wpt-pr: 46609
mozilla · Jun 14, 2024 · 268c90d · 268c90d
1 parent 7cb15ee
commit 268c90d
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/...l/semantics/forms/the-select-element/stylable-select/option-computed-style.tentative.html b/...l/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/...l/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css b/...l/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>