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