Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/HTMLBody-ScrollArea_quirksmode.html - WPT Dashboard Interop Dashboard
<html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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
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
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>