<!DOCTYPE html>

<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<style>
#testNormal {
    color-scheme: normal;
}

#testOnly {
    color-scheme: only;
}

#testLight {
    color-scheme: light;
}

#testDark {
    color-scheme: dark;
}

#testLightDark {
    color-scheme: light dark;
}

#testDarkLight {
    color-scheme: dark light;
}

#testLightDarkOnly {
    color-scheme: light dark only;
}

#testOnlyDark {
    color-scheme: only dark;
}

#testLightOnlyDark {
    color-scheme: light only dark;
}

#testLightUnknown {
    color-scheme: light foo;
}

#testUnknownDarkOnly {
    color-scheme: bar dark only;
}

#testLightUnknownOnly {
    color-scheme: light baz only;
}

#testInvalidLightNormal {
    color-scheme: light normal;
}

#testInvalidNormalDark {
    color-scheme: normal dark;
}

#testInvalidLightDarkLight {
    color-scheme: light dark light;
}

#testInvalidNumber {
    color-scheme: 42;
}

#testInvalidString {
    color-scheme: "foo";
}

#testInvalidLightString {
    color-scheme: light "foo";
}
</style>

<div id="testNormal"></div>
<div id="testOnly"></div>
<div id="testLight"></div>
<div id="testDark"></div>
<div id="testLightDark"></div>
<div id="testDarkLight"></div>
<div id="testLightDarkOnly"></div>
<div id="testOnlyDark"></div>
<div id="testLightOnlyDark"></div>
<div id="testLightUnknown"></div>
<div id="testUnknownDarkOnly"></div>

<div id="testInvalidLightNormal"></div>
<div id="testInvalidNormalDark"></div>
<div id="testInvalidLightDarkLight"></div>
<div id="testInvalidNumber"></div>
<div id="testInvalidString"></div>
<div id="testInvalidLightString"></div>

<script>
function test_prop(id, property, expected) {
    assert_equals(window.getComputedStyle(document.getElementById(id)).getPropertyValue(property), expected);
}

test(function() {
    test_prop("testNormal", "color-scheme", "normal");
    test_prop("testOnly", "color-scheme", "light only");
    test_prop("testLight", "color-scheme", "light");
    test_prop("testDark", "color-scheme", "dark");
    test_prop("testLightDark", "color-scheme", "light dark");
    test_prop("testDarkLight", "color-scheme", "light dark");
    test_prop("testLightDarkOnly", "color-scheme", "light dark only");
    test_prop("testOnlyDark", "color-scheme", "dark only");
    test_prop("testLightOnlyDark", "color-scheme", "light dark only");
    test_prop("testLightUnknown", "color-scheme", "light");
    test_prop("testUnknownDarkOnly", "color-scheme", "dark only");
}, "Test valid values");

test(function() {
    test_prop("testInvalidLightNormal", "color-scheme", "normal");
    test_prop("testInvalidNormalDark", "color-scheme", "normal");
    test_prop("testInvalidLightDarkLight", "color-scheme", "normal");
    test_prop("testInvalidNumber", "color-scheme", "normal");
    test_prop("testInvalidString", "color-scheme", "normal");
    test_prop("testInvalidLightString", "color-scheme", "normal");
}, "Test invalid values");
</script>
