LayoutTests/imported/w3c/web-platform-tests/css/cssom-view/HTMLBody-ScrollArea_quirksmode.html - WebKit - Git at Google

 <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>
	<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>