<!DOCTYPE html>

<!-- webkit-test-runner [ experimental:DarkModeCSSEnabled=true ] -->

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

<style>
#testAuto {
    color-scheme: auto;
}

#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;
}

#testInvalidLightAuto {
    color-scheme: light auto;
}

#testInvalidAutoDark {
    color-scheme: auto dark;
}

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

#testInvalidNumber {
    color-scheme: 42;
}

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

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

<div id="testAuto"></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="testInvalidLightAuto"></div>
<div id="testInvalidAutoDark"></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("testAuto", "color-scheme", "auto");
    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("testInvalidLightAuto", "color-scheme", "auto");
    test_prop("testInvalidAutoDark", "color-scheme", "auto");
    test_prop("testInvalidLightDarkLight", "color-scheme", "auto");
    test_prop("testInvalidNumber", "color-scheme", "auto");
    test_prop("testInvalidString", "color-scheme", "auto");
    test_prop("testInvalidLightString", "color-scheme", "auto");
}, "Test invalid values");
</script>