dom/canvas/test/file_drawWindow_common.js

   1 const CANVAS_WIDTH = 200;
   2 const CANVAS_HEIGHT = 100;
   3
   4 async function runDrawWindowTests(snapshotCallback, transparentBackground) {
   5   function make_canvas() {
   6     var canvas = document.createElement("canvas");
   7     canvas.setAttribute("height", CANVAS_HEIGHT);
   8     canvas.setAttribute("width", CANVAS_WIDTH);
   9     document.body.appendChild(canvas);
  10     return canvas;
  11   }
  12
  13   var testCanvas = make_canvas();
  14   var refCanvas = make_canvas();
  15
  16   var testCx = testCanvas.getContext("2d");
  17   var refCx = refCanvas.getContext("2d");
  18
  19   var testWrapCx = SpecialPowers.wrap(testCx);
  20   var refWrapCx = SpecialPowers.wrap(refCx);
  21
  22   function clearRef(fillStyle) {
  23     refCx.setTransform(1, 0, 0, 1, 0, 0);
  24     refCx.fillStyle = fillStyle;
  25     refCx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  26   }
  27   function clearTest(fillStyle) {
  28     testCx.setTransform(1, 0, 0, 1, 0, 0);
  29     testCx.fillStyle = fillStyle;
  30     testCx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  31   }
  32   function clear(fillStyle) {
  33     clearRef(fillStyle);
  34     clearTest(fillStyle);
  35   }
  36
  37   // Basic tests of drawing the whole document on a background
  38
  39   clear("white");
  40   await snapshotCallback(
  41     testWrapCx,
  42     0,
  43     0,
  44     CANVAS_WIDTH,
  45     CANVAS_HEIGHT,
  46     "rgb(255, 255, 255)"
  47   );
  48   refCx.fillStyle = "fuchsia";
  49   refCx.fillRect(10, 10, 20, 20);
  50   refCx.fillStyle = "aqua";
  51   refCx.fillRect(50, 10, 20, 20);
  52   refCx.fillStyle = "yellow";
  53   refCx.fillRect(90, 10, 20, 20);
  54   assertSnapshots(
  55     testCanvas,
  56     refCanvas,
  57     true /* equal */,
  58     null /*no fuzz*/,
  59     "full draw of source on white background",
  60     "reference"
  61   );
  62
  63   clearTest("white");
  64   await snapshotCallback(
  65     testWrapCx,
  66     0,
  67     0,
  68     CANVAS_WIDTH,
  69     CANVAS_HEIGHT,
  70     "rgb(255, 255, 0)"
  71   );
  72   assertSnapshots(
  73     testCanvas,
  74     refCanvas,
  75     !transparentBackground /* not equal */,
  76     null /*no fuzz*/,
  77     "full draw of source on yellow background",
  78     "reference"
  79   );
  80
  81   clearRef("yellow");
  82   refCx.fillStyle = "fuchsia";
  83   refCx.fillRect(10, 10, 20, 20);
  84   refCx.fillStyle = "aqua";
  85   refCx.fillRect(50, 10, 20, 20);
  86   refCx.fillStyle = "yellow";
  87   refCx.fillRect(90, 10, 20, 20);
  88
  89   assertSnapshots(
  90     testCanvas,
  91     refCanvas,
  92     transparentBackground /* equal */,
  93     null /*no fuzz*/,
  94     "full draw of source on yellow background",
  95     "reference"
  96   );
  97
  98   // Test drawing a region within the document.
  99
 100   clear("white");
 101
 102   testCx.translate(17, 31);
 103   await snapshotCallback(testWrapCx, 40, 0, 40, 40, "white");
 104
 105   refCx.fillStyle = "aqua";
 106   refCx.fillRect(17 + 10, 31 + 10, 20, 20);
 107
 108   assertSnapshots(
 109     testCanvas,
 110     refCanvas,
 111     true /* equal */,
 112     null /*no fuzz*/,
 113     "draw of subrect of source with matching background",
 114     "reference"
 115   );
 116
 117   clear("blue");
 118
 119   testCx.translate(17, 31);
 120   await snapshotCallback(testWrapCx, 40, 0, 35, 45, "green");
 121
 122   if (transparentBackground) {
 123     refCx.fillStyle = "green";
 124   } else {
 125     refCx.fillStyle = "white";
 126   }
 127   refCx.fillRect(17, 31, 35, 45);
 128   refCx.fillStyle = "aqua";
 129   refCx.fillRect(17 + 10, 31 + 10, 20, 20);
 130
 131   assertSnapshots(
 132     testCanvas,
 133     refCanvas,
 134     true /* equal */,
 135     null /*no fuzz*/,
 136     "draw of subrect of source with different background",
 137     "reference"
 138   );
 139
 140   // Test transparency of background not disturbing what is behind
 141   clear("blue");
 142
 143   testCx.translate(17, 31);
 144   await snapshotCallback(testWrapCx, 40, 0, 35, 45, "transparent");
 145
 146   if (!transparentBackground) {
 147     refCx.fillStyle = "white";
 148     refCx.fillRect(17, 31, 35, 45);
 149   }
 150   refCx.fillStyle = "aqua";
 151   refCx.fillRect(17 + 10, 31 + 10, 20, 20);
 152
 153   assertSnapshots(
 154     testCanvas,
 155     refCanvas,
 156     true /* equal */,
 157     null /*no fuzz*/,
 158     "draw of subrect of source with different background",
 159     "reference"
 160   );
 161
 162   // Test that multiple drawWindow calls draw at correct positions.
 163   clear("blue");
 164
 165   testCx.translate(9, 3);
 166   // 5, 8 is 5, 2 from the corner of the fuchsia square
 167   await snapshotCallback(testWrapCx, 5, 8, 30, 25, "maroon");
 168   // 35, 0 is 15, 10 from the corner of the aqua square
 169   await snapshotCallback(testWrapCx, 35, 0, 50, 40, "transparent");
 170   testCx.translate(15, 0);
 171   // 85, 5 is 5, 5 from the corner of the yellow square
 172   await snapshotCallback(testWrapCx, 85, 5, 30, 25, "transparent");
 173
 174   if (transparentBackground) {
 175     refCx.fillStyle = "maroon";
 176     refCx.fillRect(9, 3, 30, 25);
 177     refCx.fillStyle = "fuchsia";
 178     refCx.fillRect(9 + 5, 3 + 2, 20, 20);
 179   } else {
 180     refCx.fillStyle = "white";
 181     refCx.fillRect(9, 3, 50, 40);
 182   }
 183   refCx.fillStyle = "aqua";
 184   refCx.fillRect(9 + 15, 3 + 10, 20, 20);
 185   if (!transparentBackground) {
 186     refCx.fillStyle = "white";
 187     refCx.fillRect(9 + 15, 3, 30, 25);
 188   }
 189   refCx.fillStyle = "yellow";
 190   refCx.fillRect(9 + 15 + 5, 3 + 0 + 5, 20, 20);
 191
 192   assertSnapshots(
 193     testCanvas,
 194     refCanvas,
 195     true /* equal */,
 196     null /*no fuzz*/,
 197     "multiple drawWindow calls on top of each other",
 198     "reference"
 199   );
 200 }