setLineDash.html (3608B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>setLineDash</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/html/canvas/resources/canvas-tests.js"></script> 7 <canvas id="canvas"></canvas> 8 <script> 9 test(function() { 10 var canvas = document.getElementById('canvas'); 11 var ctx = canvas.getContext('2d'); 12 13 var initial = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 14 15 ctx.setLineDash(initial); 16 assert_array_equals(ctx.getLineDash(), initial, "line dash sanity"); 17 18 ctx.setLineDash([Infinity]); 19 assert_array_equals(ctx.getLineDash(), initial, "Inf doesn't reset line dash"); 20 21 ctx.setLineDash([NaN]); 22 assert_array_equals(ctx.getLineDash(), initial, "NaN doesn't reset line dash"); 23 24 ctx.setLineDash([-1]); 25 assert_array_equals(ctx.getLineDash(), initial, "Negative doesn't reset line dash"); 26 }, "Invalid arguments to setLineDash()"); 27 28 test(function() { 29 var canvas = document.getElementById('canvas'); 30 var ctx = canvas.getContext('2d'); 31 assert_equals(ctx.lineDashOffset, 0); 32 33 ctx.setLineDash([15, 10]); 34 ctx.lineDashOffset = 5; 35 ctx.strokeRect(10,10,100,100); 36 37 var lineDash = ctx.getLineDash(); 38 assert_array_equals(lineDash, [15, 10]); 39 assert_equals(ctx.lineDashOffset, 5); 40 41 ctx.setLineDash([5, 10, 15]); 42 ctx.strokeRect(20, 20, 120, 120); 43 lineDash = ctx.getLineDash(); 44 assert_array_equals(lineDash, [5, 10, 15, 5, 10, 15]); 45 46 ctx.setLineDash(["1", 2]); 47 lineDash = ctx.getLineDash(); 48 assert_array_equals(lineDash, [1, 2]); 49 50 ctx.clearRect(0, 0, 700, 700); 51 assert_equals(ctx.lineDashOffset, 5); 52 53 ctx.setLineDash([20, 10]); 54 ctx.lineDashOffset = 0; 55 // Make the test immune to plaform anti-aliasing discrepancies. 56 ctx.lineWidth = 4; 57 ctx.strokeStyle = '#00FF00'; 58 ctx.strokeRect(10.5, 10.5, 30, 30); 59 60 _assertPixel(canvas, 25, 10, 0, 255, 0, 255, 0); 61 _assertPixel(canvas, 35, 10, 0, 0, 0, 0, 0); 62 _assertPixel(canvas, 40, 25, 0, 255, 0, 255, 0); 63 _assertPixel(canvas, 40, 35, 0, 0, 0, 0, 0); 64 _assertPixel(canvas, 25, 40, 0, 255, 0, 255, 0); 65 _assertPixel(canvas, 15, 40, 0, 0, 0, 0, 0); 66 _assertPixel(canvas, 10, 25, 0, 255, 0, 255, 0); 67 _assertPixel(canvas, 10, 15, 0, 0, 0, 0, 0); 68 69 // Verify that lineDashOffset works as expected. 70 ctx.lineDashOffset = 20; 71 ctx.strokeRect(50.5, 10.5, 30, 30); 72 _assertPixel(canvas, 55, 10, 0, 0, 0, 0, 0); 73 _assertPixel(canvas, 65, 10, 0, 255, 0, 255, 0); 74 _assertPixel(canvas, 80, 15, 0, 0, 0, 0, 0); 75 _assertPixel(canvas, 80, 25, 0, 255, 0, 255, 0); 76 _assertPixel(canvas, 75, 40, 0, 0, 0, 0, 0); 77 _assertPixel(canvas, 65, 40, 0, 255, 0, 255, 0); 78 _assertPixel(canvas, 50, 35, 0, 0, 0, 0, 0); 79 _assertPixel(canvas, 50, 25, 0, 255, 0, 255, 0); 80 81 // Verify negative lineDashOffset. 82 ctx.lineDashOffset = -10; 83 ctx.strokeRect(90.5, 10.5, 30, 30); 84 _assertPixel(canvas, 95, 10, 0, 0, 0, 0, 0); 85 _assertPixel(canvas, 105, 10, 0, 255, 0, 255, 0); 86 _assertPixel(canvas, 120, 15, 0, 0, 0, 0, 0); 87 _assertPixel(canvas, 120, 25, 0, 255, 0, 255, 0); 88 _assertPixel(canvas, 115, 40, 0, 0, 0, 0, 0); 89 _assertPixel(canvas, 105, 40, 0, 255, 0, 255, 0); 90 _assertPixel(canvas, 90, 35, 0, 0, 0, 0, 0); 91 _assertPixel(canvas, 90, 25, 0, 255, 0, 255, 0); 92 93 // Ensure that all zeros or negative pattern does not cause error state in 94 // context. 95 ctx.setLineDash([0, 0]); 96 ctx.strokeRect(130.5, 10.5, 10, 10); 97 ctx.setLineDash([-1]); 98 ctx.strokeRect(130.5, 10.5, 10, 10); 99 _assertPixel(canvas, 135, 15, 0, 0, 0, 0, 0); 100 ctx.fillStyle = '#00FF00'; 101 ctx.fillRect(130, 10, 10, 10); 102 _assertPixel(canvas, 135, 15, 0, 255, 0, 255, 0); 103 }); 104 </script>