blob: bb763c39875dfa676ca5a5f8222ed732a823f500 [file] [log] [blame]
<!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>