1 files changed, 35 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/default-color.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/default-color.html
new file mode 100644
index 0000000000..5a6e6b21fb
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/default-color.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test for dialog element colors</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+:root { background-color: Canvas; color: CanvasText; }
+#light { color-scheme: light }
+#dark { color-scheme: dark }
+</style>
+<dialog id="dialog" open>
+  This is a dialog
+</dialog>
+<dialog id="light" open>
+  This is a dialog
+</dialog>
+<dialog id="dark" open>
+  This is a dialog
+</dialog>
+<script>
+test(function() {
+  let dialog = document.getElementById("dialog");
+  let cs = getComputedStyle(dialog);
+  let rootCs = getComputedStyle(document.documentElement);
+  assert_equals(cs.color, rootCs.color, "Dialog color should match CanvasText");
+  assert_equals(cs.backgroundColor, rootCs.backgroundColor, "Dialog background should match Canvas");
+}, "<dialog> color and background match default")
+
+test(function() {
+  let lightCs = getComputedStyle(document.getElementById("light"));
+  let darkCs = getComputedStyle(document.getElementById("dark"));
+  assert_not_equals(lightCs.color, darkCs.color, "Dialog color should react to color-scheme");
+  assert_not_equals(lightCs.backgroundColor, darkCs.backgroundColor, "Dialog background should react to color-scheme");
+}, "<dialog> colors react to dark mode")
+</script>