| <!DOCTYPE HTML> |
| <head> |
| <title>Canvas test: drawFocusIfNeeded scrolls</title> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body style="padding: 0; margin: 0"> |
| <div style="width: 6500px;"> |
| <div style="float: left; border: 1px solid #000; width: 1000px; height: 300px"> |
| 1000-pixel box |
| </div> |
| <canvas id="canvas" width="5000" height="300" style="float: left;"> |
| <button id="left_button"></button> |
| <button id="right_button"></button> |
| </canvas> |
| </div> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| var canvas = document.getElementById("canvas"); |
| var context = canvas.getContext("2d"); |
| |
| var LEFT_BUTTON_X_POS = 50; |
| var RIGHT_BUTTON_X_POS = 4750; |
| |
| function draw() { |
| context.beginPath(); |
| context.rect(LEFT_BUTTON_X_POS, 50, 200, 100); |
| context.fillStyle = "#ccf"; |
| context.fill(); |
| context.drawFocusIfNeeded(document.getElementById("left_button")); |
| |
| context.beginPath(); |
| context.rect(RIGHT_BUTTON_X_POS, 50, 200, 100); |
| context.fillStyle = "#fcc"; |
| context.fill(); |
| context.drawFocusIfNeeded(document.getElementById("right_button")); |
| } |
| |
| document.getElementById("right_button").focus(); |
| window.scrollTo(0, 0); |
| shouldBe("window.pageXOffset", "0"); |
| draw(); |
| |
| var minXOffset = RIGHT_BUTTON_X_POS + canvas.offsetLeft - window.innerWidth; |
| var maxXOffset = RIGHT_BUTTON_X_POS + canvas.offsetLeft; |
| shouldBeGreaterThanOrEqual("window.pageXOffset", "minXOffset"); |
| shouldBeGreaterThanOrEqual("maxXOffset", "window.pageXOffset"); |
| |
| document.getElementById("left_button").focus(); |
| shouldBeGreaterThanOrEqual("window.pageXOffset", "minXOffset"); |
| shouldBeGreaterThanOrEqual("maxXOffset", "window.pageXOffset"); |
| |
| draw(); |
| minXOffset = LEFT_BUTTON_X_POS + canvas.offsetLeft - window.innerWidth; |
| maxXOffset = LEFT_BUTTON_X_POS + canvas.offsetLeft; |
| shouldBeGreaterThanOrEqual("window.pageXOffset", "minXOffset"); |
| shouldBeGreaterThanOrEqual("maxXOffset", "window.pageXOffset"); |
| |
| </script> |
| </body> |
