| <!DOCTYPE html> |
| |
| <!-- webkit-test-runner [ experimental:DarkModeCSSEnabled=true ] --> |
| |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <style> |
| #test1 { |
| color: text; |
| } |
| </style> |
| |
| <div id="test1"></div> |
| |
| <script> |
| function test_prop(element, prop, expected) { |
| assert_equals(window.getComputedStyle(element).getPropertyValue(prop), expected); |
| } |
| |
| function test_color_is_white(id) { |
| test_prop(document.getElementById("test1"), "color", "rgb(255, 255, 255)"); |
| } |
| |
| function test_color_is_black(id) { |
| test_prop(document.getElementById("test1"), "color", "rgb(0, 0, 0)"); |
| } |
| |
| test(function() { |
| // The semantic text color should be black. |
| test_color_is_black("test1"); |
| }, "Element colors are correct in light color scheme with only light supported color scheme"); |
| |
| test(function() { |
| if (window.internals) |
| internals.settings.setUseDarkAppearance(true); |
| }, "Dark color scheme enabled"); |
| |
| test(function() { |
| // The semantic text color should be black, and not change. |
| test_color_is_black("test1"); |
| }, "Element colors are correct in dark color scheme with only light supported color scheme"); |
| |
| test(function() { |
| if (window.internals) |
| internals.settings.setUseDarkAppearance(false); |
| }, "Light color scheme enabled"); |
| |
| test(function() { |
| document.body.style.setProperty("color-scheme", "light dark"); |
| test_prop(document.body, "color-scheme", "light dark"); |
| }, "Color schemes changed to light and dark"); |
| |
| test(function() { |
| // The semantic text color should be black. |
| test_color_is_black("test1"); |
| }, "Element colors are correct in light color scheme with light and dark supported color scheme"); |
| |
| test(function() { |
| if (window.internals) |
| internals.settings.setUseDarkAppearance(true); |
| }, "Dark color scheme enabled"); |
| |
| test(function() { |
| // The semantic text color should be white. |
| test_color_is_white("test1"); |
| }, "Element colors are correct in dark color scheme with light and dark supported color scheme"); |
| |
| test(function() { |
| if (window.internals) |
| internals.settings.setUseDarkAppearance(false); |
| }, "Light color scheme enabled"); |
| |
| test(function() { |
| document.body.style.setProperty("color-scheme", "dark"); |
| test_prop(document.body, "color-scheme", "dark"); |
| }, "Color schemes changed to dark"); |
| |
| test(function() { |
| // The semantic text color should be white. |
| test_color_is_white("test1"); |
| }, "Element colors are correct in light color scheme with only dark supported color scheme"); |
| |
| test(function() { |
| if (window.internals) |
| internals.settings.setUseDarkAppearance(true); |
| }, "Dark color scheme enabled"); |
| |
| test(function() { |
| // The semantic text color should be white still. |
| test_color_is_white("test1"); |
| }, "Element colors are correct in dark color scheme with only dark supported color scheme"); |
| |
| test(function() { |
| document.body.style.setProperty("color-scheme", "light foo"); |
| test_prop(document.body, "color-scheme", "light"); |
| }, "Color schemes changed to light and a bogus value"); |
| |
| test(function() { |
| // The semantic text color should be black again. |
| test_color_is_black("test1"); |
| }, "Element colors are correct in dark color scheme with only light supported color scheme"); |
| |
| test(function() { |
| document.body.style.setProperty("color-scheme", "auto"); |
| test_prop(document.body, "color-scheme", "auto"); |
| }, "Color schemes changed to auto value"); |
| |
| test(function() { |
| // The semantic text color should be black still. |
| test_color_is_black("test1"); |
| }, "Element colors are correct in dark color scheme with implicit light supported color scheme"); |
| |
| test(function() { |
| let meta = document.createElement("meta"); |
| meta.id = "test-meta"; |
| meta.name = "color-scheme"; |
| meta.content = "light dark"; |
| document.head.appendChild(meta); |
| }, "Color schemes changed to light and dark via <meta> element"); |
| |
| test(function() { |
| // The semantic text color should be white now. |
| test_color_is_white("test1"); |
| }, "Element colors are correct in dark color scheme with light and dark supported color scheme via <meta> element"); |
| |
| test(function() { |
| document.body.style.setProperty("color-scheme", "light"); |
| test_prop(document.body, "color-scheme", "light"); |
| }, "Color schemes changed to light value"); |
| |
| test(function() { |
| // The semantic text color should be black again. |
| test_color_is_black("test1"); |
| }, "Element colors are correct in dark color scheme with explicit light, overriding <meta> element"); |
| |
| test(function() { |
| document.getElementById("test-meta").remove(); |
| }, "Remove test meta element"); |
| |
| test(function() { |
| document.body.style.setProperty("color-scheme", "light dark"); |
| test_prop(document.body, "color-scheme", "light dark"); |
| }, "Color schemes changed to light and dark"); |
| |
| test(function() { |
| // The semantic text color should be white now. |
| test_color_is_white("test1"); |
| }, "Element colors are correct in dark color scheme with light and dark supported color scheme"); |
| |
| test(function() { |
| document.body.style.setProperty("color-scheme", "foo dark"); |
| test_prop(document.body, "color-scheme", "dark"); |
| }, "Color schemes changed to a bogus value and dark"); |
| |
| test(function() { |
| // The semantic text color should be white still. |
| test_color_is_white("test1"); |
| }, "Element colors are correct in dark color scheme with dark supported color scheme"); |
| </script> |
