Fix canvas drawSystemFocusRing in focus event handler.

LayoutTests/fast/canvas/draw-system-focus-ring-on-event.html

Index: LayoutTests/fast/canvas/draw-system-focus-ring-on-event.html
diff --git a/LayoutTests/fast/canvas/draw-system-focus-ring.html b/LayoutTests/fast/canvas/draw-system-focus-ring-on-event.html
similarity index 66%
copy from LayoutTests/fast/canvas/draw-system-focus-ring.html
copy to LayoutTests/fast/canvas/draw-system-focus-ring-on-event.html
index 6a82e202d5664b21ce4dfb86d03bafb0f2b9eaaa..7acb7ef4f2957856f6fc08d7ac92af42dc1d0f0c 100644
--- a/LayoutTests/fast/canvas/draw-system-focus-ring.html
+++ b/LayoutTests/fast/canvas/draw-system-focus-ring-on-event.html
@@ -12,22 +12,25 @@
 if (window.testRunner)
     testRunner.dumpAsText(false);
 
-document.getElementById("button1").focus();
-
 var canvas = document.getElementById("canvas").getContext("2d");
-canvas.beginPath();
-canvas.rect(50, 50, 200, 100);
-canvas.fillStyle = "#ccf";
-canvas.fill();
-canvas.drawSystemFocusRing(document.getElementById("button1"));
 
-canvas.beginPath();
-canvas.rect(50, 200, 200, 100);
-canvas.fillStyle = "#cfc";
-canvas.fill();
-canvas.drawSystemFocusRing(document.getElementById("button2"));
+document.getElementById("button1").addEventListener('focus', function() {
+    canvas.beginPath();

[Stephen White, 2013/08/07 14:00:26]

FYI, you can use fillRect() as a shorthand for beginPath(), rect(), fill().

[dmazzoni, 2013/08/07 15:42:29]

Yes, but that won't set the path to be used by drawSystemFocusRing.

Should it?

+    canvas.rect(50, 50, 200, 100);
+    canvas.fillStyle = "#ccf";
+    canvas.fill();
+    canvas.drawSystemFocusRing(document.getElementById("button1"));
+
+    canvas.beginPath();
+    canvas.rect(50, 200, 200, 100);
+    canvas.fillStyle = "#cfc";
+    canvas.fill();
+    canvas.drawSystemFocusRing(document.getElementById("button2"));
+});
+
+document.getElementById("button1").focus();
 
-// The top rect"s focus ring is tied to button1, which is focused.
+// The top rect's focus ring is tied to button1, which is focused.
 // It should have an outline in some color other than the background color.
 var imageData = canvas.getImageData(49, 50, 1, 1);
 var data = imageData.data;