<!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>
