commit 61afd8ba0fabd3e66f98e7083bb62e634481d312
parent 8e1c99557f08dcc37c0371ba9aaf112a1b8e76a9
Author: Joey Arhar <jarhar@chromium.org>
Date: Fri, 7 Nov 2025 09:02:25 +0000
Bug 1998597 [wpt PR 55897] - Implement base appearance UA styles for <input type=text>, a=testonly
Automatic update from web-platform-tests
Implement base appearance UA styles for <input type=text>
Some of these base appearance styles are not explicitly specified in
css-forms-1, but based on resolutions we got for customizable select I
think that these are correct.
Bug: 453705243, 450139531
Change-Id: I0a3745f1871fbc4b88cd16b77b87dee9a894de28
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7064531
Reviewed-by: Luke <lwarlow@igalia.com>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: David Baron <dbaron@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1540967}
--
wpt-commits: 0ac7092f4a12d31adb553a9f41df7dcda86458a5
wpt-pr: 55897
Diffstat:
3 files changed, 131 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-forms/input-text-base-appearance-computed-style.html b/testing/web-platform/tests/css/css-forms/input-text-base-appearance-computed-style.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://drafts.csswg.org/css-forms-1">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/10857">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/11486">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+input {
+ appearance: base;
+}
+#parent {
+ text-transform: uppercase;
+ text-align: end;
+ text-indent: 5em;
+}
+</style>
+
+<div id=parent>
+ <input value=value>
+ <div id=sibling>sibling</div>
+</div>
+<div id=initial></div>
+
+<script>
+const input = document.querySelector('input');
+const parent = document.getElementById('parent');
+const sibling = document.getElementById('sibling');
+const intial = document.getElementById('initial');
+
+// All of the elements should inherit these properties.
+const expectedInheritedProperties = {
+ 'font-size': '24px',
+ 'font-family': 'monospace',
+ 'font-stretch': '150%',
+ 'font-style': 'italic',
+ 'font-variant': 'small-caps',
+ 'font-weight': '500',
+ 'line-height': '13px',
+ 'text-shadow': 'rgb(1, 1, 1) 1px 1px 1px',
+ 'text-rendering': 'optimizelegibility',
+ 'letter-spacing': '1px',
+ 'word-spacing': '2px',
+ 'color': 'rgb(255, 0, 0)',
+};
+for (const [property, value] of Object.entries(expectedInheritedProperties)) {
+ parent.style[property] = value;
+}
+
+function testProperties(style, expectedProperties) {
+ const parentStyle = getComputedStyle(parent);
+ const initialStyle = getComputedStyle(initial);
+
+ for (let [property, value] of Object.entries(expectedProperties)) {
+ if (value == 'initial') {
+ value = initialStyle[property];
+ } else if (value.endsWith('em')) {
+ // Properties with em units get serialized into px. In order to calculate
+ // the expected value of an em unit, we can set another element to the
+ // expected amount of ems and then serialize that one.
+ sibling.style[property] = value;
+ value = getComputedStyle(sibling)[property];
+ }
+ assert_equals(style[property], value, property);
+ }
+
+ for (const [property, value] of Object.entries(expectedInheritedProperties)) {
+ // Don't test whether a property was inherited if expectedProperties
+ // already has an expected value for it.
+ if (!Object.keys(expectedProperties).includes(property)) {
+ assert_equals(style[property], value, property);
+ }
+ }
+}
+
+test(() => {
+ const expectedProperties = {
+ 'background-color': 'rgba(0, 0, 0, 0)',
+ 'border': '1px solid rgb(255, 0, 0)', /* color is currentColor */
+ 'display': 'inline-block',
+ 'user-select': 'auto',
+ 'padding-block-start': '0px',
+ 'padding-block-end': '0px',
+ 'padding-inline-start': '0px',
+ 'padding-inline-end': '0px',
+ 'border-radius': '0px',
+ 'text-indent': 'initial',
+ 'cursor': 'text',
+ 'white-space': 'initial',
+ 'align-items': 'initial',
+ 'text-transform': 'initial',
+ 'text-align': 'initial'
+ };
+ testProperties(getComputedStyle(input), expectedProperties);
+}, 'UA styles of base appearance <input type=text>.');
+</script>
diff --git a/testing/web-platform/tests/css/css-forms/input-text-base-appearance-rendering-ref.html b/testing/web-platform/tests/css/css-forms/input-text-base-appearance-rendering-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<div>value</div>
+<style>
+body {
+ font-family: monospace;
+ background-color: black;
+ color: green;
+}
+div {
+ width: 150px;
+ border: 1px solid;
+}
+</style>
diff --git a/testing/web-platform/tests/css/css-forms/input-text-base-appearance-rendering.html b/testing/web-platform/tests/css/css-forms/input-text-base-appearance-rendering.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://drafts.csswg.org/css-forms-1">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/10857">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/11486">
+<link rel=match href="input-text-base-appearance-rendering-ref.html">
+
+<input value=value style="appearance:base">
+
+<style>
+body {
+ font-family: monospace;
+ background-color: black;
+ color: green;
+}
+input {
+ /* Without setting the width, we would be relying on intrinsic sizing which
+ * is not specified or interoperable. */
+ width: 150px;
+}
+</style>
