diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/resets.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/resets.html
new file mode 100644
index 000000000000..ae4da4540145
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html
new file mode 100644
index 000000000000..5dc26a78dbb0
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform.html
new file mode 100644
index 000000000000..f57f09298231
--- /dev/null
+++ b/testing/web-platform/tests/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>
