diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/manual/line-styles')
5 files changed, 193 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001-ref.htm b/testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001-ref.htm new file mode 100644 index 0000000000..f85af9aab2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001-ref.htm @@ -0,0 +1,11 @@ +<!doctype HTML> +<html> + <head> + <title>HTML5 Canvas Test: "square" lineCap</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com" /> + </head> + <body> + <p>Description: The square value of lineCap means that a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line.</p> + <div><img src='/images/black-rectangle.png' alt='black rect' /></div> + </body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001.htm b/testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001.htm new file mode 100644 index 0000000000..583dbc9d13 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001.htm @@ -0,0 +1,37 @@ +<!doctype HTML> +<html> + <head> + <title>HTML5 Canvas Test: "square" lineCap</title> + <link rel="match" href="canvas_linestyles_linecap_001-ref.htm"> + <link rel="author" title="Microsoft" href="http://www.microsoft.com" /> + <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-linecap" /> + <meta name="assert" content="The square value of lineCap means that a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line." /> + <script type="text/javascript"> + function runTest() + { + var canvas = document.getElementById("canvas1"); + var ctx = canvas.getContext("2d"); + + // Draw the first red rectangle. + ctx.fillStyle ="rgba(255, 0, 0, 1.0)"; + ctx.fillRect(75, 0, 25, 50); + + // Draw second red rectangle. + ctx.fillRect(0, 0, 25, 50); + + // Draw a line with square lineCap. + ctx.strokeStyle = "rgba(0, 0, 0, 1.0)"; + ctx.lineWidth = 50; + ctx.lineCap = "square"; + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(75, 25); + ctx.stroke(); + } + </script> + </head> + <body onload="runTest()"> + <p>Description: The square value of lineCap means that a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line.</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/line-styles/lineto_a.html b/testing/web-platform/tests/html/canvas/element/manual/line-styles/lineto_a.html new file mode 100644 index 0000000000..7e692f937d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/line-styles/lineto_a.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<link rel=match href=lineto_ref.html> +<style> + html, body { + margin: 0; + padding: 0; + } +</style> +<canvas id="c" width="150" height="150" > +Your browser does not support the HTML5 canvas tag.</canvas> + +<script> +var c = document.getElementById("c"); +var ctx = c.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(20, 20); +ctx.lineTo(20, 130); +ctx.lineTo(130, 130); +ctx.lineTo(130, 20); +ctx.closePath(); + +ctx.fillStyle = '#90EE90'; +ctx.fill(); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/manual/line-styles/lineto_ref.html b/testing/web-platform/tests/html/canvas/element/manual/line-styles/lineto_ref.html new file mode 100644 index 0000000000..3dc78ff804 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/line-styles/lineto_ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<style> + html, body { + margin: 0; + padding: 0; + } + div { + background: #90EE90; + width: 110px; + height: 110px; + margin: 20px; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/html/canvas/element/manual/line-styles/setLineDash.html b/testing/web-platform/tests/html/canvas/element/manual/line-styles/setLineDash.html new file mode 100644 index 0000000000..6b8d131da4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/line-styles/setLineDash.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>setLineDash</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<canvas id="canvas"></canvas> +<script> +test(function() { + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + + var initial = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + + ctx.setLineDash(initial); + assert_array_equals(ctx.getLineDash(), initial, "line dash sanity"); + + ctx.setLineDash([Infinity]); + assert_array_equals(ctx.getLineDash(), initial, "Inf doesn't reset line dash"); + + ctx.setLineDash([NaN]); + assert_array_equals(ctx.getLineDash(), initial, "NaN doesn't reset line dash"); + + ctx.setLineDash([-1]); + assert_array_equals(ctx.getLineDash(), initial, "Negative doesn't reset line dash"); +}, "Invalid arguments to setLineDash()"); + +test(function() { + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + assert_equals(ctx.lineDashOffset, 0); + + ctx.setLineDash([15, 10]); + ctx.lineDashOffset = 5; + ctx.strokeRect(10,10,100,100); + + var lineDash = ctx.getLineDash(); + assert_array_equals(lineDash, [15, 10]); + assert_equals(ctx.lineDashOffset, 5); + + ctx.setLineDash([5, 10, 15]); + ctx.strokeRect(20, 20, 120, 120); + lineDash = ctx.getLineDash(); + assert_array_equals(lineDash, [5, 10, 15, 5, 10, 15]); + + ctx.setLineDash(["1", 2]); + lineDash = ctx.getLineDash(); + assert_array_equals(lineDash, [1, 2]); + + ctx.clearRect(0, 0, 700, 700); + assert_equals(ctx.lineDashOffset, 5); + + ctx.setLineDash([20, 10]); + ctx.lineDashOffset = 0; + // Make the test immune to plaform anti-aliasing discrepancies. + ctx.lineWidth = 4; + ctx.strokeStyle = '#00FF00'; + ctx.strokeRect(10.5, 10.5, 30, 30); + + _assertPixel(canvas, 25, 10, 0, 255, 0, 255, 0); + _assertPixel(canvas, 35, 10, 0, 0, 0, 0, 0); + _assertPixel(canvas, 40, 25, 0, 255, 0, 255, 0); + _assertPixel(canvas, 40, 35, 0, 0, 0, 0, 0); + _assertPixel(canvas, 25, 40, 0, 255, 0, 255, 0); + _assertPixel(canvas, 15, 40, 0, 0, 0, 0, 0); + _assertPixel(canvas, 10, 25, 0, 255, 0, 255, 0); + _assertPixel(canvas, 10, 15, 0, 0, 0, 0, 0); + + // Verify that lineDashOffset works as expected. + ctx.lineDashOffset = 20; + ctx.strokeRect(50.5, 10.5, 30, 30); + _assertPixel(canvas, 55, 10, 0, 0, 0, 0, 0); + _assertPixel(canvas, 65, 10, 0, 255, 0, 255, 0); + _assertPixel(canvas, 80, 15, 0, 0, 0, 0, 0); + _assertPixel(canvas, 80, 25, 0, 255, 0, 255, 0); + _assertPixel(canvas, 75, 40, 0, 0, 0, 0, 0); + _assertPixel(canvas, 65, 40, 0, 255, 0, 255, 0); + _assertPixel(canvas, 50, 35, 0, 0, 0, 0, 0); + _assertPixel(canvas, 50, 25, 0, 255, 0, 255, 0); + + // Verify negative lineDashOffset. + ctx.lineDashOffset = -10; + ctx.strokeRect(90.5, 10.5, 30, 30); + _assertPixel(canvas, 95, 10, 0, 0, 0, 0, 0); + _assertPixel(canvas, 105, 10, 0, 255, 0, 255, 0); + _assertPixel(canvas, 120, 15, 0, 0, 0, 0, 0); + _assertPixel(canvas, 120, 25, 0, 255, 0, 255, 0); + _assertPixel(canvas, 115, 40, 0, 0, 0, 0, 0); + _assertPixel(canvas, 105, 40, 0, 255, 0, 255, 0); + _assertPixel(canvas, 90, 35, 0, 0, 0, 0, 0); + _assertPixel(canvas, 90, 25, 0, 255, 0, 255, 0); + + // Ensure that all zeros or negative pattern does not cause error state in + // context. + ctx.setLineDash([0, 0]); + ctx.strokeRect(130.5, 10.5, 10, 10); + ctx.setLineDash([-1]); + ctx.strokeRect(130.5, 10.5, 10, 10); + _assertPixel(canvas, 135, 15, 0, 0, 0, 0, 0); + ctx.fillStyle = '#00FF00'; + ctx.fillRect(130, 10, 10, 10); + _assertPixel(canvas, 135, 15, 0, 255, 0, 255, 0); +}); +</script> |