| OLD | NEW |
| (Empty) |
| 1 description("This test checks resetTransform in canvas v5"); | |
| 2 | |
| 3 var canvas = document.createElement('canvas'); | |
| 4 document.body.appendChild(canvas); | |
| 5 canvas.setAttribute('width', '100'); | |
| 6 canvas.setAttribute('height', '100'); | |
| 7 var ctx = canvas.getContext('2d'); | |
| 8 | |
| 9 debug("resetTransform should reset other transforms."); | |
| 10 ctx.save(); | |
| 11 ctx.scale(0.5, 0.5); | |
| 12 ctx.resetTransform(); | |
| 13 ctx.fillStyle = 'green'; | |
| 14 ctx.fillRect(0, 0, 100, 100); | |
| 15 ctx.restore(); | |
| 16 | |
| 17 var imageData = ctx.getImageData(98, 98, 1, 1); | |
| 18 var imgdata = imageData.data; | |
| 19 shouldBe("imgdata[0]", "0"); | |
| 20 shouldBe("imgdata[1]", "128"); | |
| 21 shouldBe("imgdata[2]", "0"); | |
| 22 | |
| 23 debug("resetTransform should not affect CTM outside of save() and restore()."); | |
| 24 ctx.save(); | |
| 25 ctx.scale(0.5, 0.5); | |
| 26 ctx.save(); | |
| 27 ctx.resetTransform(); | |
| 28 ctx.fillStyle = 'green'; | |
| 29 ctx.fillRect(0, 0, 100, 100); | |
| 30 ctx.restore(); | |
| 31 ctx.fillStyle = 'red'; | |
| 32 ctx.fillRect(0, 0, 100, 100); | |
| 33 ctx.restore(); | |
| 34 | |
| 35 imageData = ctx.getImageData(98, 98, 1, 1); | |
| 36 imgdata = imageData.data; | |
| 37 shouldBe("imgdata[0]", "0"); | |
| 38 shouldBe("imgdata[1]", "128"); | |
| 39 shouldBe("imgdata[2]", "0"); | |
| 40 | |
| 41 imageData = ctx.getImageData(48, 48, 1, 1); | |
| 42 imgdata = imageData.data; | |
| 43 shouldBe("imgdata[0]", "255"); | |
| 44 shouldBe("imgdata[1]", "0"); | |
| 45 shouldBe("imgdata[2]", "0"); | |
| 46 | |
| 47 debug("resetTransform should restore the path transform to identity."); | |
| 48 /* This should draw a green rectangle on on top of a red one. The red should not
be visible. */ | |
| 49 ctx.save(); | |
| 50 ctx.beginPath(); | |
| 51 ctx.moveTo(0, 0); | |
| 52 ctx.lineTo(100, 0); | |
| 53 ctx.lineTo(100, 100); | |
| 54 ctx.lineTo(0, 100); | |
| 55 ctx.fillStyle = 'red'; | |
| 56 ctx.fill(); | |
| 57 ctx.translate(200, 0); | |
| 58 ctx.resetTransform(); | |
| 59 ctx.fillStyle = 'green'; | |
| 60 ctx.fill(); | |
| 61 ctx.restore(); | |
| 62 | |
| 63 imageData = ctx.getImageData(50, 50, 1, 1); | |
| 64 imgdata = imageData.data; | |
| 65 shouldBe("imgdata[0]", "0"); | |
| 66 shouldBe("imgdata[1]", "128"); | |
| 67 shouldBe("imgdata[2]", "0"); | |
| 68 | |
| 69 debug("resetTransform should resolve the non-invertible CTM state."); | |
| 70 ctx.save(); | |
| 71 ctx.fillStyle = 'red'; | |
| 72 ctx.fillRect(0, 0, 100, 100); | |
| 73 ctx.beginPath(); | |
| 74 ctx.moveTo(0, 0); | |
| 75 ctx.lineTo(100, 0); | |
| 76 ctx.lineTo(100, 100); | |
| 77 ctx.lineTo(0, 100); | |
| 78 ctx.scale(0, 0); | |
| 79 ctx.resetTransform(); | |
| 80 ctx.fillStyle = 'green'; | |
| 81 ctx.fill(); | |
| 82 ctx.restore(); | |
| 83 | |
| 84 imageData = ctx.getImageData(98, 98, 1, 1); | |
| 85 imgdata = imageData.data; | |
| 86 shouldBe("imgdata[0]", "0"); | |
| 87 shouldBe("imgdata[1]", "128"); | |
| 88 shouldBe("imgdata[2]", "0"); | |
| 89 | |
| 90 debug("The path object should not be updated on the non-invertible CTM state."); | |
| 91 debug("resetTransform should restore the path object just before CTM became non-
invertible."); | |
| 92 ctx.save(); | |
| 93 ctx.fillStyle = 'red'; | |
| 94 ctx.fillRect(0, 0, 100, 100); | |
| 95 ctx.beginPath(); | |
| 96 ctx.moveTo(0, 0); | |
| 97 ctx.lineTo(100, 0); | |
| 98 ctx.lineTo(100, 50); | |
| 99 ctx.scale(0, 0); | |
| 100 ctx.lineTo(100, 100); | |
| 101 ctx.resetTransform(); | |
| 102 ctx.lineTo(0, 100); | |
| 103 ctx.fillStyle = 'green'; | |
| 104 ctx.fill(); | |
| 105 ctx.restore(); | |
| 106 | |
| 107 imageData = ctx.getImageData(98, 98, 1, 1); | |
| 108 imgdata = imageData.data; | |
| 109 shouldBe("imgdata[0]", "255"); | |
| 110 shouldBe("imgdata[1]", "0"); | |
| 111 shouldBe("imgdata[2]", "0"); | |
| 112 | |
| 113 imageData = ctx.getImageData(98, 48, 1, 1); | |
| 114 imgdata = imageData.data; | |
| 115 shouldBe("imgdata[0]", "0"); | |
| 116 shouldBe("imgdata[1]", "128"); | |
| 117 shouldBe("imgdata[2]", "0"); | |
| OLD | NEW |