| OLD | NEW |
| (Empty) |
| 1 description("This tests behaviour of path modification APIs on an empty path."); | |
| 2 var canvas = document.createElement('canvas'); | |
| 3 canvas.width=300; | |
| 4 canvas.height=300; | |
| 5 var ctx = canvas.getContext('2d'); | |
| 6 | |
| 7 function getColor(x,y) { | |
| 8 var imageData = ctx.getImageData(x, y, 1, 1); | |
| 9 var data = imageData.data; | |
| 10 return [data[0], data[1], data[2], data[3]]; | |
| 11 } | |
| 12 | |
| 13 // Test no drawing cases | |
| 14 ctx.fillStyle = 'green'; | |
| 15 ctx.strokeStyle = 'red'; | |
| 16 ctx.lineWidth = 50; | |
| 17 | |
| 18 debug("Test lineTo") | |
| 19 ctx.beginPath(); | |
| 20 ctx.fillRect(0, 0, 100, 100); | |
| 21 ctx.lineTo(50, 50); | |
| 22 ctx.stroke(); | |
| 23 shouldBe("getColor(40,40)", "[0,128,0,255]"); | |
| 24 ctx.clearRect(0, 0, 300, 300); | |
| 25 | |
| 26 // Test when create rectangle path using a rectangle with width = height = 0. | |
| 27 debug("Test canvas.rect() with width = height = 0."); | |
| 28 ctx.strokeStyle = 'red'; | |
| 29 ctx.lineWidth = 10; | |
| 30 ctx.beginPath(); | |
| 31 ctx.rect(0, 0, 0, 0); | |
| 32 ctx.stroke(); | |
| 33 shouldBe("getColor(1,1)", "[0,0,0,0]"); | |
| 34 ctx.clearRect(0, 0, 300, 300); | |
| 35 | |
| 36 // Test path modifications that result in drawing | |
| 37 ctx.fillStyle = 'red'; | |
| 38 ctx.strokeStyle = 'green'; | |
| 39 | |
| 40 debug("Test lineTo sequence") | |
| 41 ctx.beginPath(); | |
| 42 ctx.fillRect(0, 0, 100, 100); | |
| 43 ctx.lineTo(0, 50); | |
| 44 ctx.lineTo(100, 50); | |
| 45 ctx.stroke(); | |
| 46 shouldBe("getColor(0,0)", "[255,0,0,255]"); | |
| 47 shouldBe("getColor(50,50)", "[0,128,0,255]"); | |
| 48 ctx.clearRect(0, 0, 300, 300); | |
| 49 | |
| 50 debug("Test quadraticCurveTo") | |
| 51 ctx.beginPath(); | |
| 52 ctx.fillRect(0, 0, 100, 100); | |
| 53 ctx.quadraticCurveTo(0, 50, 100, 50); | |
| 54 ctx.stroke(); | |
| 55 shouldBe("getColor(10,10)", "[255,0,0,255]"); | |
| 56 shouldBe("getColor(50,50)", "[0,128,0,255]"); | |
| 57 ctx.clearRect(0, 0, 300, 300); | |
| 58 | |
| 59 debug("Test quadraticCurveTo endpoint") | |
| 60 ctx.beginPath(); | |
| 61 ctx.fillRect(0, 0, 100, 100); | |
| 62 ctx.quadraticCurveTo(0, 50, 100, 50); | |
| 63 ctx.lineTo(50, 100); | |
| 64 ctx.stroke(); | |
| 65 shouldBe("getColor(10,10)", "[255,0,0,255]"); | |
| 66 shouldBe("getColor(99,51)", "[0,128,0,255]"); | |
| 67 shouldBe("getColor(50,50)", "[0,128,0,255]"); | |
| 68 ctx.clearRect(0, 0, 300, 300); | |
| 69 | |
| 70 debug("Test bezierCurveTo") | |
| 71 ctx.beginPath(); | |
| 72 ctx.fillRect(0, 0, 100, 100); | |
| 73 ctx.bezierCurveTo(0, 50, 50, 50, 100, 50); | |
| 74 ctx.stroke(); | |
| 75 shouldBe("getColor(10,10)", "[255,0,0,255]"); | |
| 76 shouldBe("getColor(50,50)", "[0,128,0,255]"); | |
| 77 ctx.clearRect(0, 0, 300, 300); | |
| 78 | |
| 79 debug("Test bezierCurveTo endpoint") | |
| 80 ctx.beginPath(); | |
| 81 ctx.fillRect(0, 0, 100, 100); | |
| 82 ctx.bezierCurveTo(0, 50, 50, 50, 100, 50); | |
| 83 ctx.stroke(); | |
| 84 ctx.lineTo(50, 100); | |
| 85 ctx.stroke(); | |
| 86 shouldBe("getColor(10,10)", "[255,0,0,255]"); | |
| 87 shouldBe("getColor(99,51)", "[0,128,0,255]"); | |
| 88 shouldBe("getColor(50,50)", "[0,128,0,255]"); | |
| 89 ctx.clearRect(0, 0, 300, 300); | |
| OLD | NEW |