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