| <!DOCTYPE html> |
| |
| <!-- webkit-test-runner [ experimental:DarkModeCSSEnabled=true ] --> |
| |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <style> |
| body { |
| color-scheme: light dark; |
| } |
| |
| #test { |
| overflow-x: hidden; |
| overflow-y: scroll; |
| width: 100px; |
| height: 50px; |
| } |
| |
| #test-content { |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| |
| <body><div id="test"><div id="test-content"></div></div></body> |
| |
| <script> |
| function test_prop(element, prop, expected) { |
| assert_equals(window.getComputedStyle(element).getPropertyValue(prop), expected); |
| } |
| |
| test(function() { |
| if (!window.internals) |
| return; |
| internals.settings.setUseDarkAppearance(true); |
| }, "Set dark appearance"); |
| |
| test(function() { |
| if (!window.internals) |
| return; |
| internals.setViewIsTransparent(true); |
| }, "Set view to transparent"); |
| |
| test(function() { |
| test_prop(document.body, "color-scheme", "light dark"); |
| }, "Body Element color scheme is light and dark"); |
| |
| test(function() { |
| test_prop(document.documentElement, "color-scheme", "auto"); |
| }, "Document Element color scheme is auto"); |
| |
| test(function() { |
| if (!window.internals) |
| return; |
| assert_equals(internals.scrollbarOverlayStyle(), "light"); |
| }, "Document scrollbar overlay style is light"); |
| |
| test(function() { |
| if (!window.internals) |
| return; |
| assert_equals(internals.scrollbarUsingDarkAppearance(), true); |
| }, "Document scrollbar is using dark appearance"); |
| |
| test(function() { |
| if (!window.internals) |
| return; |
| assert_equals(internals.scrollbarOverlayStyle(document.getElementById("test")), "default"); |
| }, "Element scrollbar overlay style is default"); |
| |
| test(function() { |
| if (!window.internals) |
| return; |
| assert_equals(internals.scrollbarUsingDarkAppearance(document.getElementById("test")), true); |
| }, "Element scrollbar is using dark appearance"); |
| |
| test(function() { |
| let styleElement = document.createElement("style"); |
| styleElement.textContent = ":root { color-scheme: light }"; |
| document.head.appendChild(styleElement); |
| }, "Set color scheme to light on the document element"); |
| |
| test(function() { |
| test_prop(document.body, "color-scheme", "light dark"); |
| }, "Body Element color scheme is light and dark"); |
| |
| test(function() { |
| test_prop(document.documentElement, "color-scheme", "light"); |
| }, "Document Element color scheme is light"); |
| |
| test(function() { |
| if (!window.internals) |
| return; |
| assert_equals(internals.scrollbarOverlayStyle(), "default"); |
| }, "Document scrollbar overlay style is default"); |
| |
| test(function() { |
| if (!window.internals) |
| return; |
| assert_equals(internals.scrollbarUsingDarkAppearance(), false); |
| }, "Document scrollbar is using light appearance"); |
| |
| test(function() { |
| if (!window.internals) |
| return; |
| assert_equals(internals.scrollbarOverlayStyle(document.getElementById("test")), "default"); |
| }, "Element scrollbar overlay style is default"); |
| |
| test(function() { |
| if (!window.internals) |
| return; |
| assert_equals(internals.scrollbarUsingDarkAppearance(document.getElementById("test")), true); |
| }, "Element scrollbar is using dark appearance"); |
| </script> |
