Fix invalidation bug for <select> caret style

Previously, setting the color (or likely other styles?) for a <select> after it was initially rendered would not result in an updated rendering of the caret. Fixed: 1269840 Change-Id: Iee971dea8beda969d1e40cbd2886ce05bd330f17 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3292448 Commit-Queue: Mason Freed <masonf@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Auto-Submit: Mason Freed <masonf@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#944372}
web-platform-tests · Nov 23, 2021 · 5797f82 · 5797f82
1 parent 166dd2c
commit 5797f82
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/html/rendering/widgets/the-select-element/select-invalidation-ref.html b/html/rendering/widgets/the-select-element/select-invalidation-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Select rendering invalidation</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+<style>
+  select {
+    color: lime;
+  }
+</style>
+
+<select id=select>
+  <option>The down arrow should be green</option>
+  <option>value B</option>
+</select>
diff --git a/html/rendering/widgets/the-select-element/select-invalidation.html b/html/rendering/widgets/the-select-element/select-invalidation.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Select rendering invalidation</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help"  href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element">
+<link rel="match"  href="select-invalidation-ref.html">
+
+<style>
+  select {
+    color: red;
+  }
+</style>
+
+<select id=select>
+  <option>The down arrow should be green</option>
+  <option>value B</option>
+</select>
+
+<script>
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      select.style.color = "lime";
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          document.documentElement.classList.remove("reftest-wait");
+        });
+      });
+    });
+  });
+</script>