css/cssom-view/HTMLBody-ScrollArea_quirksmode.html

<html>
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<style type="text/css">
    body {
        border:1px solid black;
        width:200px;
        height:40px;

        padding-bottom:50px;
        padding-right:40px;
    }
    #elemSimple {
        background:yellow;
        width:60px;
        height:30px;
    }
    #elemOverflow {
        background:yellow;
        width:250px;
        height:150px;
    }
</style>
<body id="thebody">
    <div id="thediv"></div>
</body>
<script>
// Testing for html body element's scroll- x, y, width, height behaviour in quirks mode
// https://drafts.csswg.org/cssom-view/#potentially-scrollable
// https://drafts.csswg.org/cssom-view/#dom-element-scrollheight
test(function() {
    // can i get the div element?
    var thediv = document.getElementById("thediv");
    assert_equals(thediv.id, "thediv");
    // can i get the body element?
    var thebody = document.getElementById("thebody");
    assert_equals(thebody.id, "thebody");
}, "Ensure that body element is loaded.")

test(function() {
    document.body.style.overflowY = "hidden";
    assert_equals(document.body.style.overflowY, "hidden", "Could not set document.body.style.overflowY to 'hidden'.");
    document.body.style.overflowY = "scroll";
    assert_equals(document.body.style.overflowY, "scroll", "Could not set document.body.style.overflowY to 'scroll'.");
    document.documentElement.style.overflowY = "scroll";
    assert_equals(document.documentElement.style.overflowY, "scroll", "Could not set document.documentElement.style.overflow to 'scroll'.");
    document.documentElement.style.overflowY = "";
    document.body.style.overflowY = "";
}, "Ensure that style.overflowY can be set properly.")

test(function() {
    assert_equals(document.compatMode, "BackCompat", "Should be in quirks mode.");
}, "document.compatMode should be BackCompat in quirks.")

test(function() {
    var thebody = document.getElementById("thebody");
    assert_equals(thebody.id, "thebody");
    assert_equals(document.scrollingElement, thebody,
                  "scrollingElement in quirks mode should default to body element.");
}, "document.scrollingElement should be body element in quirks.")

test(function() {
    document.documentElement.style.overflowY = "scroll";
    assert_equals(document.documentElement.style.overflowY, "scroll", "Could not set document.documentElement.style.overflowY to 'scroll'.");

    var thebody = document.getElementById("thebody");
    assert_equals(thebody.id, "thebody");
    thebody.style.overflowY="scroll";
    assert_equals(document.body.style.overflowY, "scroll", "Could not set document.body.style.overflowY to 'scroll'.");
    // Body and document now both have overflow != visible
    // => body `potentially scrollable`

    // In quirks, when body is not `potentially scrollable`
    //    document.scrollingElment returns the body, otherwise null
    // https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement
    assert_equals(document.scrollingElement, null,
                  "In quirks, we would expect null here (because of potentially scrollable body)");
}, "scrollingElement in quirks should be null when body is potentially scrollable.")

test(function() {
    document.documentElement.style.overflowY = "visible";
    assert_equals(document.documentElement.style.overflowY, "visible");
    assert_equals(document.scrollingElement, document.body);

    document.documentElement.style.overflowY = "scroll";
    assert_equals(document.documentElement.style.overflowY, "scroll");
    document.body.style.overflowY = "visible";
    assert_equals(document.body.style.overflowY, "visible");
    assert_equals(document.scrollingElement, document.body);

    document.documentElement.style.overflowY = "visible";
    assert_equals(document.documentElement.style.overflowY, "visible");
    assert_equals(document.scrollingElement, document.body);
}, "scrollingElement in quirks should be body if any of document and body has a visible overflow.")

// no overflow property set to `visible` => pot. scrollable
test(function() {
    document.body.style.overflowY = "scroll";
    assert_equals(document.body.style.overflowY, "scroll");
    document.documentElement.style.overflowY = "scroll";
    assert_equals(document.documentElement.style.overflowY, "scroll");

    assert_greater_than(window.innerHeight, 400, "Window not large enough for valid test run.");
    assert_not_equals(document.body.scrollHeight, window.innerHeight);

    var elem = document.getElementById("thediv");
    elem.style.height = "170px";
    assert_equals(elem.style.height, "170px");

    oldScrollHeight =  document.body.scrollHeight;
    elem.style.height = "190px";
    assert_equals(elem.style.height, "190px");
    assert_equals(document.body.scrollHeight, oldScrollHeight+20);
}, "When body potentially scrollable, document.body.scrollHeight changes when changing the height of the body content in quirks.")

// any use of `visible` => not potentially scrollable
function testNotPotScrollable (document_overflow, body_overflow) {
    document.body.style.overflowY = body_overflow;
    assert_equals(document.body.style.overflowY, body_overflow);
    document.documentElement.style.overflowY = document_overflow;
    assert_equals(document.documentElement.style.overflowY, document_overflow);

    assert_greater_than(window.innerHeight, 400, "Window not large enough for valid test run.");
    assert_equals(document.body.scrollHeight, window.innerHeight);

    var elem = document.getElementById("thediv");
    elem.style.height = "170px";
    assert_equals(elem.style.height, "170px");
    assert_equals(window.innerHeight, document.body.scrollHeight);

    oldScrollHeight =  document.body.scrollHeight;
    elem.style.height = "190px";
    assert_equals(elem.style.height, "190px");
    assert_equals(window.innerHeight, document.body.scrollHeight);
    assert_equals(document.body.scrollHeight, oldScrollHeight);
}

tests = [["visible", "scroll"], ["scroll", "visible"], ["visible", "visible"]];
for (var i = 0; i < tests.length; i++) {
    test( function () {
        testNotPotScrollable (tests[i][0], tests[i][1]);
    }, "When body not potentially scrollable, document.body.scrollHeight always equals window.innerHeight in quirks. (cond. "+tests[i][0]+", "+tests[i][1]+")")
}
</script>
</html>