HTML: tests for UA styles of `text-transform`
For https://github.com/whatwg/html/pull/4672.
diff --git a/html/rendering/non-replaced-elements/form-controls/resets.html b/html/rendering/non-replaced-elements/form-controls/resets.html
new file mode 100644
index 0000000..ae4da45
--- /dev/null
+++ b/html/rendering/non-replaced-elements/form-controls/resets.html
@@ -0,0 +1,130 @@
+<!doctype html>
+<title>default style resets</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+/* Have some non-initial values on the parent so we can tell the difference whether the UA stylesheet uses 'initial' keyword. */
+#tests, #refs {
+ letter-spacing: 5px;
+ word-spacing: 5px;
+ line-height: 5px;
+ text-transform: uppercase;
+ text-indent: 5px;
+ text-shadow: 0 0 5px transparent;
+ text-align: right;
+}
+</style>
+<style>
+/* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */
+@namespace url(urn:not-html);
+
+input, select, button, textarea {
+ letter-spacing: initial;
+ word-spacing: initial;
+ line-height: initial;
+ text-transform: initial;
+ text-indent: initial;
+ text-shadow: initial;
+}
+input, select, textarea {
+ text-align: initial;
+}
+input[type=reset i], input[type=button i], input[type=submit i], button {
+ text-align: center;
+}
+marquee {
+ text-align: initial;
+}
+table {
+ text-indent: initial;
+}
+</style>
+
+<div id="tests">
+ <input type="hidden">
+ <input type="text">
+ <input type="search">
+ <input type="tel">
+ <input type="url">
+ <input type="email">
+ <input type="password">
+ <input type="date">
+ <input type="month">
+ <input type="week">
+ <input type="time">
+ <input type="datetime-local">
+ <input type="number">
+ <input type="range">
+ <input type="color">
+ <input type="checkbox">
+ <input type="radio">
+ <input type="file">
+ <input type="submit">
+ <input type="image">
+ <input type="reset">
+ <input type="button">
+ <select><optgroup><option></select>
+ <select multiple></select>
+ <optgroup></optgroup>
+ <option></option>
+ <button></button>
+ <textarea></textarea>
+ <table><tbody><tr><td></table>
+ <marquee></marquee>
+</div>
+
+<div id="refs"></div>
+
+<script>
+ const props = ['letter-spacing',
+ 'word-spacing',
+ 'line-height',
+ 'text-transform',
+ 'text-indent',
+ 'text-shadow',
+ 'text-align'];
+ const refs = document.getElementById('refs');
+ for (const el of document.querySelectorAll('#tests > *')) {
+ const clone = fakeClone(el);
+ refs.append(clone);
+ }
+ const testsContainer = document.getElementById('tests');
+ const testEls = document.querySelectorAll('#tests *');
+ const refEls = document.querySelectorAll('#refs *');
+ for (let i = 0; i < testEls.length; ++i) {
+ const testEl = testEls[i];
+ const refEl = refEls[i];
+ const testStyle = getComputedStyle(testEl);
+ const refStyle = getComputedStyle(refEl);
+ for (const prop of props) {
+ test(() => {
+ assert_equals(testStyle.getPropertyValue(prop), refStyle.getPropertyValue(prop));
+ }, `${testNameContext(testEl)} - ${prop}`);
+ }
+ }
+
+ function fakeClone(el) {
+ const clone = document.createElementNS('urn:not-html', el.localName);
+ for (const att of el.attributes) {
+ clone.setAttributeNS(att.namespaceURI, att.name, att.value);
+ }
+ // deep clone
+ for (const child of el.children) {
+ clone.append(fakeClone(child));
+ }
+ return clone;
+ }
+
+ function testNameContext(el) {
+ const outerHTML = el.outerHTML;
+ const startTags = outerHTML.substring(0, outerHTML.indexOf('</')) || outerHTML;
+
+ let ancestors = [];
+ let current = el.parentNode;
+ while (current != testsContainer) {
+ ancestors.unshift(current.localName);
+ current = current.parentNode;
+ }
+ return startTags + (ancestors.length ? ` (in ${ancestors.join(' > ')})` : '');
+ }
+</script>
diff --git a/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html b/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html
new file mode 100644
index 0000000..5dc26a7
--- /dev/null
+++ b/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+</head>
+<body>
+ <span>THIS TEXT SHOULD BE UPPER-CASE.</span><br />
+
+ <input type="text" value="this text should be lower-case."><br />
+
+ <select>
+ <option>this text should be lower-case.</option>
+ </select><br />
+ <select multiple>
+ <option>this text should be lower-case.</option>
+ </select><br />
+ <select multiple>
+ <optgroup label="this text should be lower-case.">
+ <option>this text should be lower-case.</option>
+ </optgroup>
+ </select><br />
+
+ <select>
+ <option>THIS TEXT SHOULD BE UPPER-CASE.</option>
+ </select><br />
+ <select multiple>
+ <option>THIS TEXT SHOULD BE UPPER-CASE.</option>
+ </select><br />
+ <select multiple>
+ <optgroup label="THIS TEXT SHOULD BE UPPER-CASE.">
+ <option>THIS TEXT SHOULD BE UPPER-CASE.</option>
+ </optgroup>
+ </select><br />
+
+ <button>this text should be lower-case.</button><br />
+
+ <textarea>this text should be lower-case.</textarea><br />
+</body>
+</html>
diff --git a/html/rendering/non-replaced-elements/form-controls/text-transform.html b/html/rendering/non-replaced-elements/form-controls/text-transform.html
new file mode 100644
index 0000000..f57f092
--- /dev/null
+++ b/html/rendering/non-replaced-elements/form-controls/text-transform.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <link rel="match" href="text-transform-ref.html">
+</head>
+<body style="text-transform: uppercase;">
+ <span>this text should be upper-case.</span><br />
+
+ <input type="text" value="this text should be lower-case."><br />
+
+ <select>
+ <option>this text should be lower-case.</option>
+ </select><br />
+ <select multiple>
+ <option>this text should be lower-case.</option>
+ </select><br />
+ <select multiple>
+ <optgroup label="this text should be lower-case.">
+ <option>this text should be lower-case.</option>
+ </optgroup>
+ </select><br />
+
+ <select style="text-transform: uppercase;">
+ <option>this text should be upper-case.</option>
+ </select><br />
+ <select multiple style="text-transform: uppercase;">
+ <option>this text should be upper-case.</option>
+ </select><br />
+ <select multiple style="text-transform: uppercase;">
+ <optgroup label="this text should be upper-case.">
+ <option>this text should be upper-case.</option>
+ </optgroup>
+ </select><br />
+
+ <button>this text should be lower-case.</button><br />
+
+ <textarea>this text should be lower-case.</textarea><br />
+</body>
+</html>
