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