From 962853c682aeec82487bbeb24a5aa38344537651 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 9 Jan 2025 17:47:15 -0800
Subject: [PATCH] Include <img> alt text in <option> labels

Discussion: https://github.com/whatwg/html/issues/10317
Change-Id: Ie6ed230eb75d3ec24c51c76d587a11dde3d44b5a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6137091
Reviewed-by: David Baron <dbaron@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1404536}
---
 .../option-img-alt-text.tentative.html        | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 html/semantics/forms/the-select-element/customizable-select/option-img-alt-text.tentative.html
diff --git a/html/semantics/forms/the-select-element/customizable-select/option-img-alt-text.tentative.html b/html/semantics/forms/the-select-element/customizable-select/option-img-alt-text.tentative.html
new file mode 100644
index 000000000000000..0d47b7fe4826cff
--- /dev/null
+++ b/html/semantics/forms/the-select-element/customizable-select/option-img-alt-text.tentative.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/issues/10317">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<select>
+  <option id=img>
+    text node
+    <img alt="img alt">
+    <img id=withalt alt="  img alt with spaces  ">
+    <img id=noalt>
+  </option>
+  <option id=svg>
+    text node
+    <svg>
+      <title>svg title</title>
+      text node in svg
+    </svg>
+  </option>
+</select>
+
+<script>
+test(() => {
+  const imgChild1 = document.createElement('span');
+  imgChild1.textContent = 'child of img element';
+  document.getElementById('withalt').appendChild(imgChild1);
+
+  const imgChild2 = document.createElement('span');
+  imgChild2.textContent = 'child of img element';
+  document.getElementById('noalt').appendChild(imgChild2);
+
+  const imgOption = document.getElementById('img');
+  const imgTextWithAlt = 'text node img alt img alt with spaces';
+  const imgTextWithoutAlt = 'text node child of img element child of img element';
+  assert_equals(imgOption.text, imgTextWithAlt,
+    'option.text should include <img> alt text.');
+  assert_equals(imgOption.label, imgTextWithAlt,
+    'option.label should include <img> alt text.');
+  assert_equals(imgOption.value, imgTextWithoutAlt,
+    'option.value should not include <img> alt text.');
+}, 'option.label and option.text should include alt text of <img> elements.');
+
+test(() => {
+  const svgOption = document.getElementById('svg');
+  const svgText = 'text node svg title text node in svg';
+  assert_equals(svgOption.text, svgText,
+    'option.text should include all <svg> text nodes.');
+  assert_equals(svgOption.label, svgText,
+    'option.label should include all <svg> text nodes.');
+  assert_equals(svgOption.value, svgText,
+    'option.value should include all <svg> text nodes.');
+}, 'option.label and option.text should not have special logic for <svg> elements.');
+</script>
