1 files changed, 60 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-color/system-color-consistency.html b/testing/web-platform/tests/css/css-color/system-color-consistency.html
new file mode 100644
index 0000000000..4eb9d81100
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/system-color-consistency.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Color 4: Computed value of color-contrast()</title>
+  <link rel="author" title="Jan Keitel" href="mailto:jkeitel@google.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#css-system-colors">
+  <meta name="assert" content="computed style of form elements is consistent with definition of system colors">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script src="/css/support/computed-testcommon.js"></script>
+</head>
+
+<body>
+  <div style="display: none">
+  <div id="target"></div>
+  <!-- Reference elements -->
+  <!-- Buttons -->
+  <div id="buttons">
+    <button name="button"></button><input type="submit" name="submit button">
+    <input type="reset" name="reset button"><input type="color" name="color picker">
+  </div>
+  <!-- Input elements -->
+  <div id="fields">
+    <input type="text" name="text field"><input type="password" name="password field">
+    <input type="email" name="email field"><input type="number" name="number field">
+    <input type="date" name="date field">
+    <textarea name="text area"></textarea>
+  </div>
+  <mark id="mark">Marked text</mark>
+  </div>
+  <script>
+    // Buttons
+    for (let element of document.getElementById("buttons").children) {
+      style = document.defaultView.getComputedStyle(element);
+      test_computed_value('color', 'ButtonBorder', style.getPropertyValue('border-color'), 'resolves to the same color as the border-color of a ' + element.name);
+      test_computed_value('color', 'ButtonFace', style.getPropertyValue('background-color'), 'resolves to the same color as the background-color of a ' + element.name);
+      test_computed_value('color', 'ButtonText', style.getPropertyValue('color'), 'resolves to the same color as text on a ' + element.name);
+    }
+
+    // CanvasText
+    style = document.defaultView.getComputedStyle(document.getElementsByTagName('html')[0]);
+    test_computed_value('color', 'CanvasText', style.getPropertyValue('color'), 'has the same color as the color of the html element');
+
+    // Field and FieldText
+    for (let element of document.getElementById("fields").children) {
+      style = document.defaultView.getComputedStyle(element);
+      test_computed_value('color', 'Field', style.getPropertyValue('background-color'), 'resolves to the same color as the background-color of a ' + element.name);
+      test_computed_value('color', 'FieldText', style.getPropertyValue('color'), 'resolves to the same color as text on a ' + element.name);
+    }
+
+    // Mark and MarkText
+    style = document.defaultView.getComputedStyle(document.getElementById('mark'));
+    test_computed_value('color', 'Mark', style.getPropertyValue('background-color'), 'has the same color as the background-color of a mark element');
+    test_computed_value('color', 'MarkText', style.getPropertyValue('color'), 'has the same color as the color of a mark element');
+  </script>
+</body>
+
+</html>