2018-11-14 01:15:24 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
<script src="../resources/testharness.js"></script>
|
|
|
|
<script src="../resources/testharnessreport.js"></script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
body {
|
2019-04-17 23:15:01 +00:00
|
|
|
color-scheme: light dark;
|
2018-11-14 01:15:24 +00:00
|
|
|
}
|
2019-02-07 23:34:26 +00:00
|
|
|
|
|
|
|
#test {
|
|
|
|
overflow-x: hidden;
|
|
|
|
overflow-y: scroll;
|
|
|
|
width: 100px;
|
|
|
|
height: 50px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#test-content {
|
|
|
|
width: 100px;
|
|
|
|
height: 100px;
|
|
|
|
}
|
2018-11-14 01:15:24 +00:00
|
|
|
</style>
|
|
|
|
|
2019-02-07 23:34:26 +00:00
|
|
|
<body><div id="test"><div id="test-content"></div></div></body>
|
2018-11-14 01:15:24 +00:00
|
|
|
|
|
|
|
<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() {
|
2019-04-17 23:15:01 +00:00
|
|
|
test_prop(document.body, "color-scheme", "light dark");
|
|
|
|
}, "Body Element color scheme is light and dark");
|
2018-11-14 01:15:24 +00:00
|
|
|
|
|
|
|
test(function() {
|
2019-04-17 23:15:01 +00:00
|
|
|
test_prop(document.documentElement, "color-scheme", "auto");
|
|
|
|
}, "Document Element color scheme is auto");
|
2018-11-14 01:15:24 +00:00
|
|
|
|
|
|
|
test(function() {
|
|
|
|
if (!window.internals)
|
|
|
|
return;
|
|
|
|
assert_equals(internals.scrollbarOverlayStyle(), "light");
|
2019-02-07 23:34:26 +00:00
|
|
|
}, "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");
|
2018-11-14 01:15:24 +00:00
|
|
|
|
|
|
|
test(function() {
|
|
|
|
let styleElement = document.createElement("style");
|
2019-04-17 23:15:01 +00:00
|
|
|
styleElement.textContent = ":root { color-scheme: light }";
|
2018-11-14 01:15:24 +00:00
|
|
|
document.head.appendChild(styleElement);
|
2019-04-17 23:15:01 +00:00
|
|
|
}, "Set color scheme to light on the document element");
|
2018-11-14 01:15:24 +00:00
|
|
|
|
|
|
|
test(function() {
|
2019-04-17 23:15:01 +00:00
|
|
|
test_prop(document.body, "color-scheme", "light dark");
|
2019-09-16 23:53:33 +00:00
|
|
|
}, "Body Element color scheme is light and dark 2");
|
2018-11-14 01:15:24 +00:00
|
|
|
|
|
|
|
test(function() {
|
2019-04-17 23:15:01 +00:00
|
|
|
test_prop(document.documentElement, "color-scheme", "light");
|
|
|
|
}, "Document Element color scheme is light");
|
2018-11-14 01:15:24 +00:00
|
|
|
|
|
|
|
test(function() {
|
|
|
|
if (!window.internals)
|
|
|
|
return;
|
|
|
|
assert_equals(internals.scrollbarOverlayStyle(), "default");
|
2019-02-07 23:34:26 +00:00
|
|
|
}, "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");
|
2019-09-16 23:53:33 +00:00
|
|
|
}, "Element scrollbar overlay style is default 2");
|
2019-02-07 23:34:26 +00:00
|
|
|
|
|
|
|
test(function() {
|
|
|
|
if (!window.internals)
|
|
|
|
return;
|
|
|
|
assert_equals(internals.scrollbarUsingDarkAppearance(document.getElementById("test")), true);
|
2019-09-16 23:53:33 +00:00
|
|
|
}, "Element scrollbar is using dark appearance 2");
|
2018-11-14 01:15:24 +00:00
|
|
|
</script>
|