HTMLBody-ScrollArea_quirksmode.html (6520B)
1 <html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <script src="/resources/testharness.js" type="text/javascript"></script> 4 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 5 <style type="text/css"> 6 body { 7 border:1px solid black; 8 width:200px; 9 height:40px; 10 11 padding-bottom:50px; 12 padding-right:40px; 13 } 14 #elemSimple { 15 background:yellow; 16 width:60px; 17 height:30px; 18 } 19 #elemOverflow { 20 background:yellow; 21 width:250px; 22 height:150px; 23 } 24 </style> 25 <body id="thebody"> 26 <div id="thediv"></div> 27 </body> 28 <script> 29 // Testing for html body element's scroll- x, y, width, height behaviour in quirks mode 30 // https://drafts.csswg.org/cssom-view/#potentially-scrollable 31 // https://drafts.csswg.org/cssom-view/#dom-element-scrollheight 32 test(function() { 33 // can i get the div element? 34 var thediv = document.getElementById("thediv"); 35 assert_equals(thediv.id, "thediv"); 36 // can i get the body element? 37 var thebody = document.getElementById("thebody"); 38 assert_equals(thebody.id, "thebody"); 39 }, "Ensure that body element is loaded.") 40 41 test(function() { 42 document.body.style.overflowY = "hidden"; 43 assert_equals(document.body.style.overflowY, "hidden", "Could not set document.body.style.overflowY to 'hidden'."); 44 document.body.style.overflowY = "scroll"; 45 assert_equals(document.body.style.overflowY, "scroll", "Could not set document.body.style.overflowY to 'scroll'."); 46 document.documentElement.style.overflowY = "scroll"; 47 assert_equals(document.documentElement.style.overflowY, "scroll", "Could not set document.documentElement.style.overflow to 'scroll'."); 48 document.documentElement.style.overflowY = ""; 49 document.body.style.overflowY = ""; 50 }, "Ensure that style.overflowY can be set properly.") 51 52 test(function() { 53 assert_equals(document.compatMode, "BackCompat", "Should be in quirks mode."); 54 }, "document.compatMode should be BackCompat in quirks.") 55 56 test(function() { 57 var thebody = document.getElementById("thebody"); 58 assert_equals(thebody.id, "thebody"); 59 assert_equals(document.scrollingElement, thebody, 60 "scrollingElement in quirks mode should default to body element."); 61 }, "document.scrollingElement should be body element in quirks.") 62 63 test(function() { 64 document.documentElement.style.overflowY = "scroll"; 65 assert_equals(document.documentElement.style.overflowY, "scroll", "Could not set document.documentElement.style.overflowY to 'scroll'."); 66 67 var thebody = document.getElementById("thebody"); 68 assert_equals(thebody.id, "thebody"); 69 thebody.style.overflowY="scroll"; 70 assert_equals(document.body.style.overflowY, "scroll", "Could not set document.body.style.overflowY to 'scroll'."); 71 // Body and document now both have overflow != visible 72 // => body `potentially scrollable` 73 74 // In quirks, when body is not `potentially scrollable` 75 // document.scrollingElment returns the body, otherwise null 76 // https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement 77 assert_equals(document.scrollingElement, null, 78 "In quirks, we would expect null here (because of potentially scrollable body)"); 79 }, "scrollingElement in quirks should be null when body is potentially scrollable.") 80 81 test(function() { 82 document.documentElement.style.overflowY = "visible"; 83 assert_equals(document.documentElement.style.overflowY, "visible"); 84 assert_equals(document.scrollingElement, document.body); 85 86 document.documentElement.style.overflowY = "scroll"; 87 assert_equals(document.documentElement.style.overflowY, "scroll"); 88 document.body.style.overflowY = "visible"; 89 assert_equals(document.body.style.overflowY, "visible"); 90 assert_equals(document.scrollingElement, document.body); 91 92 document.documentElement.style.overflowY = "visible"; 93 assert_equals(document.documentElement.style.overflowY, "visible"); 94 assert_equals(document.scrollingElement, document.body); 95 }, "scrollingElement in quirks should be body if any of document and body has a visible overflow.") 96 97 // no overflow property set to `visible` => pot. scrollable 98 test(function() { 99 document.body.style.overflowY = "scroll"; 100 assert_equals(document.body.style.overflowY, "scroll"); 101 document.documentElement.style.overflowY = "scroll"; 102 assert_equals(document.documentElement.style.overflowY, "scroll"); 103 104 assert_greater_than(window.innerHeight, 400, "Window not large enough for valid test run."); 105 assert_not_equals(document.body.scrollHeight, window.innerHeight); 106 107 var elem = document.getElementById("thediv"); 108 elem.style.height = "170px"; 109 assert_equals(elem.style.height, "170px"); 110 111 oldScrollHeight = document.body.scrollHeight; 112 elem.style.height = "190px"; 113 assert_equals(elem.style.height, "190px"); 114 assert_equals(document.body.scrollHeight, oldScrollHeight+20); 115 }, "When body potentially scrollable, document.body.scrollHeight changes when changing the height of the body content in quirks.") 116 117 // any use of `visible` => not potentially scrollable 118 function testNotPotScrollable (document_overflow, body_overflow) { 119 document.body.style.overflowY = body_overflow; 120 assert_equals(document.body.style.overflowY, body_overflow); 121 document.documentElement.style.overflowY = document_overflow; 122 assert_equals(document.documentElement.style.overflowY, document_overflow); 123 124 assert_greater_than(window.innerHeight, 400, "Window not large enough for valid test run."); 125 assert_equals(document.body.scrollHeight, window.innerHeight); 126 127 var elem = document.getElementById("thediv"); 128 elem.style.height = "170px"; 129 assert_equals(elem.style.height, "170px"); 130 assert_equals(window.innerHeight, document.body.scrollHeight); 131 132 oldScrollHeight = document.body.scrollHeight; 133 elem.style.height = "190px"; 134 assert_equals(elem.style.height, "190px"); 135 assert_equals(window.innerHeight, document.body.scrollHeight); 136 assert_equals(document.body.scrollHeight, oldScrollHeight); 137 } 138 139 tests = [["visible", "scroll"], ["scroll", "visible"], ["visible", "visible"]]; 140 for (var i = 0; i < tests.length; i++) { 141 test( function () { 142 testNotPotScrollable (tests[i][0], tests[i][1]); 143 }, "When body not potentially scrollable, document.body.scrollHeight always equals window.innerHeight in quirks. (cond. "+tests[i][0]+", "+tests[i][1]+")") 144 } 145 </script> 146 </html>