| <!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> |
