| <html> |
| <head> |
| <style> |
| div { |
| height: 9999px; |
| width: 9999px; |
| } |
| </style> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <script> |
| jsTestIsAsync = true; |
| |
| function runTest() { |
| description('Test the "scrollLeft" properties on the body element in quirks mode.'); |
| |
| debug("Initial values"); |
| shouldBe("document.body.scrollLeft", "0"); |
| shouldBe("document.body.scrollTop", "0"); |
| shouldBe("document.documentElement.scrollLeft", "0"); |
| shouldBe("document.documentElement.scrollTop", "0"); |
| shouldBe("window.scrollX", "0"); |
| shouldBe("window.scrollY", "0"); |
| |
| debug(""); |
| debug("Let set the scrollLeft value on the main body element (document.body), in quirks mode, this should change the main frame's scroll position."); |
| shouldBe("document.body.scrollLeft = 42", "42"); |
| shouldBe("document.body.scrollLeft", "42"); |
| shouldBe("document.body.scrollTop", "0"); |
| shouldBe("document.documentElement.scrollLeft", "0"); |
| shouldBe("document.documentElement.scrollTop", "0"); |
| shouldBe("window.scrollX", "42"); |
| shouldBe("window.scrollY", "0"); |
| |
| debug(""); |
| debug("Change scrollX, this should have no effect on the horizontal scrolling"); |
| shouldBe("window.scrollBy(0, 21)", "undefined"); |
| shouldBe("document.body.scrollLeft", "42"); |
| shouldBe("document.body.scrollTop", "21"); |
| shouldBe("document.documentElement.scrollLeft", "0"); |
| shouldBe("document.documentElement.scrollTop", "0"); |
| shouldBe("window.scrollX", "42"); |
| shouldBe("window.scrollY", "21"); |
| |
| debug(""); |
| debug("Now we create a body element, completely detached from the DOM tree. This should not change the scroll position in any way."); |
| floatingBody = document.createElement('body'); |
| shouldBe("floatingBody.scrollLeft", "0"); |
| shouldBe("floatingBody.scrollTop", "0"); |
| shouldBe("document.body.scrollLeft", "42"); |
| shouldBe("document.body.scrollTop", "21"); |
| shouldBe("document.documentElement.scrollLeft", "0"); |
| shouldBe("document.documentElement.scrollTop", "0"); |
| shouldBe("window.scrollX", "42"); |
| shouldBe("window.scrollY", "21"); |
| |
| debug(""); |
| debug("Setting the scroll position on that detached body element should not affect the main frame since it is not the first body element of the document."); |
| shouldBe("floatingBody.scrollLeft = 654", "654"); |
| shouldBe("floatingBody.scrollLeft", "0"); |
| shouldBe("floatingBody.scrollTop", "0"); |
| shouldBe("document.body.scrollLeft", "42"); |
| shouldBe("document.body.scrollTop", "21"); |
| shouldBe("document.documentElement.scrollLeft", "0"); |
| shouldBe("document.documentElement.scrollTop", "0"); |
| shouldBe("window.scrollX", "42"); |
| shouldBe("window.scrollY", "21"); |
| |
| secondSiblingBody = document.createElement('body'); |
| document.documentElement.appendChild(secondSiblingBody); |
| debug(""); |
| debug("We add a new body element after the first body element, this should have no impact on the state."); |
| shouldBe("secondSiblingBody.scrollLeft", "0"); |
| shouldBe("secondSiblingBody.scrollTop", "0"); |
| shouldBe("document.body.scrollLeft", "42"); |
| shouldBe("document.body.scrollTop", "21"); |
| shouldBe("document.documentElement.scrollLeft", "0"); |
| shouldBe("document.documentElement.scrollTop", "0"); |
| shouldBe("window.scrollX", "42"); |
| shouldBe("window.scrollY", "21"); |
| |
| debug(""); |
| debug("Setting a \"scrollTop\" on secondSiblingBody should not affect the main frame."); |
| shouldBe("secondSiblingBody.scrollLeft = 987", "987"); |
| shouldBe("secondSiblingBody.scrollLeft", "0"); |
| shouldBe("secondSiblingBody.scrollTop", "0"); |
| shouldBe("document.body.scrollLeft", "42"); |
| shouldBe("document.body.scrollTop", "21"); |
| shouldBe("document.documentElement.scrollLeft", "0"); |
| shouldBe("document.documentElement.scrollTop", "0"); |
| shouldBe("window.scrollX", "42"); |
| shouldBe("window.scrollY", "21"); |
| |
| bodyChildOfMainBody = document.createElement('body'); |
| document.body.appendChild(bodyChildOfMainBody); |
| debug(""); |
| debug("We add a new body element inside the first body element, this should have no impact on the state."); |
| shouldBe("bodyChildOfMainBody.scrollLeft", "0"); |
| shouldBe("bodyChildOfMainBody.scrollTop", "0"); |
| shouldBe("document.body.scrollLeft", "42"); |
| shouldBe("document.body.scrollTop", "21"); |
| shouldBe("document.documentElement.scrollLeft", "0"); |
| shouldBe("document.documentElement.scrollTop", "0"); |
| shouldBe("window.scrollX", "42"); |
| shouldBe("window.scrollY", "21"); |
| |
| debug(""); |
| debug("Setting a \"scrollTop\" on bodyChildOfMainBody should not affect the main frame."); |
| shouldBe("bodyChildOfMainBody.scrollLeft = 57", "57"); |
| shouldBe("bodyChildOfMainBody.scrollLeft", "0"); |
| shouldBe("bodyChildOfMainBody.scrollTop", "0"); |
| shouldBe("document.body.scrollLeft", "42"); |
| shouldBe("document.body.scrollTop", "21"); |
| shouldBe("document.documentElement.scrollLeft", "0"); |
| shouldBe("document.documentElement.scrollTop", "0"); |
| shouldBe("window.scrollX", "42"); |
| shouldBe("window.scrollY", "21"); |
| |
| debug(""); |
| debug("Now we insert a new body element *before* the existing one. It will replace the existing element as the first body element of the document."); |
| oldBodyElement = document.body; |
| newMainBody = document.createElement('body'); |
| document.documentElement.insertBefore(newMainBody, oldBodyElement); |
| shouldBeTrue("document.body === newMainBody"); |
| shouldBeTrue("document.body !== oldBodyElement"); |
| |
| debug("Since we are in quirks mode, the new body element gets the scroll position from the frame, and the old one lose its scroll position."); |
| shouldBe("oldBodyElement.scrollLeft", "0"); |
| shouldBe("oldBodyElement.scrollTop", "0"); |
| shouldBe("document.body.scrollLeft", "42"); |
| shouldBe("document.body.scrollTop", "21"); |
| shouldBe("document.documentElement.scrollLeft", "0"); |
| shouldBe("document.documentElement.scrollTop", "0"); |
| shouldBe("window.scrollX", "42"); |
| shouldBe("window.scrollY", "21"); |
| |
| debug(""); |
| debug("Scrolling that new body should work as expected."); |
| shouldBe("document.body.scrollLeft = 68", "68"); |
| shouldBe("oldBodyElement.scrollLeft = 894", "894"); |
| |
| shouldBe("oldBodyElement.scrollLeft", "0"); |
| shouldBe("oldBodyElement.scrollTop", "0"); |
| shouldBe("document.body.scrollLeft", "68"); |
| shouldBe("document.body.scrollTop", "21"); |
| shouldBe("document.documentElement.scrollLeft", "0"); |
| shouldBe("document.documentElement.scrollTop", "0"); |
| shouldBe("window.scrollX", "68"); |
| shouldBe("window.scrollY", "21"); |
| |
| debug(""); |
| debug("Scrolling the main frame should not require a renderer."); |
| shouldBe("document.body.style.display = 'none'", "'none'"); |
| shouldBe("document.body.scrollLeft = 54", "54"); |
| shouldBe("oldBodyElement.scrollLeft", "0"); |
| shouldBe("oldBodyElement.scrollTop", "0"); |
| shouldBe("document.body.scrollLeft", "54"); |
| shouldBe("document.body.scrollTop", "21"); |
| shouldBe("document.documentElement.scrollLeft", "0"); |
| shouldBe("document.documentElement.scrollTop", "0"); |
| shouldBe("window.scrollX", "54"); |
| shouldBe("window.scrollY", "21"); |
| |
| // Finally, let's clear the state to make this simpler for manual testing. |
| newMainBody.parentNode.removeChild(newMainBody); |
| window.scrollTo(0, 0); |
| |
| finishJSTest(); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <div></div> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
