dom/canvas/test/file_drawWindow_common.js

   1 function runDrawWindowTests(win, drawWindowFlags, transparentBackground) {
   2   const CANVAS_WIDTH = 200;
   3   const CANVAS_HEIGHT = 100;
   4
   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   testWrapCx.drawWindow(win, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT,
  41                         "rgb(255, 255, 255)", drawWindowFlags);
  42   refCx.fillStyle = "fuchsia";
  43   refCx.fillRect(10, 10, 20, 20);
  44   refCx.fillStyle = "aqua";
  45   refCx.fillRect(50, 10, 20, 20);
  46   refCx.fillStyle = "yellow";
  47   refCx.fillRect(90, 10, 20, 20);
  48   assertSnapshots(testCanvas, refCanvas, true /* equal */,
  49                   "full draw of source on white background", "reference");
  50
  51   clearTest("white");
  52   testWrapCx.drawWindow(win, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT,
  53                         "rgb(255, 255, 0)", drawWindowFlags);
  54   assertSnapshots(testCanvas, refCanvas,
  55                   !transparentBackground /* not equal */,
  56                   "full draw of source on yellow background", "reference");
  57
  58   clearRef("yellow");
  59   refCx.fillStyle = "fuchsia";
  60   refCx.fillRect(10, 10, 20, 20);
  61   refCx.fillStyle = "aqua";
  62   refCx.fillRect(50, 10, 20, 20);
  63   refCx.fillStyle = "yellow";
  64   refCx.fillRect(90, 10, 20, 20);
  65
  66   assertSnapshots(testCanvas, refCanvas, transparentBackground /* equal */,
  67                   "full draw of source on yellow background", "reference");
  68
  69   // Test drawing a region within the document.
  70
  71   clear("white");
  72
  73   testCx.translate(17, 31);
  74   testWrapCx.drawWindow(win, 40, 0, 40, 40,
  75                         "white", drawWindowFlags);
  76
  77   refCx.fillStyle = "aqua";
  78   refCx.fillRect(17 + 10, 31 + 10, 20, 20);
  79
  80   assertSnapshots(testCanvas, refCanvas, true /* equal */,
  81                   "draw of subrect of source with matching background",
  82                   "reference");
  83
  84   clear("blue");
  85
  86   testCx.translate(17, 31);
  87   testWrapCx.drawWindow(win, 40, 0, 35, 45,
  88                         "green", drawWindowFlags);
  89
  90   if (transparentBackground) {
  91     refCx.fillStyle = "green";
  92   } else {
  93     refCx.fillStyle = "white";
  94   }
  95   refCx.fillRect(17, 31, 35, 45);
  96   refCx.fillStyle = "aqua";
  97   refCx.fillRect(17 + 10, 31 + 10, 20, 20);
  98
  99   assertSnapshots(testCanvas, refCanvas, true /* equal */,
 100                   "draw of subrect of source with different background",
 101                   "reference");
 102
 103   // Test transparency of background not disturbing what is behind
 104   clear("blue");
 105
 106   testCx.translate(17, 31);
 107   testWrapCx.drawWindow(win, 40, 0, 35, 45,
 108                         "transparent", drawWindowFlags);
 109
 110   if (!transparentBackground) {
 111     refCx.fillStyle = "white";
 112     refCx.fillRect(17, 31, 35, 45);
 113   }
 114   refCx.fillStyle = "aqua";
 115   refCx.fillRect(17 + 10, 31 + 10, 20, 20);
 116
 117   assertSnapshots(testCanvas, refCanvas, true /* equal */,
 118                   "draw of subrect of source with different background",
 119                   "reference");
 120
 121   // Test that multiple drawWindow calls draw at correct positions.
 122   clear("blue");
 123
 124   testCx.translate(9, 3);
 125   // 5, 8 is 5, 2 from the corner of the fuchsia square
 126   testWrapCx.drawWindow(win, 5, 8, 30, 25,
 127                         "maroon", drawWindowFlags);
 128   // 35, 0 is 15, 10 from the corner of the aqua square
 129   testWrapCx.drawWindow(win, 35, 0, 50, 40,
 130                         "transparent", drawWindowFlags);
 131   testCx.translate(15, 0);
 132   // 85, 5 is 5, 5 from the corner of the yellow square
 133   testWrapCx.drawWindow(win, 85, 5, 30, 25,
 134                         "transparent", drawWindowFlags);
 135
 136   if (transparentBackground) {
 137     refCx.fillStyle = "maroon";
 138     refCx.fillRect(9, 3, 30, 25);
 139     refCx.fillStyle = "fuchsia";
 140     refCx.fillRect(9 + 5, 3 + 2, 20, 20);
 141   } else {
 142     refCx.fillStyle = "white";
 143     refCx.fillRect(9, 3, 50, 40);
 144   }
 145   refCx.fillStyle = "aqua";
 146   refCx.fillRect(9 + 15, 3 + 10, 20, 20);
 147   if (!transparentBackground) {
 148     refCx.fillStyle = "white";
 149     refCx.fillRect(9 + 15, 3, 30, 25);
 150   }
 151   refCx.fillStyle = "yellow";
 152   refCx.fillRect(9 + 15 + 5, 3 + 0 + 5, 20, 20);
 153
 154   assertSnapshots(testCanvas, refCanvas, true /* equal */,
 155                   "multiple drawWindow calls on top of each other",
 156                   "reference");
 157 }