<!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>