| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| |
| <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> |
| test(function(t) { |
| |
| 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); |
| assert_true(window.pageXOffset == 0); |
| draw(); |
| |
| var minXOffset = RIGHT_BUTTON_X_POS + canvas.offsetLeft - window.innerWidth; |
| var maxXOffset = RIGHT_BUTTON_X_POS + canvas.offsetLeft; |
| assert_true(window.pageXOffset >= minXOffset); |
| assert_true(maxXOffset >= window.pageXOffset); |
| |
| document.getElementById("left_button").focus(); |
| assert_true(window.pageXOffset >= minXOffset); |
| assert_true(maxXOffset >= window.pageXOffset); |
| |
| draw(); |
| minXOffset = LEFT_BUTTON_X_POS + canvas.offsetLeft - window.innerWidth; |
| maxXOffset = LEFT_BUTTON_X_POS + canvas.offsetLeft; |
| assert_true(window.pageXOffset >= minXOffset); |
| assert_true(maxXOffset >= window.pageXOffset); |
| |
| }, 'Canvas test: drawFocusIfNeeded scrolls'); |
| </script> |
| </body> |