Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
commit: 26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree: f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-ui/compute-kind-widget-generated
parent: Initial commit. (diff)
download: firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
792 files changed, 21384 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-attachment-001.html
new file mode 100644
index 0000000000..065fc6dca6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-clip-001.html
new file mode 100644
index 0000000000..7059583860
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-color-001.html
new file mode 100644
index 0000000000..bcef8dcd98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-image-001.html
new file mode 100644
index 0000000000..c2ff3ad6df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-origin-001.html
new file mode 100644
index 0000000000..3e6a287e3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-position-001.html
new file mode 100644
index 0000000000..8c35eb79fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-size-001.html
new file mode 100644
index 0000000000..a177d5c50b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-color-001.html
new file mode 100644
index 0000000000..bc1220b566
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-style-001.html
new file mode 100644
index 0000000000..326ccec446
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-width-001.html
new file mode 100644
index 0000000000..6d88e2a8e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-color-001.html
new file mode 100644
index 0000000000..30f3867c5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-style-001.html
new file mode 100644
index 0000000000..69f21ffab2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-width-001.html
new file mode 100644
index 0000000000..05b17053be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-color-001.html
new file mode 100644
index 0000000000..d18b6a1173
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..1da373a781
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..cd2ccf665f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-style-001.html
new file mode 100644
index 0000000000..b7aad05558
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-width-001.html
new file mode 100644
index 0000000000..ecdf09ac0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-end-end-radius-001.html
new file mode 100644
index 0000000000..b7a4342845
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-end-start-radius-001.html
new file mode 100644
index 0000000000..3756b2a201
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-outset-001.html
new file mode 100644
index 0000000000..8ad71780de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-repeat-001.html
new file mode 100644
index 0000000000..a212ee7ef3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-slice-001.html
new file mode 100644
index 0000000000..d3f87ebe5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-source-001.html
new file mode 100644
index 0000000000..86ec41a3ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-width-001.html
new file mode 100644
index 0000000000..53df9ea152
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-color-001.html
new file mode 100644
index 0000000000..85079f5c41
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-style-001.html
new file mode 100644
index 0000000000..ce94d07364
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-width-001.html
new file mode 100644
index 0000000000..ea361edbab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-color-001.html
new file mode 100644
index 0000000000..7bbbbf97a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-style-001.html
new file mode 100644
index 0000000000..0ab244c534
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-width-001.html
new file mode 100644
index 0000000000..a2fe2f5a70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-color-001.html
new file mode 100644
index 0000000000..ca8e684b4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-style-001.html
new file mode 100644
index 0000000000..e44cf3a2b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-width-001.html
new file mode 100644
index 0000000000..561c51de03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-color-001.html
new file mode 100644
index 0000000000..1edc31d98d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-style-001.html
new file mode 100644
index 0000000000..79a59df4cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-width-001.html
new file mode 100644
index 0000000000..5125890ff0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-start-end-radius-001.html
new file mode 100644
index 0000000000..39972ab69e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-start-start-radius-001.html
new file mode 100644
index 0000000000..47e454e4ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-color-001.html
new file mode 100644
index 0000000000..6a331379ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-left-radius-001.html
new file mode 100644
index 0000000000..83d5437b2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-right-radius-001.html
new file mode 100644
index 0000000000..ad7801693c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-style-001.html
new file mode 100644
index 0000000000..41b55bdc10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-width-001.html
new file mode 100644
index 0000000000..ec22310531
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <button id="button">button</button>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-attachment-001.html
new file mode 100644
index 0000000000..854146dbed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-clip-001.html
new file mode 100644
index 0000000000..c58d84534d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-color-001.html
new file mode 100644
index 0000000000..e1d5e7379a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-image-001.html
new file mode 100644
index 0000000000..c37517e78f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-origin-001.html
new file mode 100644
index 0000000000..8a7f9502b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-position-001.html
new file mode 100644
index 0000000000..3edc2785ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-size-001.html
new file mode 100644
index 0000000000..94816e45ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-color-001.html
new file mode 100644
index 0000000000..fe6e5c970e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-style-001.html
new file mode 100644
index 0000000000..489c662119
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-width-001.html
new file mode 100644
index 0000000000..f257590b5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-color-001.html
new file mode 100644
index 0000000000..d1b1c63bb2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-style-001.html
new file mode 100644
index 0000000000..6da6d53162
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-width-001.html
new file mode 100644
index 0000000000..c18824f102
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-color-001.html
new file mode 100644
index 0000000000..d8dde9fa77
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..ea8b93a771
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..4778156079
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-style-001.html
new file mode 100644
index 0000000000..f4ccb3ee9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-width-001.html
new file mode 100644
index 0000000000..dcc9e39f33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-end-end-radius-001.html
new file mode 100644
index 0000000000..9f22001410
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-end-start-radius-001.html
new file mode 100644
index 0000000000..453d687a8f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-outset-001.html
new file mode 100644
index 0000000000..1102fce152
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-repeat-001.html
new file mode 100644
index 0000000000..7b821272c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-slice-001.html
new file mode 100644
index 0000000000..d7694d6778
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-source-001.html
new file mode 100644
index 0000000000..0e274628f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-width-001.html
new file mode 100644
index 0000000000..c485feab75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-color-001.html
new file mode 100644
index 0000000000..0220ac227c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-style-001.html
new file mode 100644
index 0000000000..83f0ee6dc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-width-001.html
new file mode 100644
index 0000000000..aca82890ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-color-001.html
new file mode 100644
index 0000000000..7c3ea0e32c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-style-001.html
new file mode 100644
index 0000000000..329b717ca0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-width-001.html
new file mode 100644
index 0000000000..9d5ca5f95a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-color-001.html
new file mode 100644
index 0000000000..00397b9cd3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-style-001.html
new file mode 100644
index 0000000000..415c45d8ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-width-001.html
new file mode 100644
index 0000000000..0653e96092
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-color-001.html
new file mode 100644
index 0000000000..f17035b651
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-style-001.html
new file mode 100644
index 0000000000..fd96b80bfa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-width-001.html
new file mode 100644
index 0000000000..9eb0bfd483
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-start-end-radius-001.html
new file mode 100644
index 0000000000..c6f7b9c70f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-start-start-radius-001.html
new file mode 100644
index 0000000000..c3473dff43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-color-001.html
new file mode 100644
index 0000000000..40671ee01e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-left-radius-001.html
new file mode 100644
index 0000000000..bf8cb7150a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-right-radius-001.html
new file mode 100644
index 0000000000..bbaed9a391
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-style-001.html
new file mode 100644
index 0000000000..bb9b393d5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-width-001.html
new file mode 100644
index 0000000000..3260a9b13d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for checkbox-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="checkbox-input" type="checkbox">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-attachment-001.html
new file mode 100644
index 0000000000..a62ebcba16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-clip-001.html
new file mode 100644
index 0000000000..0da878e3c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-color-001.html
new file mode 100644
index 0000000000..3adca19760
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-image-001.html
new file mode 100644
index 0000000000..79d16f7a5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-origin-001.html
new file mode 100644
index 0000000000..30be831c55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-position-001.html
new file mode 100644
index 0000000000..a72860779a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-size-001.html
new file mode 100644
index 0000000000..68f34df768
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-color-001.html
new file mode 100644
index 0000000000..7ab8c50eda
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-style-001.html
new file mode 100644
index 0000000000..5fef1705dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-width-001.html
new file mode 100644
index 0000000000..de753d9cf5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-color-001.html
new file mode 100644
index 0000000000..639e53697b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-style-001.html
new file mode 100644
index 0000000000..66138c5954
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-width-001.html
new file mode 100644
index 0000000000..7e338d3d27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-color-001.html
new file mode 100644
index 0000000000..33e55cc3b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..70eec00b9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..196edd37f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-style-001.html
new file mode 100644
index 0000000000..483a2008f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-width-001.html
new file mode 100644
index 0000000000..0f6a26e547
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-end-end-radius-001.html
new file mode 100644
index 0000000000..877568e595
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-end-start-radius-001.html
new file mode 100644
index 0000000000..3b553d1664
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-outset-001.html
new file mode 100644
index 0000000000..9aca0eb08c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-repeat-001.html
new file mode 100644
index 0000000000..2195aa4d09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-slice-001.html
new file mode 100644
index 0000000000..b2d5a70710
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-source-001.html
new file mode 100644
index 0000000000..5a4f6f54ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-width-001.html
new file mode 100644
index 0000000000..394163c402
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-color-001.html
new file mode 100644
index 0000000000..c8beca67c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-style-001.html
new file mode 100644
index 0000000000..2cca2308d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-width-001.html
new file mode 100644
index 0000000000..1e78d303b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-color-001.html
new file mode 100644
index 0000000000..dc78893a4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-style-001.html
new file mode 100644
index 0000000000..69fc22e3b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-width-001.html
new file mode 100644
index 0000000000..e726ac45a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-color-001.html
new file mode 100644
index 0000000000..06123f7d3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-style-001.html
new file mode 100644
index 0000000000..8a467f2f02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-width-001.html
new file mode 100644
index 0000000000..1631967fb4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-color-001.html
new file mode 100644
index 0000000000..3f80a29957
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-style-001.html
new file mode 100644
index 0000000000..47b974b4a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-width-001.html
new file mode 100644
index 0000000000..7a640d231d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-start-end-radius-001.html
new file mode 100644
index 0000000000..836685bc1a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-start-start-radius-001.html
new file mode 100644
index 0000000000..1b8d113fbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-color-001.html
new file mode 100644
index 0000000000..3ca939ab72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-left-radius-001.html
new file mode 100644
index 0000000000..6e789f088f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-right-radius-001.html
new file mode 100644
index 0000000000..7f4b9195f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-style-001.html
new file mode 100644
index 0000000000..840f69afcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-width-001.html
new file mode 100644
index 0000000000..886996b710
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for color-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="color-input" type="color">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-attachment-001.html
new file mode 100644
index 0000000000..7b112f084a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-clip-001.html
new file mode 100644
index 0000000000..53f79ab38c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-color-001.html
new file mode 100644
index 0000000000..2209bae6c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-image-001.html
new file mode 100644
index 0000000000..e385afe4af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-origin-001.html
new file mode 100644
index 0000000000..9d3386711f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-position-001.html
new file mode 100644
index 0000000000..6d70a3f546
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-size-001.html
new file mode 100644
index 0000000000..fabd5b383c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-color-001.html
new file mode 100644
index 0000000000..16b07513a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-style-001.html
new file mode 100644
index 0000000000..c5941567e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-width-001.html
new file mode 100644
index 0000000000..c189260b1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-color-001.html
new file mode 100644
index 0000000000..f04c3729b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-style-001.html
new file mode 100644
index 0000000000..41ba3b7c27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-width-001.html
new file mode 100644
index 0000000000..9738cd8528
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-color-001.html
new file mode 100644
index 0000000000..f8d784aeb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..cac8afec0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..3f64f28497
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-style-001.html
new file mode 100644
index 0000000000..1d45f05661
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-width-001.html
new file mode 100644
index 0000000000..04065781f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-end-end-radius-001.html
new file mode 100644
index 0000000000..8ce8dc3962
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-end-start-radius-001.html
new file mode 100644
index 0000000000..8f1acf3c9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-outset-001.html
new file mode 100644
index 0000000000..7bef870794
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-repeat-001.html
new file mode 100644
index 0000000000..fc3ebd45dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-slice-001.html
new file mode 100644
index 0000000000..b6c908f422
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-source-001.html
new file mode 100644
index 0000000000..44a4fbaa8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-width-001.html
new file mode 100644
index 0000000000..39d018507c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-color-001.html
new file mode 100644
index 0000000000..313eab3d7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-style-001.html
new file mode 100644
index 0000000000..ce6cb72d03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-width-001.html
new file mode 100644
index 0000000000..31e4906531
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-color-001.html
new file mode 100644
index 0000000000..60f8eeb08d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-style-001.html
new file mode 100644
index 0000000000..927f0695ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-width-001.html
new file mode 100644
index 0000000000..ebb88b67c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-color-001.html
new file mode 100644
index 0000000000..eaeeddc8bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-style-001.html
new file mode 100644
index 0000000000..171638f609
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-width-001.html
new file mode 100644
index 0000000000..07b4ba5cf3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-color-001.html
new file mode 100644
index 0000000000..ee08a59604
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-style-001.html
new file mode 100644
index 0000000000..622da69d72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-width-001.html
new file mode 100644
index 0000000000..cb0368dd05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-start-end-radius-001.html
new file mode 100644
index 0000000000..ae98634e8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-start-start-radius-001.html
new file mode 100644
index 0000000000..45f7debe9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-color-001.html
new file mode 100644
index 0000000000..985b3d528e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-left-radius-001.html
new file mode 100644
index 0000000000..5b5636609c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-right-radius-001.html
new file mode 100644
index 0000000000..f0b7989c73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-style-001.html
new file mode 100644
index 0000000000..b58218e3da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-width-001.html
new file mode 100644
index 0000000000..e20e258e8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for input-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="button-input" type="button" value="input-button">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-attachment-001.html
new file mode 100644
index 0000000000..a7845bc7dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-clip-001.html
new file mode 100644
index 0000000000..5bb8e7d5d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-color-001.html
new file mode 100644
index 0000000000..1780d56a41
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-image-001.html
new file mode 100644
index 0000000000..07527ae7db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-origin-001.html
new file mode 100644
index 0000000000..4e5b6c68ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-position-001.html
new file mode 100644
index 0000000000..199e6465eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-size-001.html
new file mode 100644
index 0000000000..82d54e0c10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-color-001.html
new file mode 100644
index 0000000000..41038d2512
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-style-001.html
new file mode 100644
index 0000000000..9c326f1e4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-width-001.html
new file mode 100644
index 0000000000..3f2611f0e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-color-001.html
new file mode 100644
index 0000000000..a3252e39e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-style-001.html
new file mode 100644
index 0000000000..6f73781413
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-width-001.html
new file mode 100644
index 0000000000..1a671be321
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-color-001.html
new file mode 100644
index 0000000000..5ac0db7d1e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..df3608a14a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..3cc95934b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-style-001.html
new file mode 100644
index 0000000000..b146476a50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-width-001.html
new file mode 100644
index 0000000000..00dfbddbe6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-end-end-radius-001.html
new file mode 100644
index 0000000000..34eaf07fd7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-end-start-radius-001.html
new file mode 100644
index 0000000000..42aa29cada
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-outset-001.html
new file mode 100644
index 0000000000..368bb3a7c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-repeat-001.html
new file mode 100644
index 0000000000..5f0ba37f9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-slice-001.html
new file mode 100644
index 0000000000..c611ad59b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-source-001.html
new file mode 100644
index 0000000000..f84fcfc0fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-width-001.html
new file mode 100644
index 0000000000..1936517741
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-color-001.html
new file mode 100644
index 0000000000..db6e2d64c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-style-001.html
new file mode 100644
index 0000000000..13502447a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-width-001.html
new file mode 100644
index 0000000000..25121c822a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-color-001.html
new file mode 100644
index 0000000000..f01b339b37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-style-001.html
new file mode 100644
index 0000000000..3ac0e47260
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-width-001.html
new file mode 100644
index 0000000000..7e0c23adc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-color-001.html
new file mode 100644
index 0000000000..6309f000f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-style-001.html
new file mode 100644
index 0000000000..c502e833a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-width-001.html
new file mode 100644
index 0000000000..7c8e95dbea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-color-001.html
new file mode 100644
index 0000000000..2bbbcf3584
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-style-001.html
new file mode 100644
index 0000000000..4b1ea45088
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-width-001.html
new file mode 100644
index 0000000000..02b93b0b7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-start-end-radius-001.html
new file mode 100644
index 0000000000..4beeb88981
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-start-start-radius-001.html
new file mode 100644
index 0000000000..019b6a52e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-color-001.html
new file mode 100644
index 0000000000..6facf31f99
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-left-radius-001.html
new file mode 100644
index 0000000000..2ba3e038dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-right-radius-001.html
new file mode 100644
index 0000000000..d15f23413b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-style-001.html
new file mode 100644
index 0000000000..d5bebef7a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-width-001.html
new file mode 100644
index 0000000000..e705cd422d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for input-reset</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="reset-input" type="reset" value="input-reset">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-attachment-001.html
new file mode 100644
index 0000000000..cd69159ee9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-clip-001.html
new file mode 100644
index 0000000000..1343ebcf0c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-color-001.html
new file mode 100644
index 0000000000..882ca79998
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-image-001.html
new file mode 100644
index 0000000000..769cf45b9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-origin-001.html
new file mode 100644
index 0000000000..035cfdf25c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-position-001.html
new file mode 100644
index 0000000000..5267fd2c78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-size-001.html
new file mode 100644
index 0000000000..73aca9954a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-color-001.html
new file mode 100644
index 0000000000..9d954d5714
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-style-001.html
new file mode 100644
index 0000000000..81761e4671
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-width-001.html
new file mode 100644
index 0000000000..e6b37c9b78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-color-001.html
new file mode 100644
index 0000000000..7bed3fc399
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-style-001.html
new file mode 100644
index 0000000000..854d6fb98e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-width-001.html
new file mode 100644
index 0000000000..9ad91b7ba4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-color-001.html
new file mode 100644
index 0000000000..093c18c703
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..a33640e2a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..21ec7d1f87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-style-001.html
new file mode 100644
index 0000000000..26b31f9331
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-width-001.html
new file mode 100644
index 0000000000..677a04ef16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-end-end-radius-001.html
new file mode 100644
index 0000000000..426b75464e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-end-start-radius-001.html
new file mode 100644
index 0000000000..58f7487c99
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-outset-001.html
new file mode 100644
index 0000000000..fe1d1f0cc2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-repeat-001.html
new file mode 100644
index 0000000000..611aaadce8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-slice-001.html
new file mode 100644
index 0000000000..fbd35beef9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-source-001.html
new file mode 100644
index 0000000000..73b90e28b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-width-001.html
new file mode 100644
index 0000000000..53be3f24e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-color-001.html
new file mode 100644
index 0000000000..5cef20ff8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-style-001.html
new file mode 100644
index 0000000000..01c62b5120
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-width-001.html
new file mode 100644
index 0000000000..279ea4bd9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-color-001.html
new file mode 100644
index 0000000000..b4e93e5fb0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-style-001.html
new file mode 100644
index 0000000000..279a809043
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-width-001.html
new file mode 100644
index 0000000000..99694bc67b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-color-001.html
new file mode 100644
index 0000000000..608d5d2664
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-style-001.html
new file mode 100644
index 0000000000..af85417326
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-width-001.html
new file mode 100644
index 0000000000..c1dcc4fb9e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-color-001.html
new file mode 100644
index 0000000000..b2c2200537
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-style-001.html
new file mode 100644
index 0000000000..890770c872
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-width-001.html
new file mode 100644
index 0000000000..8128bb539f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-start-end-radius-001.html
new file mode 100644
index 0000000000..c9dc8fc034
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-start-start-radius-001.html
new file mode 100644
index 0000000000..fe0f50c862
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-color-001.html
new file mode 100644
index 0000000000..8e19135548
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-left-radius-001.html
new file mode 100644
index 0000000000..00706e8e18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-right-radius-001.html
new file mode 100644
index 0000000000..d9eff0a7ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-style-001.html
new file mode 100644
index 0000000000..687a156374
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-width-001.html
new file mode 100644
index 0000000000..8d21da1745
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for input-search</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-input" type="search" value="input-search">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-attachment-001.html
new file mode 100644
index 0000000000..d686b71ecb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-clip-001.html
new file mode 100644
index 0000000000..5e5bb98b73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-color-001.html
new file mode 100644
index 0000000000..a9a4f9ce47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-image-001.html
new file mode 100644
index 0000000000..67ce5d447a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-origin-001.html
new file mode 100644
index 0000000000..d64ea1c55c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-position-001.html
new file mode 100644
index 0000000000..47328fa550
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-size-001.html
new file mode 100644
index 0000000000..801451bc4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-color-001.html
new file mode 100644
index 0000000000..35c2b259aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-style-001.html
new file mode 100644
index 0000000000..02418ca51a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-width-001.html
new file mode 100644
index 0000000000..76ba5d545b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-color-001.html
new file mode 100644
index 0000000000..5aa72d0032
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-style-001.html
new file mode 100644
index 0000000000..5d6f0deb64
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-width-001.html
new file mode 100644
index 0000000000..e1a0fe22c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-color-001.html
new file mode 100644
index 0000000000..0429d4cf7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..1ff1f9cf1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..1a7b7521fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-style-001.html
new file mode 100644
index 0000000000..f33d4b5424
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-width-001.html
new file mode 100644
index 0000000000..f60665b61a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-end-end-radius-001.html
new file mode 100644
index 0000000000..5410992260
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-end-start-radius-001.html
new file mode 100644
index 0000000000..207216e61c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-outset-001.html
new file mode 100644
index 0000000000..e54d46aeb2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-repeat-001.html
new file mode 100644
index 0000000000..c58d2436fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-slice-001.html
new file mode 100644
index 0000000000..3d69aace32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-source-001.html
new file mode 100644
index 0000000000..0300383427
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-width-001.html
new file mode 100644
index 0000000000..51b084ec8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-color-001.html
new file mode 100644
index 0000000000..b002409c93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-style-001.html
new file mode 100644
index 0000000000..6ecfaaeeaf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-width-001.html
new file mode 100644
index 0000000000..33d53e4cb5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-color-001.html
new file mode 100644
index 0000000000..8a936bb270
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-style-001.html
new file mode 100644
index 0000000000..5d43ac916b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-width-001.html
new file mode 100644
index 0000000000..a086c59762
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-color-001.html
new file mode 100644
index 0000000000..647d0c1daa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-style-001.html
new file mode 100644
index 0000000000..8cd58bc942
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-width-001.html
new file mode 100644
index 0000000000..a70ed497c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-color-001.html
new file mode 100644
index 0000000000..9b286548ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-style-001.html
new file mode 100644
index 0000000000..69bc1fae3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-width-001.html
new file mode 100644
index 0000000000..6a918db51d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-start-end-radius-001.html
new file mode 100644
index 0000000000..84cc06a594
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-start-start-radius-001.html
new file mode 100644
index 0000000000..1481a5fcc3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-color-001.html
new file mode 100644
index 0000000000..d5f2c67817
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-left-radius-001.html
new file mode 100644
index 0000000000..6de4bb323f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-right-radius-001.html
new file mode 100644
index 0000000000..6a3055cc09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-style-001.html
new file mode 100644
index 0000000000..80099b9cef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-width-001.html
new file mode 100644
index 0000000000..152a473d57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for input-search-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="search-text-input" type="search" value="input-search-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-attachment-001.html
new file mode 100644
index 0000000000..b36f8cf5ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-clip-001.html
new file mode 100644
index 0000000000..88f96485a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-color-001.html
new file mode 100644
index 0000000000..c5ebc0feae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-image-001.html
new file mode 100644
index 0000000000..2bee179324
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-origin-001.html
new file mode 100644
index 0000000000..f000839d1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-position-001.html
new file mode 100644
index 0000000000..1aea7465d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-size-001.html
new file mode 100644
index 0000000000..0a92b03012
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-color-001.html
new file mode 100644
index 0000000000..10c583ff72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-style-001.html
new file mode 100644
index 0000000000..009e62337e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-width-001.html
new file mode 100644
index 0000000000..5d4c3e04c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-color-001.html
new file mode 100644
index 0000000000..7b85ed264f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-style-001.html
new file mode 100644
index 0000000000..db23cc0010
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-width-001.html
new file mode 100644
index 0000000000..ea8943575a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-color-001.html
new file mode 100644
index 0000000000..a0c6aeabd1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..27368813f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..d876112e06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-style-001.html
new file mode 100644
index 0000000000..c08eacfb62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-width-001.html
new file mode 100644
index 0000000000..0f98fb5e43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-end-end-radius-001.html
new file mode 100644
index 0000000000..b7212ef44c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-end-start-radius-001.html
new file mode 100644
index 0000000000..ca29a81260
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-outset-001.html
new file mode 100644
index 0000000000..8505655ea4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-repeat-001.html
new file mode 100644
index 0000000000..42084e7d8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-slice-001.html
new file mode 100644
index 0000000000..03721a19fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-source-001.html
new file mode 100644
index 0000000000..b768500ae8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-width-001.html
new file mode 100644
index 0000000000..cd28c59c28
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-color-001.html
new file mode 100644
index 0000000000..7b1109ed25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-style-001.html
new file mode 100644
index 0000000000..47c7d1f49f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-width-001.html
new file mode 100644
index 0000000000..2fde013d5b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-color-001.html
new file mode 100644
index 0000000000..debb779240
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-style-001.html
new file mode 100644
index 0000000000..4e260effb7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-width-001.html
new file mode 100644
index 0000000000..9caca2822f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-color-001.html
new file mode 100644
index 0000000000..7c5118375b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-style-001.html
new file mode 100644
index 0000000000..8981d27e61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-width-001.html
new file mode 100644
index 0000000000..5b93b5bc3d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-color-001.html
new file mode 100644
index 0000000000..243341d212
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-style-001.html
new file mode 100644
index 0000000000..be67b5327d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-width-001.html
new file mode 100644
index 0000000000..bffb7dc6ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-start-end-radius-001.html
new file mode 100644
index 0000000000..ab96454e0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-start-start-radius-001.html
new file mode 100644
index 0000000000..0af363c894
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-color-001.html
new file mode 100644
index 0000000000..9b62a7c5fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-left-radius-001.html
new file mode 100644
index 0000000000..b6a1cd3476
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-right-radius-001.html
new file mode 100644
index 0000000000..48c4a8cbc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-style-001.html
new file mode 100644
index 0000000000..de7b61f4a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-width-001.html
new file mode 100644
index 0000000000..df2deefd7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for input-submit</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="submit-input" type="submit" value="input-submit">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-attachment-001.html
new file mode 100644
index 0000000000..9aa9950487
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-clip-001.html
new file mode 100644
index 0000000000..e90ad46d57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-color-001.html
new file mode 100644
index 0000000000..10e5bfcc11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-image-001.html
new file mode 100644
index 0000000000..ab612a3713
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-origin-001.html
new file mode 100644
index 0000000000..8b447fc78b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-position-001.html
new file mode 100644
index 0000000000..e75ae6369c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-size-001.html
new file mode 100644
index 0000000000..6e182151ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-color-001.html
new file mode 100644
index 0000000000..00536269b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-style-001.html
new file mode 100644
index 0000000000..460aab47c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-width-001.html
new file mode 100644
index 0000000000..bfe0590c9e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-color-001.html
new file mode 100644
index 0000000000..a99decb693
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-style-001.html
new file mode 100644
index 0000000000..fc3ac1a2fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-width-001.html
new file mode 100644
index 0000000000..9fa513af7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-color-001.html
new file mode 100644
index 0000000000..2eb97b2d9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..34ffa2d2b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..e889656af8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-style-001.html
new file mode 100644
index 0000000000..1afdb4b486
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-width-001.html
new file mode 100644
index 0000000000..6540d05fa6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-end-end-radius-001.html
new file mode 100644
index 0000000000..98735e9c01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-end-start-radius-001.html
new file mode 100644
index 0000000000..6dd419e22d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-outset-001.html
new file mode 100644
index 0000000000..fc46ace6cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-repeat-001.html
new file mode 100644
index 0000000000..709485ffc3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-slice-001.html
new file mode 100644
index 0000000000..1b391cceec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-source-001.html
new file mode 100644
index 0000000000..2523a8261c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-width-001.html
new file mode 100644
index 0000000000..3f22013eee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-color-001.html
new file mode 100644
index 0000000000..294cc707d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-style-001.html
new file mode 100644
index 0000000000..97a9a5dcfc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-width-001.html
new file mode 100644
index 0000000000..e0035f2d79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-color-001.html
new file mode 100644
index 0000000000..f4b3974ab4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-style-001.html
new file mode 100644
index 0000000000..e2b1ca7c7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-width-001.html
new file mode 100644
index 0000000000..dc07a0ed82
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-color-001.html
new file mode 100644
index 0000000000..65fd37f7e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-style-001.html
new file mode 100644
index 0000000000..0c5fd539b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-width-001.html
new file mode 100644
index 0000000000..5e8e54ef9e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-color-001.html
new file mode 100644
index 0000000000..91385eb589
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-style-001.html
new file mode 100644
index 0000000000..8fe090fc33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-width-001.html
new file mode 100644
index 0000000000..cb3470e000
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-start-end-radius-001.html
new file mode 100644
index 0000000000..d8ca285dfc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-start-start-radius-001.html
new file mode 100644
index 0000000000..b3c94b3388
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-color-001.html
new file mode 100644
index 0000000000..e57dba8c03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-left-radius-001.html
new file mode 100644
index 0000000000..d408d75db3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-right-radius-001.html
new file mode 100644
index 0000000000..a39e8fff1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-style-001.html
new file mode 100644
index 0000000000..cd4fcc4b10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-width-001.html
new file mode 100644
index 0000000000..21185f9890
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for input-text</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="text-input" type="text" value="input-text">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-attachment-001.html
new file mode 100644
index 0000000000..b68f8ee1cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-clip-001.html
new file mode 100644
index 0000000000..417f715414
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-color-001.html
new file mode 100644
index 0000000000..52e07c3f03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-image-001.html
new file mode 100644
index 0000000000..27c6a2668f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-origin-001.html
new file mode 100644
index 0000000000..06963ba20d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-position-001.html
new file mode 100644
index 0000000000..e6e1c180be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-size-001.html
new file mode 100644
index 0000000000..0fec1738a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-color-001.html
new file mode 100644
index 0000000000..a35424ba40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-style-001.html
new file mode 100644
index 0000000000..471287ca74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-width-001.html
new file mode 100644
index 0000000000..7010081f1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-color-001.html
new file mode 100644
index 0000000000..c8861b4a76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-style-001.html
new file mode 100644
index 0000000000..510214f2ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-width-001.html
new file mode 100644
index 0000000000..c9ebdbebcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-color-001.html
new file mode 100644
index 0000000000..8db0902fff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..8bee975ead
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..00ac753675
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-style-001.html
new file mode 100644
index 0000000000..ac19679451
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-width-001.html
new file mode 100644
index 0000000000..c18b4dcf0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-end-end-radius-001.html
new file mode 100644
index 0000000000..bb8fa354bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-end-start-radius-001.html
new file mode 100644
index 0000000000..1263823068
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-outset-001.html
new file mode 100644
index 0000000000..ab9b973ffa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-repeat-001.html
new file mode 100644
index 0000000000..32eb2a38ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-slice-001.html
new file mode 100644
index 0000000000..1a6486e9d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-source-001.html
new file mode 100644
index 0000000000..2ae8d4d475
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-width-001.html
new file mode 100644
index 0000000000..f22d5bfa5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-color-001.html
new file mode 100644
index 0000000000..86c142554b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-style-001.html
new file mode 100644
index 0000000000..dd0df7f55b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-width-001.html
new file mode 100644
index 0000000000..31ef531d5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-color-001.html
new file mode 100644
index 0000000000..b721fb5211
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-style-001.html
new file mode 100644
index 0000000000..a521fa1a91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-width-001.html
new file mode 100644
index 0000000000..d8ad23661e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-color-001.html
new file mode 100644
index 0000000000..c2ec8d3269
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-style-001.html
new file mode 100644
index 0000000000..33c793aed5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-width-001.html
new file mode 100644
index 0000000000..f8d2311a08
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-color-001.html
new file mode 100644
index 0000000000..6affa83d96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-style-001.html
new file mode 100644
index 0000000000..4d508dbb30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-width-001.html
new file mode 100644
index 0000000000..c32ba83dbf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-start-end-radius-001.html
new file mode 100644
index 0000000000..62be943c75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-start-start-radius-001.html
new file mode 100644
index 0000000000..84362f3e8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-color-001.html
new file mode 100644
index 0000000000..f41ae3c623
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-left-radius-001.html
new file mode 100644
index 0000000000..ec8ed2996c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-right-radius-001.html
new file mode 100644
index 0000000000..9c29f074f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-style-001.html
new file mode 100644
index 0000000000..34c6b54a1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-width-001.html
new file mode 100644
index 0000000000..73b8261ae6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for link</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-link-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <a id="link">a</a>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-attachment-001.html
new file mode 100644
index 0000000000..f9760122e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-clip-001.html
new file mode 100644
index 0000000000..dd353eb00a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-color-001.html
new file mode 100644
index 0000000000..2d6f903a06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-image-001.html
new file mode 100644
index 0000000000..2217eba409
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-origin-001.html
new file mode 100644
index 0000000000..8c2321227d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-position-001.html
new file mode 100644
index 0000000000..b82a498119
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-size-001.html
new file mode 100644
index 0000000000..2e3fa56313
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-color-001.html
new file mode 100644
index 0000000000..2b0742dec1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-style-001.html
new file mode 100644
index 0000000000..cf733efffa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-width-001.html
new file mode 100644
index 0000000000..44bcd7d590
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-color-001.html
new file mode 100644
index 0000000000..c03b5eb012
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-style-001.html
new file mode 100644
index 0000000000..5ed90d3684
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-width-001.html
new file mode 100644
index 0000000000..0dae7defc1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-color-001.html
new file mode 100644
index 0000000000..bc3d1bb8e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..aad197d192
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..2ea501c5ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-style-001.html
new file mode 100644
index 0000000000..887fe56ec6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-width-001.html
new file mode 100644
index 0000000000..5af8fffb41
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-end-end-radius-001.html
new file mode 100644
index 0000000000..bacfb1d979
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-end-start-radius-001.html
new file mode 100644
index 0000000000..0a4d9bcd32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-outset-001.html
new file mode 100644
index 0000000000..f89f6c8c10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-repeat-001.html
new file mode 100644
index 0000000000..c87a7194a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-slice-001.html
new file mode 100644
index 0000000000..ebb7d24679
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-source-001.html
new file mode 100644
index 0000000000..a823e2281c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-width-001.html
new file mode 100644
index 0000000000..c0d4f43d6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-color-001.html
new file mode 100644
index 0000000000..624c594d41
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-style-001.html
new file mode 100644
index 0000000000..233c4f2811
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-width-001.html
new file mode 100644
index 0000000000..4d25da679a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-color-001.html
new file mode 100644
index 0000000000..49d0c1d9f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-style-001.html
new file mode 100644
index 0000000000..0a48844dee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-width-001.html
new file mode 100644
index 0000000000..ae7382c574
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-color-001.html
new file mode 100644
index 0000000000..f5cde670ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-style-001.html
new file mode 100644
index 0000000000..48c1740146
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-width-001.html
new file mode 100644
index 0000000000..0aca1fbaa7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-color-001.html
new file mode 100644
index 0000000000..b7b2360792
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-style-001.html
new file mode 100644
index 0000000000..24d4b2eeca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-width-001.html
new file mode 100644
index 0000000000..a3659d5662
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-start-end-radius-001.html
new file mode 100644
index 0000000000..ac4ec661e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-start-start-radius-001.html
new file mode 100644
index 0000000000..62d5d57d2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-color-001.html
new file mode 100644
index 0000000000..28210d6f67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-left-radius-001.html
new file mode 100644
index 0000000000..cf25cc4894
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-right-radius-001.html
new file mode 100644
index 0000000000..24f15a54b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-style-001.html
new file mode 100644
index 0000000000..37ba183f77
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-width-001.html
new file mode 100644
index 0000000000..c10fce34f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for meter</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <meter id="meter" value=0.5></meter>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-attachment-001.html
new file mode 100644
index 0000000000..b85186c680
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-clip-001.html
new file mode 100644
index 0000000000..e3df1f06a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-color-001.html
new file mode 100644
index 0000000000..8e935212c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-image-001.html
new file mode 100644
index 0000000000..87e895e043
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-origin-001.html
new file mode 100644
index 0000000000..a4958abd24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-position-001.html
new file mode 100644
index 0000000000..ed117a9d97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-size-001.html
new file mode 100644
index 0000000000..3047ef8414
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-color-001.html
new file mode 100644
index 0000000000..3f0846230f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-style-001.html
new file mode 100644
index 0000000000..1cddf916cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-width-001.html
new file mode 100644
index 0000000000..fe21ae809f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-color-001.html
new file mode 100644
index 0000000000..67b5b8330e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-style-001.html
new file mode 100644
index 0000000000..5359a78b25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-width-001.html
new file mode 100644
index 0000000000..1019a98b3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-color-001.html
new file mode 100644
index 0000000000..366236c704
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..6dce72a618
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..86eb1e7e76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-style-001.html
new file mode 100644
index 0000000000..900c7961ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-width-001.html
new file mode 100644
index 0000000000..67e97920d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-end-end-radius-001.html
new file mode 100644
index 0000000000..0f78fb7c16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-end-start-radius-001.html
new file mode 100644
index 0000000000..9f74da94cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-outset-001.html
new file mode 100644
index 0000000000..306c1611a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-repeat-001.html
new file mode 100644
index 0000000000..2ba0e04b0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-slice-001.html
new file mode 100644
index 0000000000..42d6560f9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-source-001.html
new file mode 100644
index 0000000000..80e6fdcc2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-width-001.html
new file mode 100644
index 0000000000..5086cbae92
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-color-001.html
new file mode 100644
index 0000000000..88427b7892
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-style-001.html
new file mode 100644
index 0000000000..e16bb5a948
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-width-001.html
new file mode 100644
index 0000000000..88f5615387
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-color-001.html
new file mode 100644
index 0000000000..a94c23d717
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-style-001.html
new file mode 100644
index 0000000000..479a0faa2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-width-001.html
new file mode 100644
index 0000000000..480fbc7207
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-color-001.html
new file mode 100644
index 0000000000..0f6a3c6fcb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-style-001.html
new file mode 100644
index 0000000000..aab0719b9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-width-001.html
new file mode 100644
index 0000000000..6c24d4e733
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-color-001.html
new file mode 100644
index 0000000000..2f0aa1351c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-style-001.html
new file mode 100644
index 0000000000..02dfe722a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-width-001.html
new file mode 100644
index 0000000000..4f438b5320
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-start-end-radius-001.html
new file mode 100644
index 0000000000..bdab3fd0ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-start-start-radius-001.html
new file mode 100644
index 0000000000..5c5f06890f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-color-001.html
new file mode 100644
index 0000000000..62c0d5f2b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-left-radius-001.html
new file mode 100644
index 0000000000..7c6b62f826
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-right-radius-001.html
new file mode 100644
index 0000000000..f412a90350
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-style-001.html
new file mode 100644
index 0000000000..c8601df503
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-width-001.html
new file mode 100644
index 0000000000..ea5c5c49fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for progress</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <progress id="progress" value=0.5></progress>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-attachment-001.html
new file mode 100644
index 0000000000..8c7e8ea16e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-clip-001.html
new file mode 100644
index 0000000000..cbb6a7ec10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-color-001.html
new file mode 100644
index 0000000000..ce5b79bbe2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-image-001.html
new file mode 100644
index 0000000000..e15e9e4c15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-origin-001.html
new file mode 100644
index 0000000000..0e81e6fe38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-position-001.html
new file mode 100644
index 0000000000..4fa8e7af26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-size-001.html
new file mode 100644
index 0000000000..1a989ed6df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-color-001.html
new file mode 100644
index 0000000000..d7708ce4cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-style-001.html
new file mode 100644
index 0000000000..4707f09aa9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-width-001.html
new file mode 100644
index 0000000000..a0098cc0ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-color-001.html
new file mode 100644
index 0000000000..0375cd802f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-style-001.html
new file mode 100644
index 0000000000..ec17b48c6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-width-001.html
new file mode 100644
index 0000000000..2e3d9443cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-color-001.html
new file mode 100644
index 0000000000..1cbebba1d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..f9c253da89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..5f1458598c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-style-001.html
new file mode 100644
index 0000000000..96c8932201
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-width-001.html
new file mode 100644
index 0000000000..be80a5af60
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-end-end-radius-001.html
new file mode 100644
index 0000000000..f03b3ffdc2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-end-start-radius-001.html
new file mode 100644
index 0000000000..954a4ff433
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-outset-001.html
new file mode 100644
index 0000000000..8965306856
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-repeat-001.html
new file mode 100644
index 0000000000..662f9ca648
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-slice-001.html
new file mode 100644
index 0000000000..f15ebe31a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-source-001.html
new file mode 100644
index 0000000000..539ebb7b5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-width-001.html
new file mode 100644
index 0000000000..a17d8475dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-color-001.html
new file mode 100644
index 0000000000..8772070068
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-style-001.html
new file mode 100644
index 0000000000..271f4e37fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-width-001.html
new file mode 100644
index 0000000000..7f61c6fb59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-color-001.html
new file mode 100644
index 0000000000..6c25f25d17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-style-001.html
new file mode 100644
index 0000000000..5ced60d4ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-width-001.html
new file mode 100644
index 0000000000..f39286a771
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-color-001.html
new file mode 100644
index 0000000000..b19deb2c66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-style-001.html
new file mode 100644
index 0000000000..56e7d9ef18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-width-001.html
new file mode 100644
index 0000000000..2ee2531b68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-color-001.html
new file mode 100644
index 0000000000..8fbb9f4115
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-style-001.html
new file mode 100644
index 0000000000..df88bff3fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-width-001.html
new file mode 100644
index 0000000000..22ce6e076f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-start-end-radius-001.html
new file mode 100644
index 0000000000..360b827151
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-start-start-radius-001.html
new file mode 100644
index 0000000000..6a6904d013
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-color-001.html
new file mode 100644
index 0000000000..08086865d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-left-radius-001.html
new file mode 100644
index 0000000000..426cae160e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-right-radius-001.html
new file mode 100644
index 0000000000..b95427553e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-style-001.html
new file mode 100644
index 0000000000..ead7b86ce6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-width-001.html
new file mode 100644
index 0000000000..c2a867421b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for radio-input</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="radio-input" type="radio">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-attachment-001.html
new file mode 100644
index 0000000000..72c767a514
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-clip-001.html
new file mode 100644
index 0000000000..790641dd9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-color-001.html
new file mode 100644
index 0000000000..b3e18adffa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-image-001.html
new file mode 100644
index 0000000000..4043b25fe9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-origin-001.html
new file mode 100644
index 0000000000..a80b97b2a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-position-001.html
new file mode 100644
index 0000000000..895faa0084
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-size-001.html
new file mode 100644
index 0000000000..a3513799ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-color-001.html
new file mode 100644
index 0000000000..557070fe80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-style-001.html
new file mode 100644
index 0000000000..b0748f3f5b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-width-001.html
new file mode 100644
index 0000000000..f5b075ac17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-color-001.html
new file mode 100644
index 0000000000..28a37eae6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-style-001.html
new file mode 100644
index 0000000000..3ff761c721
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-width-001.html
new file mode 100644
index 0000000000..78458b6608
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-color-001.html
new file mode 100644
index 0000000000..fabdf0a492
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..4f4b4c6d91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..5a0bdd2902
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-style-001.html
new file mode 100644
index 0000000000..2478e65d1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-width-001.html
new file mode 100644
index 0000000000..924356441b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-end-end-radius-001.html
new file mode 100644
index 0000000000..96b8ee95c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-end-start-radius-001.html
new file mode 100644
index 0000000000..2c2e4ed67a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-outset-001.html
new file mode 100644
index 0000000000..9890eae400
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-repeat-001.html
new file mode 100644
index 0000000000..a3602ef173
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-slice-001.html
new file mode 100644
index 0000000000..0c8ffa168b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-source-001.html
new file mode 100644
index 0000000000..60fcd035a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-width-001.html
new file mode 100644
index 0000000000..59098eec89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-color-001.html
new file mode 100644
index 0000000000..16e2c1bd47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-style-001.html
new file mode 100644
index 0000000000..7e664810f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-width-001.html
new file mode 100644
index 0000000000..eaff4997e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-color-001.html
new file mode 100644
index 0000000000..163694169a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-style-001.html
new file mode 100644
index 0000000000..a5b216d1fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-width-001.html
new file mode 100644
index 0000000000..0eb1f6ec6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-color-001.html
new file mode 100644
index 0000000000..02135eae2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-style-001.html
new file mode 100644
index 0000000000..edef1998be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-width-001.html
new file mode 100644
index 0000000000..e9d2804bcd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-color-001.html
new file mode 100644
index 0000000000..fb20afa6e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-style-001.html
new file mode 100644
index 0000000000..6f4bfe4068
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-width-001.html
new file mode 100644
index 0000000000..03422cd5f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-start-end-radius-001.html
new file mode 100644
index 0000000000..c5d4621893
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-start-start-radius-001.html
new file mode 100644
index 0000000000..5c4a81f064
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-color-001.html
new file mode 100644
index 0000000000..a8b12f51b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-left-radius-001.html
new file mode 100644
index 0000000000..0eefc064b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-right-radius-001.html
new file mode 100644
index 0000000000..d43e98ee52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-style-001.html
new file mode 100644
index 0000000000..1e8dec3e85
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-width-001.html
new file mode 100644
index 0000000000..a45f6b1427
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for range</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-range-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <input id="range-input" type="range">
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-attachment-001.html
new file mode 100644
index 0000000000..9ba8944274
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-clip-001.html
new file mode 100644
index 0000000000..719bec28ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-color-001.html
new file mode 100644
index 0000000000..9092c41bd9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-image-001.html
new file mode 100644
index 0000000000..972c343dc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-origin-001.html
new file mode 100644
index 0000000000..abc9acfc41
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-position-001.html
new file mode 100644
index 0000000000..999fff4211
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-size-001.html
new file mode 100644
index 0000000000..977bc0e835
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-color-001.html
new file mode 100644
index 0000000000..46bdb5b0e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-style-001.html
new file mode 100644
index 0000000000..aa3788595a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-width-001.html
new file mode 100644
index 0000000000..cebe998f89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-color-001.html
new file mode 100644
index 0000000000..9c238d5760
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-style-001.html
new file mode 100644
index 0000000000..7061a367ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-width-001.html
new file mode 100644
index 0000000000..34578a4782
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-color-001.html
new file mode 100644
index 0000000000..d1a7a01295
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..1c70cd361c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..5185032c23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-style-001.html
new file mode 100644
index 0000000000..ceda431954
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-width-001.html
new file mode 100644
index 0000000000..3c43f47e59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-end-end-radius-001.html
new file mode 100644
index 0000000000..182c527cc5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-end-start-radius-001.html
new file mode 100644
index 0000000000..efbd14d7de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-outset-001.html
new file mode 100644
index 0000000000..5a0eb9beab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-repeat-001.html
new file mode 100644
index 0000000000..5ad2b2c0f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-slice-001.html
new file mode 100644
index 0000000000..3993331322
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-source-001.html
new file mode 100644
index 0000000000..9c9da2935a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-width-001.html
new file mode 100644
index 0000000000..d03492c583
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-color-001.html
new file mode 100644
index 0000000000..b8498148b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-style-001.html
new file mode 100644
index 0000000000..13a75cc5cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-width-001.html
new file mode 100644
index 0000000000..40d13678cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-color-001.html
new file mode 100644
index 0000000000..de4241fdf9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-style-001.html
new file mode 100644
index 0000000000..9ea8f4dfe5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-width-001.html
new file mode 100644
index 0000000000..dedfa6d40e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-color-001.html
new file mode 100644
index 0000000000..5f88004404
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-style-001.html
new file mode 100644
index 0000000000..d574ac6850
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-width-001.html
new file mode 100644
index 0000000000..0c466b38ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-color-001.html
new file mode 100644
index 0000000000..ac2c9b29cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-style-001.html
new file mode 100644
index 0000000000..671dd6fccc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-width-001.html
new file mode 100644
index 0000000000..2c7baec752
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-start-end-radius-001.html
new file mode 100644
index 0000000000..43c1b27a7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-start-start-radius-001.html
new file mode 100644
index 0000000000..f902a43179
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-color-001.html
new file mode 100644
index 0000000000..b030e5cd21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-left-radius-001.html
new file mode 100644
index 0000000000..35d83e296e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-right-radius-001.html
new file mode 100644
index 0000000000..922a101bec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-style-001.html
new file mode 100644
index 0000000000..dfddc274eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-width-001.html
new file mode 100644
index 0000000000..30019434db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for select-dropdown-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-dropdown-box"><option>select-dropdown-box</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-attachment-001.html
new file mode 100644
index 0000000000..b6f4087456
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-clip-001.html
new file mode 100644
index 0000000000..43f87212d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-color-001.html
new file mode 100644
index 0000000000..b349902c1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-image-001.html
new file mode 100644
index 0000000000..bf8b706bf1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-origin-001.html
new file mode 100644
index 0000000000..dfd1a934a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-position-001.html
new file mode 100644
index 0000000000..41b6a7b81b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-size-001.html
new file mode 100644
index 0000000000..64fe9a0c89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-color-001.html
new file mode 100644
index 0000000000..17a010be36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-style-001.html
new file mode 100644
index 0000000000..f079e82abc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-width-001.html
new file mode 100644
index 0000000000..8f741e2136
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-color-001.html
new file mode 100644
index 0000000000..28ff9ee6ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-style-001.html
new file mode 100644
index 0000000000..dc7bcd0952
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-width-001.html
new file mode 100644
index 0000000000..0509dde5fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-color-001.html
new file mode 100644
index 0000000000..af7704d0dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..b38b443531
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..f797e078f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-style-001.html
new file mode 100644
index 0000000000..6d895bce48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-width-001.html
new file mode 100644
index 0000000000..14ea0153c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-end-end-radius-001.html
new file mode 100644
index 0000000000..d105047747
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-end-start-radius-001.html
new file mode 100644
index 0000000000..0ca58e5d04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-outset-001.html
new file mode 100644
index 0000000000..367d1f64e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-repeat-001.html
new file mode 100644
index 0000000000..558ab52000
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-slice-001.html
new file mode 100644
index 0000000000..736ffd422d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-source-001.html
new file mode 100644
index 0000000000..987ed46626
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-width-001.html
new file mode 100644
index 0000000000..e6d824e21b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-color-001.html
new file mode 100644
index 0000000000..269805c299
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-style-001.html
new file mode 100644
index 0000000000..74f6794710
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-width-001.html
new file mode 100644
index 0000000000..bfb561c4b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-color-001.html
new file mode 100644
index 0000000000..7403def5f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-style-001.html
new file mode 100644
index 0000000000..235436bb4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-width-001.html
new file mode 100644
index 0000000000..24f6eb28a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-color-001.html
new file mode 100644
index 0000000000..107eeec6a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-style-001.html
new file mode 100644
index 0000000000..a97d90c5cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-width-001.html
new file mode 100644
index 0000000000..894276bb89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-color-001.html
new file mode 100644
index 0000000000..6ebb3df197
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-style-001.html
new file mode 100644
index 0000000000..4cc83727db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-width-001.html
new file mode 100644
index 0000000000..029c608827
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-start-end-radius-001.html
new file mode 100644
index 0000000000..464d7dfd1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-start-start-radius-001.html
new file mode 100644
index 0000000000..81c7892743
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-color-001.html
new file mode 100644
index 0000000000..d7c68ac98d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-left-radius-001.html
new file mode 100644
index 0000000000..3b306bb7eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-right-radius-001.html
new file mode 100644
index 0000000000..ae8091382b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-style-001.html
new file mode 100644
index 0000000000..8fbbb91e2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-width-001.html
new file mode 100644
index 0000000000..b80972a50e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for select-listbox</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select multiple id="select-listbox"><option>select-listbox</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-attachment-001.html
new file mode 100644
index 0000000000..4378b659c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-clip-001.html
new file mode 100644
index 0000000000..d62a086486
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-color-001.html
new file mode 100644
index 0000000000..bbf309938c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-image-001.html
new file mode 100644
index 0000000000..12c9fd5c4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-origin-001.html
new file mode 100644
index 0000000000..336fc8623c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-position-001.html
new file mode 100644
index 0000000000..7f4013654f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-size-001.html
new file mode 100644
index 0000000000..bb420ccf73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-color-001.html
new file mode 100644
index 0000000000..1a476acc46
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-style-001.html
new file mode 100644
index 0000000000..db78458573
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-width-001.html
new file mode 100644
index 0000000000..f21984e12c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-color-001.html
new file mode 100644
index 0000000000..95308ab790
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-style-001.html
new file mode 100644
index 0000000000..1fa80c7eca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-width-001.html
new file mode 100644
index 0000000000..57553cd306
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-color-001.html
new file mode 100644
index 0000000000..4666747e22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..c58d57f709
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..e302b17d54
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-style-001.html
new file mode 100644
index 0000000000..c0154d1e83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-width-001.html
new file mode 100644
index 0000000000..1dc70272c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-end-end-radius-001.html
new file mode 100644
index 0000000000..ebedeacd9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-end-start-radius-001.html
new file mode 100644
index 0000000000..4a02399236
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-outset-001.html
new file mode 100644
index 0000000000..015737dca3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-repeat-001.html
new file mode 100644
index 0000000000..cb03b812f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-slice-001.html
new file mode 100644
index 0000000000..799010070b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-source-001.html
new file mode 100644
index 0000000000..1b3838ebb4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-width-001.html
new file mode 100644
index 0000000000..d78b9d9f38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-color-001.html
new file mode 100644
index 0000000000..20c896d910
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-style-001.html
new file mode 100644
index 0000000000..15048d4353
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-width-001.html
new file mode 100644
index 0000000000..ad7b00ede8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-color-001.html
new file mode 100644
index 0000000000..4641bb3e77
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-style-001.html
new file mode 100644
index 0000000000..ab06492b23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-width-001.html
new file mode 100644
index 0000000000..0e3fcac797
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-color-001.html
new file mode 100644
index 0000000000..9fa4d380cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-style-001.html
new file mode 100644
index 0000000000..d1351ee725
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-width-001.html
new file mode 100644
index 0000000000..bfcb9e1784
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-color-001.html
new file mode 100644
index 0000000000..71d6758b80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-style-001.html
new file mode 100644
index 0000000000..0927300e74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-width-001.html
new file mode 100644
index 0000000000..01928ca8b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-start-end-radius-001.html
new file mode 100644
index 0000000000..7fb7bcf7f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-start-start-radius-001.html
new file mode 100644
index 0000000000..35fef879cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-color-001.html
new file mode 100644
index 0000000000..cf1d4f8260
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-left-radius-001.html
new file mode 100644
index 0000000000..8b0eda3d78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-right-radius-001.html
new file mode 100644
index 0000000000..d2ec819ac6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-style-001.html
new file mode 100644
index 0000000000..5625d4f132
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-width-001.html
new file mode 100644
index 0000000000..536a7ac8f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for select-menulist-button</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <select id="select-menulist-button"><option>select-menulist-button</option></select>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-attachment-001.html
new file mode 100644
index 0000000000..ab67317a20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-attachment-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-attachment";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-clip-001.html
new file mode 100644
index 0000000000..821cdda277
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-clip-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-clip";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-color-001.html
new file mode 100644
index 0000000000..999bf80ab4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-color.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-image-001.html
new file mode 100644
index 0000000000..30171213b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-image-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-image.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-image";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-origin-001.html
new file mode 100644
index 0000000000..9eaaeabc50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-origin-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-origin";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-position-001.html
new file mode 100644
index 0000000000..42c4f0ad61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-position-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-position.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-position";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-size-001.html
new file mode 100644
index 0000000000..00d57199ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-size-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes background-size.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "background-size";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-color-001.html
new file mode 100644
index 0000000000..c44d7d585e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-style-001.html
new file mode 100644
index 0000000000..61f2f20b7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-width-001.html
new file mode 100644
index 0000000000..c18998c5d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-color-001.html
new file mode 100644
index 0000000000..4952f5a7ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-style-001.html
new file mode 100644
index 0000000000..757ace5132
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-width-001.html
new file mode 100644
index 0000000000..c32109de55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-block-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-color-001.html
new file mode 100644
index 0000000000..6bbcadcc80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-left-radius-001.html
new file mode 100644
index 0000000000..8d1e7c4ba8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-right-radius-001.html
new file mode 100644
index 0000000000..d7efd39f0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-style-001.html
new file mode 100644
index 0000000000..82c24b5f46
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-width-001.html
new file mode 100644
index 0000000000..f26aa76e6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-bottom-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-end-end-radius-001.html
new file mode 100644
index 0000000000..6f75cec2d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-end-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-end-start-radius-001.html
new file mode 100644
index 0000000000..6820c01f10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-end-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-end-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-outset-001.html
new file mode 100644
index 0000000000..eceb94c0b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-outset-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-outset";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-repeat-001.html
new file mode 100644
index 0000000000..c5861b08bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-repeat-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-repeat";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-slice-001.html
new file mode 100644
index 0000000000..ffe49fda10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-slice-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-slice";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-source-001.html
new file mode 100644
index 0000000000..e8c66dd3b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-source-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-source";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-width-001.html
new file mode 100644
index 0000000000..62848f6c7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-image-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-color-001.html
new file mode 100644
index 0000000000..96dfb2cb6e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-style-001.html
new file mode 100644
index 0000000000..854bb92df6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-width-001.html
new file mode 100644
index 0000000000..146a6725d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-end-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-color-001.html
new file mode 100644
index 0000000000..21250ce8bf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-style-001.html
new file mode 100644
index 0000000000..95fae5cfcd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-width-001.html
new file mode 100644
index 0000000000..fa70544fdb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-inline-start-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-color-001.html
new file mode 100644
index 0000000000..add41f7ecf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-style-001.html
new file mode 100644
index 0000000000..1a5cb56922
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-width-001.html
new file mode 100644
index 0000000000..9b76bcef47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-left-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-color-001.html
new file mode 100644
index 0000000000..e5436513b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-style-001.html
new file mode 100644
index 0000000000..d01355a909
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-width-001.html
new file mode 100644
index 0000000000..de1fefbaf3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-right-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-start-end-radius-001.html
new file mode 100644
index 0000000000..2d5d8dcd75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-start-end-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-end-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-start-start-radius-001.html
new file mode 100644
index 0000000000..3c79c908e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-start-start-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-start-start-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-color-001.html
new file mode 100644
index 0000000000..5f79c624f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-color-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-color";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-left-radius-001.html
new file mode 100644
index 0000000000..a065111193
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-left-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-left-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-right-radius-001.html
new file mode 100644
index 0000000000..786f486e74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-right-radius-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-right-radius";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-style-001.html
new file mode 100644
index 0000000000..92e3f96b65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-style-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-style";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-width-001.html
new file mode 100644
index 0000000000..1363260996
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-width-001.html
@@ -0,0 +1,27 @@
+<!-- DO NOT EDIT. This file has been generated. Source:
+    ./tools/build-compute-kind-widget-fallback-props.py
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for textarea</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget">
+<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width.">
+<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html">
+<style>
+    #container { width: 500px; }
+    #container > #search-text-input { appearance: textfield; }
+    #container > #select-menulist-button { appearance: none; appearance: menulist-button; }
+</style>
+
+<div id="container">
+    <textarea id="textarea">textarea</textarea>
+</div>
+
+<script>
+// Set author-level CSS that matches UA style, but don't use the 'revert' value.
+const elements = document.querySelectorAll('#container > *');
+const prop = "border-top-width";
+for (const el of elements) {
+  el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop));
+}
+</script>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
commit	26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree	f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-ui/compute-kind-widget-generated
parent	Initial commit. (diff)
download	firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip