Add slot=selected-value support for <selectmenu>

We decided to support this in OpenUI: openui/open-ui#657 (comment) This patch also adds a test for ::part(selected-value) which as far as I can tell was not tested before. Bug: 1121840 Change-Id: I90b18d12249872239bd41e1be460ed46176fd17b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4220472 Auto-Submit: Joey Arhar <[email protected]> Reviewed-by: Xiaocheng Hu <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1102933}
web-platform-tests · Feb 8, 2023 · d7059c0 · d7059c0
1 parent 53ecf5b
commit d7059c0
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 0 deletions.
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-behavior-ref.html b/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-behavior-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<script src="support/fake-selectmenu.js"></script>
+<body>
+<script>
+  const selectmenu = createFakeSelectmenu('hello world');
+  document.body.appendChild(selectmenu);
+  selectmenu.querySelector('.fake-selectmenu-selected-value')
+    .style.color = 'blue';
+</script>
diff --git a/.../semantics/forms/the-selectmenu-element/selectmenu-selected-value-behavior.tentative.html b/.../semantics/forms/the-selectmenu-element/selectmenu-selected-value-behavior.tentative.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=match href="selectmenu-selected-value-behavior-ref.html">
+
+<selectmenu>
+  <div style="color:blue" slot=selected-value behavior=selected-value></div>
+  <option>hello world</option>
+</selectmenu>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-part-ref.html b/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-part-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<script src="support/fake-selectmenu.js"></script>
+<body>
+<script>
+  const selectmenu = createFakeSelectmenu('hello world');
+  document.body.appendChild(selectmenu);
+  selectmenu.querySelector('.fake-selectmenu-selected-value')
+    .style.backgroundColor = 'red';
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-part.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-part.tentative.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=match href="selectmenu-selected-value-part-ref.html">
+
+<style>
+selectmenu::part(selected-value) {
+  background-color: red;
+}
+</style>
+<selectmenu>
+  <option>hello world</option>
+</selectmenu>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-slot-ref.html b/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-slot-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<script src="support/fake-selectmenu.js"></script>
+<body>
+<script>
+  const selectmenu = createFakeSelectmenu('hello world');
+  document.body.appendChild(selectmenu);
+
+  const oldSelectedValue = selectmenu.querySelector('.fake-selectmenu-selected-value');
+  const newSelectedValue = document.createElement('div');
+  newSelectedValue.textContent = 'new selected value';
+
+  const button = selectmenu.querySelector('.fake-selectmenu-internal-selectmenu-button');
+  button.replaceChild(newSelectedValue, oldSelectedValue);
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-slot.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-slot.tentative.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=match href="selectmenu-selected-value-slot-ref.html">
+
+<selectmenu>
+  <div slot=selected-value>new selected value</div>
+  <option>hello world</option>
+</selectmenu>