diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/default-color.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/default-color.html | 35 |
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> |