<!DOCTYPE html>

<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 2");

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 2");

test(function() {
    if (!window.internals)
        return;
    assert_equals(internals.scrollbarUsingDarkAppearance(document.getElementById("test")), true);
}, "Element scrollbar is using dark appearance 2");
</script>