third_party/WebKit/ManualTests/draw-focus-if-needed-dirty-rect.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>drawSystemFocusRing() dirty rect test</title>
   5     <script src="../../resources/js-test.js"></script>
   6 </head>
   7 <body>
   8     <p>This test is passed if result1 is exactly the same with result2.</p>
   9     <p>
  10         <button id="result1">Result1</button>
  11         <button id="result2">Result2</button>
  12     </p>
  13     <canvas id="canvas" class="output" width="300" height="300">
  14         <button id="button"></button>
  15     </canvas>
  16 <script>
  17
  18     var canvas = document.getElementById("canvas");
  19     var context = canvas.getContext("2d");
  20     var button = document.getElementById("button");
  21     var result1 = document.getElementById("result1");
  22     var result2 = document.getElementById("result2");
  23
  24     function drawResult(separateFrame) {
  25
  26         button.focus();
  27
  28         requestAnimationFrame(function() {
  29             context.beginPath();
  30             context.rect(0, 0, 300, 300);
  31             context.fill();
  32
  33             context.beginPath();
  34             context.rect(50, 50, 200, 100);
  35
  36             if (separateFrame)
  37                 requestAnimationFrame(function() {
  38                     context.drawSystemFocusRing(button);
  39                 });
  40             else
  41                 context.drawSystemFocusRing(button);
  42         });
  43     }
  44
  45     result1.addEventListener("click", function() {
  46         drawResult(false);
  47     }, false);
  48
  49     result2.addEventListener("click", function() {
  50         drawResult(true);
  51     }, false);
  52
  53 </script>
  54 </body>
  55 </html>