| <!DOCTYPE HTML> |
| <head> |
| <title>Canvas test: drawFocusIfNeeded scrolls</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| </head> |
| <body style="padding: 0; margin: 0"> |
| <div style="border: 1px solid #000; height: 1000px;">1000-pixel box</div> |
| <canvas id="canvas" width="300" height="5000"> |
| <button id="top_button"></button> |
| <button id="bottom_button"></button> |
| </canvas> |
| <script> |
| |
| var canvas = document.getElementById("canvas"); |
| var context = canvas.getContext("2d"); |
| |
| var TOP_BUTTON_Y_POS = 50; |
| var BOTTOM_BUTTON_Y_POS = 4850; |
| |
| function draw() { |
| context.beginPath(); |
| context.rect(50, TOP_BUTTON_Y_POS, 200, 100); |
| context.fillStyle = "#ccf"; |
| context.fill(); |
| context.drawFocusIfNeeded(document.getElementById("top_button")); |
| |
| context.beginPath(); |
| context.rect(50, BOTTOM_BUTTON_Y_POS, 200, 100); |
| context.fillStyle = "#fcc"; |
| context.fill(); |
| context.drawFocusIfNeeded(document.getElementById("bottom_button")); |
| } |
| |
| test(function(t) { |
| document.getElementById("bottom_button").focus(); |
| window.scrollTo(0, 0); |
| assert_equals(window.pageYOffset, 0); |
| draw(); |
| |
| var minYOffset = BOTTOM_BUTTON_Y_POS + canvas.offsetTop - window.innerHeight; |
| var maxYOffset = BOTTOM_BUTTON_Y_POS + canvas.offsetTop; |
| assert_greater_than_equal(window.pageYOffset, minYOffset); |
| assert_greater_than_equal(maxYOffset, window.pageYOffset); |
| |
| document.getElementById("top_button").focus(); |
| assert_greater_than_equal(window.pageYOffset, minYOffset); |
| assert_greater_than_equal(maxYOffset, window.pageYOffset); |
| |
| draw(); |
| minYOffset = TOP_BUTTON_Y_POS + canvas.offsetTop - window.innerHeight; |
| maxYOffset = TOP_BUTTON_Y_POS + canvas.offsetTop; |
| assert_greater_than_equal(window.pageYOffset, minYOffset); |
| assert_greater_than_equal(maxYOffset, window.pageYOffset); |
| }, 'Canvas test: drawFocusIfNeeded scrolls'); |
| |
| </script> |
| </body> |
