<!DOCTYPE html>
<meta charset="utf-8">
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#color-scheme-prop">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #dark { color-scheme: dark }
  #light { color-scheme: light }
  .canvas { color: CanvasText; background-color: Canvas; }
</style>
<div id="dark" class="canvas"></div>
<div id="light" class="canvas"></div>
<script>
  test(() => {
    assert_not_equals(getComputedStyle(light).color, getComputedStyle(dark).color);
    assert_not_equals(getComputedStyle(light).backgroundColor, getComputedStyle(dark).backgroundColor);
  }, "Check that the system colors are properly affected by the color-scheme.");
</script>
