Chromium Code Reviews| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head></head> | |
| 4 <body> | |
| 5 <canvas id="mycanvas" width="400" height="200"></canvas> | |
| 6 <script src="../js/resources/js-test-pre.js"></script> | |
| 7 <script> | |
| 8 description("This tests checks that arc can draw correct circumferences with lin eTo."); | |
| 9 var canvas = document.getElementById('mycanvas'); | |
| 10 var ctx = canvas.getContext('2d'); | |
| 11 | |
| 12 ctx.lineWidth = 7; | |
| 13 ctx.fillStyle = 'rgb(255, 255, 255)'; | |
| 14 ctx.strokeStyle = 'rgb(0, 0, 0)'; | |
| 15 ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| 16 | |
| 17 var imageData = ctx.getImageData(1, 1, 1, 1); | |
| 18 shouldBe("imageData.data[1]", "255"); | |
| 19 | |
| 20 debug("Check clockwise circumference."); | |
| 21 debug(" 1. sweepAngle == 2PI"); | |
| 22 ctx.save(); | |
| 23 ctx.beginPath(); | |
| 24 ctx.moveTo(0, 10); | |
| 25 ctx.arc(60, 50, 30, -Math.PI, Math.PI, false); | |
|
alph
2013/07/10 13:06:29
How about drawing e.g. 100 arcs in a loop to form
dshwang
2013/07/10 13:36:42
good idea! I'll do it. I hope that making bitmaps
| |
| 26 ctx.lineTo(0, 90); | |
| 27 ctx.stroke(); | |
| 28 ctx.restore(); | |
| 29 | |
| 30 imageData = ctx.getImageData(14, 29, 1, 1); | |
| 31 shouldBe("imageData.data[1]", "0"); | |
| 32 imageData = ctx.getImageData(16, 68, 1, 1); | |
| 33 shouldBe("imageData.data[1]", "0"); | |
| 34 imageData = ctx.getImageData(40, 26, 1, 1); | |
| 35 shouldBe("imageData.data[1]", "0"); | |
| 36 imageData = ctx.getImageData(80, 28, 1, 1); | |
| 37 shouldBe("imageData.data[1]", "0"); | |
| 38 imageData = ctx.getImageData(80, 72, 1, 1); | |
| 39 shouldBe("imageData.data[1]", "0"); | |
| 40 imageData = ctx.getImageData(40, 74, 1, 1); | |
| 41 shouldBe("imageData.data[1]", "0"); | |
| 42 | |
| 43 debug(" 2. sweepAngle == PI"); | |
| 44 ctx.translate(100, 0); | |
| 45 ctx.save(); | |
| 46 ctx.beginPath(); | |
| 47 ctx.moveTo(0, 10); | |
| 48 ctx.arc(60, 50, 30, -Math.PI, 0, false); | |
| 49 ctx.lineTo(0, 90); | |
| 50 ctx.stroke(); | |
| 51 ctx.restore(); | |
| 52 | |
| 53 imageData = ctx.getImageData(114, 29, 1, 1); | |
| 54 shouldBe("imageData.data[1]", "0"); | |
| 55 imageData = ctx.getImageData(174, 56, 1, 1); | |
| 56 shouldBe("imageData.data[1]", "0"); | |
| 57 imageData = ctx.getImageData(140, 26, 1, 1); | |
| 58 shouldBe("imageData.data[1]", "0"); | |
| 59 imageData = ctx.getImageData(180, 28, 1, 1); | |
| 60 shouldBe("imageData.data[1]", "0"); | |
| 61 imageData = ctx.getImageData(180, 72, 1, 1); | |
| 62 shouldBe("imageData.data[1]", "255"); | |
| 63 imageData = ctx.getImageData(152, 79, 1, 1); | |
| 64 shouldBe("imageData.data[1]", "255"); | |
| 65 | |
| 66 debug(" 3. sweepAngle > 2PI"); | |
| 67 ctx.translate(100, 0); | |
| 68 ctx.save(); | |
| 69 ctx.beginPath(); | |
| 70 ctx.moveTo(0, 10); | |
| 71 ctx.arc(60, 50, 30, -Math.PI, Math.PI * 2.5, false); | |
| 72 ctx.lineTo(0, 90); | |
| 73 ctx.stroke(); | |
| 74 ctx.restore(); | |
| 75 | |
| 76 imageData = ctx.getImageData(214, 29, 1, 1); | |
| 77 shouldBe("imageData.data[1]", "0"); | |
| 78 imageData = ctx.getImageData(240, 83, 1, 1); | |
| 79 shouldBe("imageData.data[1]", "0"); | |
| 80 imageData = ctx.getImageData(240, 26, 1, 1); | |
| 81 shouldBe("imageData.data[1]", "0"); | |
| 82 imageData = ctx.getImageData(280, 28, 1, 1); | |
| 83 shouldBe("imageData.data[1]", "0"); | |
| 84 imageData = ctx.getImageData(280, 72, 1, 1); | |
| 85 shouldBe("imageData.data[1]", "0"); | |
| 86 imageData = ctx.getImageData(240, 74, 1, 1); | |
| 87 shouldBe("imageData.data[1]", "0"); | |
| 88 | |
| 89 debug(" 4. sweepAngle < 0"); | |
| 90 ctx.translate(100, 0); | |
| 91 ctx.save(); | |
| 92 ctx.beginPath(); | |
| 93 ctx.moveTo(0, 10); | |
| 94 ctx.arc(60, 50, 30, Math.PI * 1.5, -Math.PI, false); | |
| 95 ctx.lineTo(0, 90); | |
| 96 ctx.stroke(); | |
| 97 ctx.restore(); | |
| 98 | |
| 99 imageData = ctx.getImageData(336, 16, 1, 1); | |
| 100 shouldBe("imageData.data[1]", "0"); | |
| 101 imageData = ctx.getImageData(316, 68, 1, 1); | |
| 102 shouldBe("imageData.data[1]", "0"); | |
| 103 imageData = ctx.getImageData(340, 26, 1, 1); | |
| 104 shouldBe("imageData.data[1]", "255"); | |
| 105 imageData = ctx.getImageData(380, 28, 1, 1); | |
| 106 shouldBe("imageData.data[1]", "0"); | |
| 107 imageData = ctx.getImageData(380, 72, 1, 1); | |
| 108 shouldBe("imageData.data[1]", "0"); | |
| 109 imageData = ctx.getImageData(340, 74, 1, 1); | |
| 110 shouldBe("imageData.data[1]", "0"); | |
| 111 | |
| 112 debug("Check anticlockwise circumference."); | |
| 113 debug(" 1. sweepAngle == 2PI"); | |
| 114 ctx.translate(-300, 100); | |
| 115 ctx.save(); | |
| 116 ctx.beginPath(); | |
| 117 ctx.moveTo(0, 10); | |
| 118 ctx.arc(60, 50, 30, Math.PI, -Math.PI, true); | |
| 119 ctx.lineTo(0, 90); | |
| 120 ctx.stroke(); | |
| 121 ctx.restore(); | |
| 122 | |
| 123 imageData = ctx.getImageData(14, 129, 1, 1); | |
| 124 shouldBe("imageData.data[1]", "0"); | |
| 125 imageData = ctx.getImageData(16, 168, 1, 1); | |
| 126 shouldBe("imageData.data[1]", "0"); | |
| 127 imageData = ctx.getImageData(40, 126, 1, 1); | |
| 128 shouldBe("imageData.data[1]", "0"); | |
| 129 imageData = ctx.getImageData(80, 128, 1, 1); | |
| 130 shouldBe("imageData.data[1]", "0"); | |
| 131 imageData = ctx.getImageData(80, 172, 1, 1); | |
| 132 shouldBe("imageData.data[1]", "0"); | |
| 133 imageData = ctx.getImageData(40, 174, 1, 1); | |
| 134 shouldBe("imageData.data[1]", "0"); | |
| 135 | |
| 136 debug(" 2. sweepAngle == PI"); | |
| 137 ctx.translate(100, 0); | |
| 138 ctx.save(); | |
| 139 ctx.beginPath(); | |
| 140 ctx.moveTo(0, 10); | |
| 141 ctx.arc(60, 50, 30, Math.PI, 0, true); | |
| 142 ctx.lineTo(0, 90); | |
| 143 ctx.stroke(); | |
| 144 ctx.restore(); | |
| 145 | |
| 146 imageData = ctx.getImageData(14, 129, 1, 1); | |
| 147 shouldBe("imageData.data[1]", "0"); | |
| 148 imageData = ctx.getImageData(158, 164, 1, 1); | |
| 149 shouldBe("imageData.data[1]", "0"); | |
| 150 imageData = ctx.getImageData(140, 126, 1, 1); | |
| 151 shouldBe("imageData.data[1]", "255"); | |
| 152 imageData = ctx.getImageData(180, 128, 1, 1); | |
| 153 shouldBe("imageData.data[1]", "255"); | |
| 154 imageData = ctx.getImageData(180, 172, 1, 1); | |
| 155 shouldBe("imageData.data[1]", "0"); | |
| 156 imageData = ctx.getImageData(140, 174, 1, 1); | |
| 157 shouldBe("imageData.data[1]", "0"); | |
| 158 | |
| 159 debug(" 3. sweepAngle > 2PI"); | |
| 160 ctx.translate(100, 0); | |
| 161 ctx.save(); | |
| 162 ctx.beginPath(); | |
| 163 ctx.moveTo(0, 10); | |
| 164 ctx.arc(60, 50, 30, Math.PI, Math.PI * -1.5, true); | |
| 165 ctx.lineTo(0, 90); | |
| 166 ctx.stroke(); | |
| 167 ctx.restore(); | |
| 168 | |
| 169 imageData = ctx.getImageData(214, 129, 1, 1); | |
| 170 shouldBe("imageData.data[1]", "0"); | |
| 171 imageData = ctx.getImageData(240, 183, 1, 1); | |
| 172 shouldBe("imageData.data[1]", "0"); | |
| 173 imageData = ctx.getImageData(240, 126, 1, 1); | |
| 174 shouldBe("imageData.data[1]", "0"); | |
| 175 imageData = ctx.getImageData(280, 128, 1, 1); | |
| 176 shouldBe("imageData.data[1]", "0"); | |
| 177 imageData = ctx.getImageData(280, 172, 1, 1); | |
| 178 shouldBe("imageData.data[1]", "0"); | |
| 179 imageData = ctx.getImageData(240, 174, 1, 1); | |
| 180 shouldBe("imageData.data[1]", "0"); | |
| 181 | |
| 182 debug(" 4. sweepAngle < 0"); | |
| 183 ctx.translate(100, 0); | |
| 184 ctx.save(); | |
| 185 ctx.beginPath(); | |
| 186 ctx.moveTo(0, 10); | |
| 187 ctx.arc(60, 50, 30, Math.PI * -1.5, Math.PI, true); | |
| 188 ctx.lineTo(0, 90); | |
| 189 ctx.stroke(); | |
| 190 ctx.restore(); | |
| 191 | |
| 192 imageData = ctx.getImageData(314, 129, 1, 1); | |
| 193 shouldBe("imageData.data[1]", "0"); | |
| 194 imageData = ctx.getImageData(316, 168, 1, 1); | |
| 195 shouldBe("imageData.data[1]", "0"); | |
| 196 imageData = ctx.getImageData(340, 126, 1, 1); | |
| 197 shouldBe("imageData.data[1]", "0"); | |
| 198 imageData = ctx.getImageData(380, 128, 1, 1); | |
| 199 shouldBe("imageData.data[1]", "0"); | |
| 200 imageData = ctx.getImageData(380, 172, 1, 1); | |
| 201 shouldBe("imageData.data[1]", "0"); | |
| 202 imageData = ctx.getImageData(340, 174, 1, 1); | |
| 203 shouldBe("imageData.data[1]", "255"); | |
| 204 | |
| 205 </script> | |
| 206 <script src="../js/resources/js-test-post.js"></script> | |
| 207 </body> | |
| 208 </html> | |
| 209 | |
| OLD | NEW |