blob: 5a6e6b21fb2b7a7d2453f85a790bda570b325d4e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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>
|
