| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| window.jsTestIsAsync = true; |
| var testScrolls = []; |
| var currentTest = -1; |
| var div; |
| var pixelsPerWheelTick = 40; |
| |
| function tryScroll() { |
| eventSender.mouseMoveTo(div.offsetLeft + 5, div.offsetTop + 5); |
| eventSender.mouseScrollBy(0,-1); |
| eventSender.mouseScrollBy(-1,0); |
| } |
| |
| function startNextTestCase() { |
| currentTest++; |
| if (currentTest >= testScrolls.length) { |
| finishJSTest(); |
| return; |
| } |
| var testCase = testScrolls[currentTest]; |
| div = document.getElementById(testCase.elem); |
| tryScroll(); |
| shouldBecomeEqual("div.scrollTop == " + testCase.expTop + " && " + |
| "div.scrollLeft == " + testCase.expLeft, "true", startNextTestCase); |
| } |
| |
| function test() { |
| if (window.eventSender && window.testRunner) { |
| testRunner.waitUntilDone(); |
| description('This tests that scrollable areas with the appropriate overflow mode set' |
| + ' are in fact scrollable by the user.'); |
| |
| testScrolls = [ |
| {elem: "overflow-1", expLeft: "window.pixelsPerWheelTick" , expTop: "window.pixelsPerWheelTick"}, |
| {elem: "overflow-2", expLeft: "window.pixelsPerWheelTick" , expTop: "window.pixelsPerWheelTick"}, |
| {elem: "overflow-3", expLeft: 0 , expTop: 0}, |
| {elem: "overflow-4", expLeft: "window.pixelsPerWheelTick" , expTop: "window.pixelsPerWheelTick"}, |
| {elem: "no-overflow-1", expLeft: 0 , expTop: 0}, |
| {elem: "no-overflow-2", expLeft: 0 , expTop: 0}, |
| {elem: "no-overflow-3", expLeft: 0 , expTop: 0}, |
| {elem: "no-overflow-4", expLeft: 0 , expTop: 0}, |
| ]; |
| startNextTestCase(); |
| } else { |
| debug("FAIL: This test requires window.eventSender."); |
| } |
| } |
| </script> |
| </head> |
| <body style="margin: 0" onload="test()"> |
| scroll with overflow |
| <div id="overflow-1" style="width: 100px; height: 100px; overflow-x: scroll; overflow-y: scroll"> |
| <div style="width: 200px; height: 200px;">Content</div> |
| </div> |
| auto with overflow |
| <div id="overflow-2" style="width: 100px; height: 100px; overflow-x: auto; overflow-y: auto"> |
| <div style="width: 200px; height: 200px;">Content</div> |
| </div> |
| hidden with overflow |
| <div id="overflow-3" style="width: 100px; height: 100px; overflow-x: hidden; overflow-y: hidden"> |
| <div style="width: 200px; height: 200px;">Content</div> |
| </div> |
| overlay with overflow |
| <div id="overflow-4" style="width: 100px; height: 100px; overflow-x: overlay; overflow-y: overlay"> |
| <div style="width: 200px; height: 200px;">Content</div> |
| </div> |
| |
| scroll without overflow |
| <div id="no-overflow-1" style="width: 100px; height: 100px; overflow-x: scroll; overflow-y: scroll"> |
| <div style="width: 20px; height: 20px;">Content</div> |
| </div> |
| auto without overflow |
| <div id="no-overflow-2" style="width: 100px; height: 100px; overflow-x: auto; overflow-y: auto"> |
| <div style="width: 20px; height: 20px;">Content</div> |
| </div> |
| hidden without overflow |
| <div id="no-overflow-3" style="width: 100px; height: 100px; overflow-x: hidden; overflow-y: hidden"> |
| <div style="width: 20px; height: 20px;">Content</div> |
| </div> |
| overlay without overflow |
| <div id="no-overflow-4" style="width: 100px; height: 100px; overflow-x: overlay; overflow-y: overlay"> |
| <div style="width: 20px; height: 20px;">Content</div> |
| </div> |
| </body> |
| </html> |
