draw-focus-if-needed-dirty-rect.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  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. var canvas = document.getElementById("canvas");
  18. var context = canvas.getContext("2d");
  19. var button = document.getElementById("button");
  20. var result1 = document.getElementById("result1");
  21. var result2 = document.getElementById("result2");
  22. function drawResult(separateFrame) {
  23. button.focus();
  24. requestAnimationFrame(function() {
  25. context.beginPath();
  26. context.rect(0, 0, 300, 300);
  27. context.fill();
  28. context.beginPath();
  29. context.rect(50, 50, 200, 100);
  30. if (separateFrame)
  31. requestAnimationFrame(function() {
  32. context.drawSystemFocusRing(button);
  33. });
  34. else
  35. context.drawSystemFocusRing(button);
  36. });
  37. }
  38. result1.addEventListener("click", function() {
  39. drawResult(false);
  40. }, false);
  41. result2.addEventListener("click", function() {
  42. drawResult(true);
  43. }, false);
  44. </script>
  45. </body>
  46. </html>