| <!DOCTYPE html> |
| |
| <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(id, prop, expected) { |
| assert_equals(window.getComputedStyle(document.getElementById(id)).getPropertyValue(prop), expected); |
| } |
| |
| function test_color_is_black(id) { |
| test_prop("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() { |
| document.body.style.setProperty("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() { |
| document.body.style.setProperty("color-scheme", "dark"); |
| }, "Color schemes changed to dark"); |
| |
| test(function() { |
| test_color_is_black("test1"); |
| }, "Element colors are correct in light color scheme with only dark supported color scheme"); |
| |
| test(function() { |
| document.body.style.setProperty("color-scheme", "light foo"); |
| }, "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 light color scheme with only light supported color scheme 2"); |
| |
| test(function() { |
| document.body.style.setProperty("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 light 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() { |
| test_color_is_black("test1"); |
| }, "Element colors are correct in light color scheme with light and dark supported color scheme via <meta> element"); |
| |
| test(function() { |
| document.body.style.setProperty("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 light 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"); |
| }, "Color schemes changed to light and dark 2"); |
| |
| test(function() { |
| test_color_is_black("test1"); |
| }, "Element colors are correct in light color scheme with light and dark supported color scheme 2"); |
| |
| test(function() { |
| document.body.style.setProperty("color-scheme", "foo dark"); |
| }, "Color schemes changed to a bogus value and dark"); |
| |
| test(function() { |
| test_color_is_black("test1"); |
| }, "Element colors are correct in light color scheme with dark supported color scheme"); |
| </script> |
