127 lines
2.9 KiB
HTML
127 lines
2.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<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>
|