<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'."); }, "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>