1 files changed, 88 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_004.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_004.html
new file mode 100644
index 0000000000..326db0daa8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_004.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>drawFocusIfNeeded()</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <link rel="author" title="W3C">
+    <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">
+  </head>
+  <body>
+    <h1>Description</h1>
+    <p>This test uses drawFocusIfNeeded to draw a complex path focus then compare ImageData from before and after.</p>
+    <div>
+      <p>Before:</p>
+      <canvas height=100 width=100 id='original'>
+      </canvas>
+      <p>After:</p>
+      <canvas height=100 width=100 id=canvas>
+        <label><a href='http://www.w3.org' id='element'>Focus</a></label>
+      </canvas>
+    </div>
+    <script>
+      test(function() {
+          var canvas = document.getElementById('canvas');
+          var context = canvas.getContext('2d');
+          var element = document.getElementById('element');
+          element.focus();
+          context.fillStyle = 'white';
+          context.fillRect(0, 0, 100, 100);
+          context.beginPath();
+          context.strokeStyle = 'black';
+
+          context.moveTo(10, 40);
+          context.lineTo(50, 10);
+          context.lineTo(90, 40);
+          context.lineTo(70, 40);
+          context.lineTo(70, 90);
+          context.lineTo(30, 90);
+          context.lineTo(30, 40);
+          context.closePath();
+
+          context.stroke();
+          context.save();
+          var refImage = context.getImageData(0, 0, 100, 100);
+
+          assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000");
+
+          var original = document.getElementById('original');
+          var o_context = original.getContext('2d');
+          o_context.fillStyle = 'white';
+          o_context.fillRect(0, 0, 100, 100);
+          o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100);
+
+
+
+          context.beginPath();
+          context.moveTo(5, 40);
+          context.lineTo(50, 5);
+          context.lineTo(95, 40);
+          context.lineTo(95, 45);
+          context.lineTo(75, 45);
+          context.lineTo(75, 95);
+          context.lineTo(25, 95);
+          context.lineTo(25, 45);
+          context.lineTo(5, 45);
+          context.closePath();
+
+          context.drawFocusIfNeeded(element);
+
+          var ringImage = context.getImageData(0, 0, 100, 100);
+          assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000");
+
+          // make sure refImage and ringImage are different
+          var length = 40000;
+          var index = length;
+          var identical = true;
+          while (--index > 0) {
+            if (refImage.data[index] != ringImage.data[index]) identical = false;
+          }
+
+          assert_false(identical, "A focus ring appears in the canvas");
+
+
+      }, 'drawFocusIfNeeded does draw a focus ring if the element is in focus.');
+    </script>
+    <div id="log"></div>
+  </body>
+</html>