Change base-select icon from background-image to svg elements (#46152)

Putting the svg in a data url for background-image was not as customizable in CSS for developers, but using an actual svg element is: openui/open-ui#881 Bug: 40146374 Fixed: 337904202 Change-Id: If1528b3df97e31de5b86b27a6aa935223ff0f0a4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5522663 Reviewed-by: David Baron <dbaron@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1300224} Co-authored-by: Joey Arhar <jarhar@chromium.org>
web-platform-tests · May 13, 2024 · bc5292b · bc5292b
1 parent fd41fbc
commit bc5292b
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 4 deletions.
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
@@ -51,10 +51,6 @@
 }
 
 .stylable-select-button-icon {
-  background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4%206%20L10%2012%20L%2016%206%22%20stroke%3D%22WindowText%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
-  background-origin: content-box;
-  background-repeat: no-repeat;
-  background-size: contain;
   opacity: 1;
   outline: none;
   margin-inline-start: 0.25em;
@@ -65,6 +61,11 @@
   min-inline-size: 1.2em;
   max-inline-size: 1.2em;
   display: block;
+
+  color: light-dark(black, white);
+  stroke: currentColor;
+  stroke-width: 3;
+  stroke-linejoin: round;
 }
 
 .stylable-select-selectedoption {

diff --git a/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js b/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js
@@ -0,0 +1,8 @@
+function populateFallbackButtonIcon() {
+  document.querySelectorAll('.stylable-select-button-icon').forEach(element => {
+    element.innerHTML =
+      `<svg viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4 6 L10 12 L 16 6"></path>
+      </svg>`;
+  });
+}
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
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/stylable-select-styles.css">
+<script src="resources/stylable-select-utils.js"></script>
+
+<style>
+:root {
+  color-scheme: dark;
+}
+</style>
+
+<div id=container class=stylable-select-container>
+  <button class=stylable-select-button popovertarget=popover id=button>
+    <span class=stylable-select-selectedoption>one</span>
+    <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>two</div>
+  </div>
+</div>
+
+<script>
+populateFallbackButtonIcon();
+document.getElementById('popover').showPopover();
+</script>
diff --git a/...ntics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html b/...ntics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html
@@ -0,0 +1,26 @@
+<!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-appearance-dark-mode-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+:root {
+  color-scheme: dark;
+}
+</style>
+
+<select style="appearance:base-select">
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<script>
+(async () => {
+  await test_driver.bless();
+  document.querySelector('select').showPicker();
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
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
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <link rel=stylesheet href="resources/stylable-select-styles.css">
+<script src="resources/stylable-select-utils.js"></script>
 
 <div id=container class=stylable-select-container>
   <button class=stylable-select-button popovertarget=popover id=button>
@@ -13,5 +14,6 @@
 </div>
 
 <script>
+populateFallbackButtonIcon();
 document.getElementById('popover').showPopover();
 </script>
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
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <link rel=stylesheet href="resources/stylable-select-styles.css">
+<script src="resources/stylable-select-utils.js"></script>
 
 <style>
 html {
@@ -19,5 +20,6 @@
 </div>
 
 <script>
+populateFallbackButtonIcon();
 document.getElementById('popover').showPopover();
 </script>
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
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <link rel=stylesheet href="resources/stylable-select-styles.css">
+<script src="resources/stylable-select-utils.js"></script>
 
 <style>
 html {
@@ -19,5 +20,6 @@
 </div>
 
 <script>
+populateFallbackButtonIcon();
 document.getElementById('popover').showPopover();
 </script>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html b/html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/stylable-select-styles.css">
+<script src="resources/stylable-select-utils.js"></script>
+
+<style>
+.stylable-select-button-icon svg {
+  stroke: red !important;
+}
+</style>
+
+<div class=stylable-select-container>
+  <button class=stylable-select-button popovertarget=popover id=button>
+    <span class=stylable-select-selectedoption>option</span>
+    <div class=stylable-select-button-icon></div>
+  </button>
+</div>
+
+<script>
+populateFallbackButtonIcon();
+</script>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-icon-color.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-icon-color.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/881">
+<link rel=match href="select-icon-color-ref.html">
+
+<style>
+select {
+  appearance: base-select;
+}
+select::select-fallback-button-icon {
+  stroke: red;
+}
+</style>
+
+<select>
+  <option>option</option>
+</select>