commit 33eedf9201bf104e81e51ac62cd0acc53e899b80
parent 34c0a0d469c8de823bc2303224605971ec0d15c0
Author: Joey Arhar <jarhar@chromium.org>
Date: Thu, 6 Nov 2025 21:38:00 +0000
Bug 1998039 [wpt PR 55838] - Improve inheritance and usage of InBaseAppearance, a=testonly
Automatic update from web-platform-tests
Improve inheritance and usage of InBaseAppearance
This patch fixes multiple bugs with -internal-auto-base() where base
appearance would incorrectly get used and inherited when applied to
elements which its not supposed to be used on, or incorrectly reset back
to auto appearance on descendants.
Fixed: 393500003
Change-Id: I7d062221f651d8fbf362629f13a6e4a9363a82c8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7062764
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Reviewed-by: David Baron <dbaron@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1539682}
--
wpt-commits: 86db881c0f94e7e72cb187e2d3865977423084f6
wpt-pr: 55838
Diffstat:
3 files changed, 85 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/base-appearance-inheritance.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/base-appearance-inheritance.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://issues.chromium.org/issues/393500003">
+<link rel=help href="https://chromium-review.googlesource.com/c/chromium/src/+/7062764/comment/13e22855_e8a342a7/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+.custom, .custom::picker(select) {
+ appearance: base-select;
+}
+</style>
+
+<select class=custom>
+ <option>option</option>
+</select>
+
+<script>
+test(() => {
+ const select = document.querySelector('select');
+ const option = document.querySelector('option');
+ const nestedSelect = document.createElement('select');
+ const nestedSelectOption = document.createElement('option');
+ select.appendChild(nestedSelect);
+ nestedSelect.appendChild(nestedSelectOption);
+
+ assert_equals(getComputedStyle(select).display, 'inline-flex',
+ 'outer select should have base appearance.');
+ assert_equals(getComputedStyle(option).display, 'flex',
+ 'outer option should have base appearance.');
+ assert_equals(getComputedStyle(nestedSelect).display, 'inline-block',
+ 'nested select should have auto appearance.');
+ assert_equals(getComputedStyle(nestedSelectOption).display, 'block',
+ 'nested option should have auto appearance.');
+}, 'base appearance should not propagate to nested elements which support appearance.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-mixing-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-mixing-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.custom, .custom::picker(select) {
+ appearance: base-select;
+}
+</style>
+
+<select multiple>
+ <option>normal</option>
+ <div>
+ <option>
+ <div>div</div>
+ <span>span</span>
+ text
+ </option>
+ </div>
+</select>
+
+<select multiple class=custom>
+ <option>normal</option>
+ <option>base-select</option>
+</select>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-mixing.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-mixing.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://issues.chromium.org/issues/393500003">
+<link rel=help href="https://chromium-review.googlesource.com/c/chromium/src/+/7032708/comment/aa4b509b_fec51624/">
+<link rel=match href="select-appearance-mixing-ref.html">
+
+<style>
+.custom, .custom::picker(select) {
+ appearance: base-select;
+}
+</style>
+
+<select multiple>
+ <option>normal</option>
+ <div style="appearance:base-select">
+ <option style="appearance:base-select">
+ <div>div</div>
+ <span>span</span>
+ text
+ </option>
+ </div>
+</select>
+
+<select multiple class=custom>
+ <option>normal</option>
+ <option style="appearance:base-select">base-select</option>
+</select>
