third_party/WebKit/LayoutTests/fast/canvas/draw-focus-if-needed-scrolls.html

   1 <!DOCTYPE HTML>
   2 <head>
   3 <title>Canvas test: drawFocusIfNeeded scrolls</title>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body style="padding: 0; margin: 0">
   7 <div style="border: 1px solid #000; height: 1000px;">1000-pixel box</div>
   8 <canvas id="canvas" width="300" height="5000">
   9     <button id="top_button"></button>
  10     <button id="bottom_button"></button>
  11 </canvas>
  12 <script>
  13 if (window.testRunner)
  14     testRunner.dumpAsText();
  15
  16 var canvas = document.getElementById("canvas");
  17 var context = canvas.getContext("2d");
  18
  19 var TOP_BUTTON_Y_POS = 50;
  20 var BOTTOM_BUTTON_Y_POS = 4850;
  21
  22 function draw() {
  23     context.beginPath();
  24     context.rect(50, TOP_BUTTON_Y_POS, 200, 100);
  25     context.fillStyle = "#ccf";
  26     context.fill();
  27     context.drawFocusIfNeeded(document.getElementById("top_button"));
  28
  29     context.beginPath();
  30     context.rect(50, BOTTOM_BUTTON_Y_POS, 200, 100);
  31     context.fillStyle = "#fcc";
  32     context.fill();
  33     context.drawFocusIfNeeded(document.getElementById("bottom_button"));
  34 }
  35
  36 document.getElementById("bottom_button").focus();
  37 window.scrollTo(0, 0);
  38 shouldBe("window.pageYOffset", "0");
  39 draw();
  40
  41 var minYOffset = BOTTOM_BUTTON_Y_POS + canvas.offsetTop - window.innerHeight;
  42 var maxYOffset = BOTTOM_BUTTON_Y_POS + canvas.offsetTop;
  43 shouldBeGreaterThanOrEqual("window.pageYOffset", "minYOffset");
  44 shouldBeGreaterThanOrEqual("maxYOffset", "window.pageYOffset");
  45
  46 document.getElementById("top_button").focus();
  47 shouldBeGreaterThanOrEqual("window.pageYOffset", "minYOffset");
  48 shouldBeGreaterThanOrEqual("maxYOffset", "window.pageYOffset");
  49
  50 draw();
  51 minYOffset = TOP_BUTTON_Y_POS + canvas.offsetTop - window.innerHeight;
  52 maxYOffset = TOP_BUTTON_Y_POS + canvas.offsetTop;
  53 shouldBeGreaterThanOrEqual("window.pageYOffset", "minYOffset");
  54 shouldBeGreaterThanOrEqual("maxYOffset", "window.pageYOffset");
  55
  56 </script>
  57 </body>