third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-resetTransform.js

   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");