diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas')
7 files changed, 460 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_complexshapes_ispointInpath_001.htm b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_complexshapes_ispointInpath_001.htm new file mode 100644 index 0000000000..18c3c9afb9 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_complexshapes_ispointInpath_001.htm @@ -0,0 +1,31 @@ +<!doctype HTML> +<html> + <head> + <title>HTML5 Canvas Test: isPointInPath() unaffected by the current transformation matrix</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <link rel="author" title="Microsoft" href="http://www.microsoft.com" /> + <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-ispointinpath" /> + <meta name="assert" content="isPointInPath must check the point (x, y) as coordinates unaffected by the current transformation matrix." /> + <script type="text/javascript"> + async_test(function(t) { + window.addEventListener("load", t.step_func_done(function runTest() { + var canvas = document.getElementById("canvas1"); + var ctx = canvas.getContext("2d"); + + // Create a path that is transformed by a translation transformation matrix. + ctx.translate(100, 50); + ctx.rect(0, 0, 100, 50); + + // Ensure that the coordinates passed to isPointInPath are unaffected by the current transformation matrix. + assert_true(ctx.isPointInPath(125, 75), "isPointInPath(125, 75)"); + assert_false(ctx.isPointInPath(25, 25), "!isPointInPath(25, 25)"); + })); + }, "isPointInPath unaffected by transformation matrix"); + </script> + </head> + <body> + <p>Description: isPointInPath must check the point (x, y) as coordinates unaffected by the current transformation matrix.</p> + <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas> + </body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_focus_drawFocusIfNeeded_AAPI_001-manual.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_focus_drawFocusIfNeeded_AAPI_001-manual.html new file mode 100644 index 0000000000..bf38fa68b7 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_focus_drawFocusIfNeeded_AAPI_001-manual.html @@ -0,0 +1,50 @@ +<html> + <head> + <meta charset="UTF-8"> + <title>drawFocusIfNeeded() - AAPI test</title> + <link rel="author" title="Mark Sadecki" href="mark@w3.org"> + <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded"> + + </head> + <body> + <h1>Description</h1> + <p>This manual test can be used to verify that drawFocusIfNeeded actually updates the accessible location information (i.e. UIAutomation's CurrentBoundingRectangle) in the Accessibility API. To perform this test, you will need an <a href="http://www.w3.org/WAI/PF/wiki/ARIA_Test_Plan#Test_tools">accessibility API inspector</a>. To perform this test, use the <code>tab</code> key to move from the first focusable element to through to the fourth. This test passes if the first parameter of the bounding rectangle increases by 100 when focus is moved from the gray square to the orange square.</p> + <p><a href="http://www.w3.org">First focusable element</a></p> + <canvas height=100 width=200 id=canvas> + <a href='http://www.w3.org' id='button1'>Second focusable element</a> + <a href='http://www.w3.org' id='button2'>Third focusable element</a> + </canvas> + <p><a href="http://www.w3.org">Fourth focusable element</a></p> + + <script> + var button1 = document.getElementById('button1'); + var button2 = document.getElementById('button2'); + var canvas = document.getElementById('canvas'); + var buttons = canvas.getElementsByTagName('a'); + + for (var i = 0; i < buttons.length; i++) { + buttons[i].addEventListener('focus', drawCanvas, false); + buttons[i].addEventListener('blur', drawCanvas, false); + } + + function drawRect(context, color, element) { + context.beginPath(); + context.rect(10, 10, 80, 80); + context.fillStyle = color; + context.fill(); + context.drawFocusIfNeeded(element); + } + + function drawCanvas() { + var canvas = document.getElementById('canvas'); + var context = canvas.getContext('2d'); + context.clearRect (0, 0, 200, 100); + + drawRect(context, "gray", button1); + context.translate(100,0); + drawRect(context, "orange", button2); + } + drawCanvas(); + </script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_001.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_001.html new file mode 100644 index 0000000000..6daf32a2af --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_001.html @@ -0,0 +1,66 @@ +<!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 focus ring in the canvas, then compare the ImageData before and after the invocation of the method to check that the focus ring was actually drawn.</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.rect(10, 10, 80, 80); + 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.rect(5, 5, 90, 90); + 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, "The focus ring must appear in the canvas"); + + + }, 'drawFocusIfNeeded draws a focus ring.'); + </script> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_002.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_002.html new file mode 100644 index 0000000000..ec0a4ef427 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_002.html @@ -0,0 +1,68 @@ +<!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 does nothing if the element is not in focus but comparing 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'); + context.fillStyle = 'white'; + context.fillRect(0, 0, 100, 100); + context.beginPath(); + context.strokeStyle = 'black'; + context.rect(10, 10, 80, 80); + 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.strokeStyle = 'blue'; + context.rect(5, 5, 90, 90); + 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_true(identical, "No focus ring appears in the canvas"); + + + }, 'drawFocusIfNeeded does not draw a focus ring if the element is not in focus.'); + </script> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_003.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_003.html new file mode 100644 index 0000000000..b62c0641f5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_003.html @@ -0,0 +1,69 @@ +<!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 does nothing if the element is not a descendant but comparing ImageData from before and after.</p> + <div> + <p>Before:</p> + <canvas height=100 width=100 id='original'> + <label><a href='http://www.w3.org' id='element'>Focus</a></label> + </canvas> + <p>After:</p> + <canvas height=100 width=100 id=canvas> + </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.rect(10, 10, 80, 80); + 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.strokeStyle = 'blue'; + context.rect(5, 5, 90, 90); + 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_true(identical, "No focus ring appears in the canvas"); + + + }, 'drawFocusIfNeeded does not draw a focus ring if the element is not a descendant of the context.'); + </script> + <div id="log"></div> + </body> +</html> 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> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_005.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_005.html new file mode 100644 index 0000000000..96a4e3fd5d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_005.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> + <p id='element' tabindex='1'>This is text.</p> + </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 and the user activated a particular focus ring.'); + </script> + <div id="log"></div> + </body> +</html> |