scrolling-quirks-vs-nonquirks.html (9392B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>cssom-view - scrolling quirks VS nonquirks mode</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 iframe { 8 width: 300px; 9 height: 500px; 10 } 11 </style> 12 <iframe id="quirksframe"></iframe> 13 <iframe id="nonquirksframe"></iframe> 14 <div id="log"></div> 15 <script> 16 function setBodyContent(body) { 17 // Hide scrollbars and remove body margin to make measures more reliable. 18 body.style.overflow = "hidden"; 19 body.style.margin = 0; 20 21 // Add an orange border to the body. 22 body.style.borderWidth = "10px 0px 0px 20px"; 23 body.style.borderColor = "orange"; 24 body.style.borderStyle = "solid"; 25 26 // Create a 700x900 box with a green border. 27 body.innerHTML = "<div id='content' style='border-width: 30px 0px 0px 40px; border-style: solid; border-color: green; width: 660px; height: 870px; background: linear-gradient(135deg, red, blue);'></div>"; 28 } 29 30 var quirksModeTest = async_test("Execution of tests in quirks mode"); 31 var quirksFrame = document.getElementById("quirksframe"); 32 quirksFrame.onload = function() { 33 var doc = quirksFrame.contentDocument; 34 setBodyContent(doc.body); 35 var content = doc.getElementById("content"); 36 37 quirksModeTest.step(function () { 38 assert_equals(doc.compatMode, "BackCompat", "Should be in quirks mode."); 39 }); 40 41 test(function () { 42 assert_equals(doc.scrollingElement, doc.body, "scrollingElement should be HTML body"); 43 }, "scrollingElement in quirks mode"); 44 45 test(function () { 46 doc.documentElement.scroll(50, 60); 47 assert_equals(doc.documentElement.scrollLeft, 0, "scrollLeft should be 0"); 48 assert_equals(doc.documentElement.scrollTop, 0, "scrollTop should be 0"); 49 }, "scroll() on the root element in quirks mode"); 50 51 test(function () { 52 doc.documentElement.scrollBy(10, 20); 53 assert_equals(doc.documentElement.scrollLeft, 0, "scrollLeft should be 0"); 54 assert_equals(doc.documentElement.scrollTop, 0, "scrollTop should be 0"); 55 }, "scrollBy() on the root element in quirks mode"); 56 57 test(function () { 58 doc.documentElement.scrollLeft = 70; 59 doc.documentElement.scrollTop = 80; 60 assert_equals(doc.documentElement.scrollLeft, 0, "scrollLeft should be 0"); 61 assert_equals(doc.documentElement.scrollTop, 0, "scrollTop should be 0"); 62 }, "scrollLeft/scrollTop on the root element in quirks mode"); 63 64 test(function () { 65 assert_equals(doc.documentElement.scrollWidth, 720, "scrollWidth should be 720"); 66 assert_equals(doc.documentElement.scrollHeight, 910, "scrollHeight should be 910"); 67 }, "scrollWidth/scrollHeight on the root element in quirks mode"); 68 69 test(function () { 70 assert_equals(doc.documentElement.clientWidth, 300, "clientWidth should be 300"); 71 assert_equals(doc.documentElement.clientHeight, 910, "clientHeight should be 910"); 72 }, "clientWidth/clientHeight on the root element in quirks mode"); 73 74 test(function () { 75 doc.body.scroll(90, 100); 76 assert_equals(doc.body.scrollLeft, 90, "scrollLeft should be 90"); 77 assert_equals(doc.body.scrollTop, 100, "scrollTop should be 100"); 78 }, "scroll() on the HTML body element in quirks mode"); 79 80 test(function () { 81 doc.body.scrollBy(10, 20); 82 assert_equals(doc.body.scrollLeft, 100, "scrollLeft should be 100"); 83 assert_equals(doc.body.scrollTop, 120, "scrollTop should be 120"); 84 }, "scrollBy() on the HTML body element in quirks mode"); 85 86 test(function () { 87 doc.body.scrollLeft = 120; 88 doc.body.scrollTop = 110; 89 assert_equals(doc.body.scrollLeft, 120, "scrollLeft should be 120"); 90 assert_equals(doc.body.scrollTop, 110, "scrollTop should be 110"); 91 }, "scrollLeft/scrollTop on the HTML body element in quirks mode"); 92 93 test(function () { 94 assert_equals(doc.body.scrollWidth, 720, "scrollWidth should be 720"); 95 assert_equals(doc.body.scrollHeight, 910, "scrollHeight should be 910"); 96 }, "scrollWidth/scrollHeight on the HTML body element in quirks mode"); 97 98 test(function () { 99 assert_equals(doc.body.clientWidth, 300, "clientWidth should be 300"); 100 assert_equals(doc.body.clientHeight, 500, "clientHeight should be 500"); 101 }, "clientWidth/clientHeight on the HTML body element in quirks mode"); 102 103 test(function () { 104 doc.scrollingElement.scroll(0, 0); 105 content.scrollLeft = 130; 106 content.scrollTop = 140; 107 assert_equals(content.scrollLeft, 0, "scrollLeft should be 0"); 108 assert_equals(content.scrollTop, 0, "scrollTop should be 0"); 109 }, "scrollLeft/scrollRight of the content in quirks mode"); 110 111 test(function () { 112 assert_equals(content.scrollWidth, 660, "scrollWidth should be 660"); 113 assert_equals(content.scrollHeight, 870, "scrollHeight should be 870"); 114 }, "scrollWidth/scrollHeight of the content in quirks mode"); 115 116 test(function () { 117 assert_equals(content.clientWidth, 660, "clientWidth should be 660"); 118 assert_equals(content.clientHeight, 870, "clientHeight should be 870"); 119 }, "clientWidth/clientHeight of the content in quirks mode"); 120 121 quirksModeTest.done(); 122 } 123 quirksFrame.src = URL.createObjectURL(new Blob([""], { type: "text/html" })); 124 125 var nonQuirksModeTest = async_test("Execution of tests in non-quirks mode"); 126 var nonQuirksFrame = document.getElementById("nonquirksframe"); 127 nonQuirksFrame.onload = function() { 128 var doc = nonQuirksFrame.contentDocument; 129 setBodyContent(doc.body); 130 var content = doc.getElementById("content"); 131 132 nonQuirksModeTest.step(function() { 133 assert_equals(doc.compatMode, "CSS1Compat", "Should be in standards mode."); 134 }); 135 136 test(function () { 137 assert_equals(doc.scrollingElement, doc.documentElement, "scrollingElement should be documentElement"); 138 }, "scrollingElement in non-quirks mode"); 139 140 test(function () { 141 doc.documentElement.scroll(50, 60); 142 assert_equals(doc.documentElement.scrollLeft, 50, "scrollLeft should be 50"); 143 assert_equals(doc.documentElement.scrollTop, 60, "scrollTop should be 60"); 144 }, "scroll() on the root element in non-quirks mode"); 145 146 test(function () { 147 doc.documentElement.scrollBy(10, 20); 148 assert_equals(doc.documentElement.scrollLeft, 60, "scrollLeft should be 60"); 149 assert_equals(doc.documentElement.scrollTop, 80, "scrollTop should be 80"); 150 }, "scrollBy() on the root element in non-quirks mode"); 151 152 test(function () { 153 doc.documentElement.scrollLeft = 70; 154 doc.documentElement.scrollTop = 80; 155 assert_equals(doc.documentElement.scrollLeft, 70, "scrollLeft should be 70"); 156 assert_equals(doc.documentElement.scrollTop, 80, "scrollTop should be 80"); 157 }, "scrollLeft/scrollTop on the root element in non-quirks mode"); 158 159 test(function () { 160 assert_equals(doc.documentElement.scrollWidth, 720, "scrollWidth should be 720"); 161 assert_equals(doc.documentElement.scrollHeight, 910, "scrollHeight should be 910"); 162 }, "scrollWidth/scrollHeight on the root element in non-quirks mode"); 163 164 test(function () { 165 assert_equals(doc.documentElement.clientWidth, 300, "clientWidth should be 300"); 166 assert_equals(doc.documentElement.clientHeight, 500, "clientHeight should be 500"); 167 }, "clientWidth/clientHeight on the root element in non-quirks mode"); 168 169 test(function () { 170 doc.body.scroll(90, 100); 171 assert_equals(doc.body.scrollLeft, 0, "scrollLeft should be 0"); 172 assert_equals(doc.body.scrollTop, 0, "scrollTop should be 0"); 173 }, "scroll() on the HTML body element in non-quirks mode"); 174 175 test(function () { 176 doc.body.scrollBy(10, 20); 177 assert_equals(doc.body.scrollLeft, 0, "scrollLeft should be 0"); 178 assert_equals(doc.body.scrollTop, 0, "scrollTop should be 0"); 179 }, "scrollBy() on the HTML body element in non-quirks mode"); 180 181 test(function () { 182 doc.body.scrollLeft = 120; 183 doc.body.scrollTop = 110; 184 assert_equals(doc.body.scrollLeft, 0, "scrollLeft should be 0"); 185 assert_equals(doc.body.scrollTop, 0, "scrollTop should be 0"); 186 }, "scrollLeft/scrollTop on the HTML body element in non-quirks mode"); 187 188 test(function () { 189 assert_equals(doc.body.scrollWidth, 700, "scrollWidth should be 700"); 190 assert_equals(doc.body.scrollHeight, 900, "scrollHeight should be 900"); 191 }, "scrollWidth/scrollHeight on the HTML body element in non-quirks mode"); 192 193 test(function () { 194 assert_equals(doc.body.clientWidth, 280, "clientWidth should be 280"); 195 assert_equals(doc.body.clientHeight, 900, "clientHeight should be 900"); 196 }, "clientWidth/clientHeight on the HTML body element in non-quirks mode"); 197 198 test(function () { 199 doc.scrollingElement.scroll(0, 0); 200 content.scrollLeft = 130; 201 content.scrollTop = 140; 202 assert_equals(content.scrollLeft, 0, "scrollLeft should be 0"); 203 assert_equals(content.scrollTop, 0, "scrollTop should be 0"); 204 }, "scrollLeft/scrollRight of the content in non-quirks mode"); 205 206 test(function () { 207 assert_equals(content.scrollWidth, 660, "scrollWidth should be 660"); 208 assert_equals(content.scrollHeight, 870, "scrollHeight should be 870"); 209 }, "scrollWidth/scrollHeight of the content in non-quirks mode"); 210 211 test(function () { 212 assert_equals(content.clientWidth, 660, "clientWidth should be "); 213 assert_equals(content.clientHeight, 870, "clientHeight should be 870"); 214 }, "clientWidth/clientHeight of the content in non-quirks mode"); 215 216 nonQuirksModeTest.done(); 217 } 218 nonQuirksFrame.src = URL.createObjectURL(new Blob(["<!doctype html>"], { type: "text/html" })); 219 220 </script>