OLD | NEW |
| (Empty) |
1 description("Basic test for setLineDash, getLineDash and lineDashOffset"); | |
2 | |
3 var canvas = document.createElement('canvas'); | |
4 document.body.appendChild(canvas); | |
5 canvas.setAttribute('width', '700'); | |
6 canvas.setAttribute('height', '700'); | |
7 var ctx = canvas.getContext('2d'); | |
8 | |
9 function dataToArray(data) { | |
10 var result = new Array(data.length) | |
11 for (var i = 0; i < data.length; i++) | |
12 result[i] = data[i]; | |
13 return result; | |
14 } | |
15 | |
16 function getPixel(x, y) { | |
17 var data = ctx.getImageData(x,y,1,1); | |
18 if (!data) // getImageData failed, which should never happen | |
19 return [-1,-1,-1,-1]; | |
20 return dataToArray(data.data); | |
21 } | |
22 | |
23 function pixelShouldBe(x, y, colour) { | |
24 shouldBe("getPixel(" + [x, y] +")", "["+colour+"]"); | |
25 } | |
26 | |
27 // Verify default values. | |
28 shouldBe('ctx.lineDashOffset', '0'); | |
29 | |
30 // Set dash-style. | |
31 ctx.setLineDash([15, 10]); | |
32 ctx.lineDashOffset = 5; | |
33 ctx.strokeRect (10,10,100,100); | |
34 | |
35 // Verify dash and offset. | |
36 var lineDash; | |
37 lineDash = ctx.getLineDash(); | |
38 shouldBe('lineDash[0]', '15'); | |
39 shouldBe('lineDash[1]', '10'); | |
40 shouldBe('ctx.lineDashOffset', '5'); | |
41 | |
42 // Verify setting line dash to sequence of nulls is interpreted as zeros | |
43 ctx.setLineDash([null, null]); | |
44 lineDash = ctx.getLineDash(); | |
45 shouldBe('lineDash[0]', '0'); | |
46 shouldBe('lineDash[1]', '0'); | |
47 | |
48 // Set dash style to even number | |
49 ctx.setLineDash([5, 10, 15]); | |
50 ctx.strokeRect(20, 20, 120, 120); | |
51 | |
52 // Verify dash pattern is normalized | |
53 lineDash = ctx.getLineDash(); | |
54 shouldBe('lineDash[0]', '5'); | |
55 shouldBe('lineDash[1]', '10'); | |
56 shouldBe('lineDash[2]', '15'); | |
57 shouldBe('lineDash[3]', '5'); | |
58 shouldBe('lineDash[4]', '10'); | |
59 shouldBe('lineDash[5]', '15'); | |
60 | |
61 // Verify that conversion from string works | |
62 ctx.setLineDash(["1", 2]); | |
63 lineDash = ctx.getLineDash(); | |
64 shouldBe('lineDash[0]', '1'); | |
65 shouldBe('lineDash[1]', '2'); | |
66 | |
67 // Verify that line dash offset persists after | |
68 // clearRect (which causes a save/restore of the context | |
69 // state to the stack). | |
70 ctx.clearRect(0, 0, 700, 700); | |
71 shouldBe('ctx.lineDashOffset', '5'); | |
72 | |
73 // Verify dash rendering | |
74 ctx.setLineDash([20, 10]); | |
75 ctx.lineDashOffset = 0; | |
76 ctx.lineWidth = 4; // To make the test immune to plaform anti-aliasing discrepan
cies | |
77 ctx.strokeStyle = '#00FF00'; | |
78 ctx.strokeRect(10.5, 10.5, 30, 30); | |
79 | |
80 pixelShouldBe(25, 10, [0, 255, 0, 255]); | |
81 pixelShouldBe(35, 10, [0, 0, 0, 0]); | |
82 pixelShouldBe(40, 25, [0, 255, 0, 255]); | |
83 pixelShouldBe(40, 35, [0, 0, 0, 0]); | |
84 pixelShouldBe(25, 40, [0, 255, 0, 255]); | |
85 pixelShouldBe(15, 40, [0, 0, 0, 0]); | |
86 pixelShouldBe(10, 25, [0, 255, 0, 255]); | |
87 pixelShouldBe(10, 15, [0, 0, 0, 0]); | |
88 | |
89 // Verify that lineDashOffset works as expected | |
90 ctx.lineDashOffset = 20; | |
91 ctx.strokeRect(50.5, 10.5, 30, 30); | |
92 pixelShouldBe(55, 10, [0, 0, 0, 0]); | |
93 pixelShouldBe(65, 10, [0, 255, 0, 255]); | |
94 pixelShouldBe(80, 15, [0, 0, 0, 0]); | |
95 pixelShouldBe(80, 25, [0, 255, 0, 255]); | |
96 pixelShouldBe(75, 40, [0, 0, 0, 0]); | |
97 pixelShouldBe(65, 40, [0, 255, 0, 255]); | |
98 pixelShouldBe(50, 35, [0, 0, 0, 0]); | |
99 pixelShouldBe(50, 25, [0, 255, 0, 255]); | |
100 | |
101 // Verify negative lineDashOffset | |
102 ctx.lineDashOffset = -10; | |
103 ctx.strokeRect(90.5, 10.5, 30, 30); | |
104 pixelShouldBe(95, 10, [0, 0, 0, 0]); | |
105 pixelShouldBe(105, 10, [0, 255, 0, 255]); | |
106 pixelShouldBe(120, 15, [0, 0, 0, 0]); | |
107 pixelShouldBe(120, 25, [0, 255, 0, 255]); | |
108 pixelShouldBe(115, 40, [0, 0, 0, 0]); | |
109 pixelShouldBe(105, 40, [0, 255, 0, 255]); | |
110 pixelShouldBe(90, 35, [0, 0, 0, 0]); | |
111 pixelShouldBe(90, 25, [0, 255, 0, 255]); | |
112 | |
113 // Verify that all zero dash sequence results in no dashing | |
114 ctx.setLineDash([0, 0]); | |
115 ctx.lineDashOffset = 0; | |
116 ctx.strokeRect(130.5, 10.5, 30, 30); | |
117 pixelShouldBe(130, 10, [0, 255, 0, 255]); | |
118 pixelShouldBe(130, 15, [0, 255, 0, 255]); | |
119 pixelShouldBe(130, 25, [0, 255, 0, 255]); | |
120 pixelShouldBe(130, 35, [0, 255, 0, 255]); | |
OLD | NEW |