[SelectMenu] Make selectmenu button inherit the font size.
This makes the <selectmenu> button inherit the font size from the
<selectmenu> instead of using the font size specified for <button>
in html.css
BUG=1467135
Change-Id: Ibd80f2b36104643e5e36fa74fae0adbc79ebd829
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4722025
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Commit-Queue: Peter Kotwicz <pkotwicz@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1177974}
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-font-size-ref.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-font-size-ref.tentative.html
new file mode 100644
index 0000000..a01455a
--- /dev/null
+++ b/html/semantics/forms/the-selectmenu-element/selectmenu-font-size-ref.tentative.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<script src="support/fake-selectmenu.js"></script>
+<body>
+<script>
+ const selectmenu = createFakeSelectmenu('option');
+ document.body.appendChild(selectmenu);
+ selectmenu.style.fontSize = "48px";
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-font-size.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-font-size.tentative.html
new file mode 100644
index 0000000..4a4d129
--- /dev/null
+++ b/html/semantics/forms/the-selectmenu-element/selectmenu-font-size.tentative.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<!-- Tests that selectmenu respects explicit size -->
+<link rel=author href="mailto:pkotwicz@chromium.org">
+<link rel="match" href="selectmenu-font-size-ref.tentative.html">
+
+<style>
+selectmenu {
+ font-size:48px;
+}
+</style>
+<selectmenu>
+ <option>option</option>
+</selectmenu>
diff --git a/html/semantics/forms/the-selectmenu-element/support/fake-selectmenu.js b/html/semantics/forms/the-selectmenu-element/support/fake-selectmenu.js
index f6a9923..1de8ad1 100644
--- a/html/semantics/forms/the-selectmenu-element/support/fake-selectmenu.js
+++ b/html/semantics/forms/the-selectmenu-element/support/fake-selectmenu.js
@@ -10,17 +10,18 @@
<div class="fake-selectmenu-internal-selectmenu-button-icon"></div>
<style>
.fake-selectmenu-internal-selectmenu-button {
- display: inline-flex;
align-items: center;
- cursor: default;
appearance: none;
background-color: Field;
- color: ButtonText;
border: 1px solid ButtonBorder;
border-radius: 0.25em;
- padding: 0.25em;
+ color: ButtonText;
+ cursor: default;
+ display: inline-flex;
+ font-size: .875em;
overflow-x:hidden;
overflow-y:hidden;
+ padding: 0.25em;
}
.fake-selectmenu-selected-value {
