Bug 995661 patch 3 - Add mochitest for canvas drawWindow. r=mattwoodrow

This test covers some basic cases, such as drawing the complete window
to a canvas of the same size, drawing a part of the window to a
different offset within the canvas, drawing parts of the window against
different backgrounds and against a transparent background, and doing
multiple such drawWindow calls on the same canvas.

It runs its tests both with an iframe (whose background is transparent)
and content in a new window (which has a white backdrop).

Bug 995721 will add further tests (in mochitest-chrome) that exercise
drawWindow from a toplevel chrome window, which exercises the
DRAWWINDOW_USE_WIDGET_LAYERS codepath, which these tests do not.

The final 4 tests in each set of 7 fail without patch 2 in this bug.

content/canvas/test/file_drawWindow_common.js

@@ -0,0 +1,157 @@
+function runDrawWindowTests(win, drawWindowFlags, transparentBackground) {
+  const CANVAS_WIDTH = 200;
+  const CANVAS_HEIGHT = 100;
+
+  function make_canvas() {
+    var canvas = document.createElement("canvas");
+    canvas.setAttribute("height", CANVAS_HEIGHT);
+    canvas.setAttribute("width", CANVAS_WIDTH);
+    document.body.appendChild(canvas);
+    return canvas;
+  }
+
+  var testCanvas = make_canvas();
+  var refCanvas = make_canvas();
+
+  var testCx = testCanvas.getContext("2d");
+  var refCx = refCanvas.getContext("2d");
+
+  var testWrapCx = SpecialPowers.wrap(testCx);
+  var refWrapCx = SpecialPowers.wrap(refCx);
+
+  function clearRef(fillStyle) {
+    refCx.setTransform(1, 0, 0, 1, 0, 0);
+    refCx.fillStyle = fillStyle;
+    refCx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+  }
+  function clearTest(fillStyle) {
+    testCx.setTransform(1, 0, 0, 1, 0, 0);
+    testCx.fillStyle = fillStyle;
+    testCx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+  }
+  function clear(fillStyle) {
+    clearRef(fillStyle);
+    clearTest(fillStyle);
+  }
+
+  // Basic tests of drawing the whole document on a background
+
+  clear("white");
+  testWrapCx.drawWindow(win, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT,
+                        "rgb(255, 255, 255)", drawWindowFlags);
+  refCx.fillStyle = "fuchsia";
+  refCx.fillRect(10, 10, 20, 20);
+  refCx.fillStyle = "aqua";
+  refCx.fillRect(50, 10, 20, 20);
+  refCx.fillStyle = "yellow";
+  refCx.fillRect(90, 10, 20, 20);
+  assertSnapshots(testCanvas, refCanvas, true /* equal */,
+                  "full draw of source on white background", "reference");
+
+  clearTest("white");
+  testWrapCx.drawWindow(win, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT,
+                        "rgb(255, 255, 0)", drawWindowFlags);
+  assertSnapshots(testCanvas, refCanvas,
+                  !transparentBackground /* not equal */,
+                  "full draw of source on yellow background", "reference");
+
+  clearRef("yellow");
+  refCx.fillStyle = "fuchsia";
+  refCx.fillRect(10, 10, 20, 20);
+  refCx.fillStyle = "aqua";
+  refCx.fillRect(50, 10, 20, 20);
+  refCx.fillStyle = "yellow";
+  refCx.fillRect(90, 10, 20, 20);
+
+  assertSnapshots(testCanvas, refCanvas, transparentBackground /* equal */,
+                  "full draw of source on yellow background", "reference");
+
+  // Test drawing a region within the document.
+
+  clear("white");
+
+  testCx.translate(17, 31);
+  testWrapCx.drawWindow(win, 40, 0, 40, 40,
+                        "white", drawWindowFlags);
+
+  refCx.fillStyle = "aqua";
+  refCx.fillRect(17 + 10, 31 + 10, 20, 20);
+
+  assertSnapshots(testCanvas, refCanvas, true /* equal */,
+                  "draw of subrect of source with matching background",
+                  "reference");
+
+  clear("blue");
+
+  testCx.translate(17, 31);
+  testWrapCx.drawWindow(win, 40, 0, 35, 45,
+                        "green", drawWindowFlags);
+
+  if (transparentBackground) {
+    refCx.fillStyle = "green";
+  } else {
+    refCx.fillStyle = "white";
+  }
+  refCx.fillRect(17, 31, 35, 45);
+  refCx.fillStyle = "aqua";
+  refCx.fillRect(17 + 10, 31 + 10, 20, 20);
+
+  assertSnapshots(testCanvas, refCanvas, true /* equal */,
+                  "draw of subrect of source with different background",
+                  "reference");
+
+  // Test transparency of background not disturbing what is behind
+  clear("blue");
+
+  testCx.translate(17, 31);
+  testWrapCx.drawWindow(win, 40, 0, 35, 45,
+                        "transparent", drawWindowFlags);
+
+  if (!transparentBackground) {
+    refCx.fillStyle = "white";
+    refCx.fillRect(17, 31, 35, 45);
+  }
+  refCx.fillStyle = "aqua";
+  refCx.fillRect(17 + 10, 31 + 10, 20, 20);
+
+  assertSnapshots(testCanvas, refCanvas, true /* equal */,
+                  "draw of subrect of source with different background",
+                  "reference");
+
+  // Test that multiple drawWindow calls draw at correct positions.
+  clear("blue");
+
+  testCx.translate(9, 3);
+  // 5, 8 is 5, 2 from the corner of the fuchsia square
+  testWrapCx.drawWindow(win, 5, 8, 30, 25,
+                        "maroon", drawWindowFlags);
+  // 35, 0 is 15, 10 from the corner of the aqua square
+  testWrapCx.drawWindow(win, 35, 0, 50, 40,
+                        "transparent", drawWindowFlags);
+  testCx.translate(15, 0);
+  // 85, 5 is 5, 5 from the corner of the yellow square
+  testWrapCx.drawWindow(win, 85, 5, 30, 25,
+                        "transparent", drawWindowFlags);
+
+  if (transparentBackground) {
+    refCx.fillStyle = "maroon";
+    refCx.fillRect(9, 3, 30, 25);
+    refCx.fillStyle = "fuchsia";
+    refCx.fillRect(9 + 5, 3 + 2, 20, 20);
+  } else {
+    refCx.fillStyle = "white";
+    refCx.fillRect(9, 3, 50, 40);
+  }
+  refCx.fillStyle = "aqua";
+  refCx.fillRect(9 + 15, 3 + 10, 20, 20);
+  if (!transparentBackground) {
+    refCx.fillStyle = "white";
+    refCx.fillRect(9 + 15, 3, 30, 25);
+  }
+  refCx.fillStyle = "yellow";
+  refCx.fillRect(9 + 15 + 5, 3 + 0 + 5, 20, 20);
+
+  assertSnapshots(testCanvas, refCanvas, true /* equal */,
+                  "multiple drawWindow calls on top of each other",
+                  "reference");
+}

content/canvas/test/file_drawWindow_source.html

@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+
+html, body { margin: 0; padding: 0 }
+div { display: inline-block; margin: 10px; width: 20px; height: 20px }
+
+</style
+><div style="background: fuchsia"></div
+><div style="background: aqua"></div
+><div style="background: yellow"></div>

content/canvas/test/mochitest.ini

@@ -199,6 +199,8 @@ skip-if = os == "android" || appname == "b2g"
 [test_drawImageIncomplete.html]
 [test_drawImage_document_domain.html]
 [test_drawImage_edge_cases.html]
+[test_drawWindow.html]
+support-files = file_drawWindow_source.html file_drawWindow_common.js
 [test_ImageData_ctor.html]
 [test_isPointInStroke.html]
 [test_mozDashOffset.html]

content/canvas/test/test_drawWindow.html

@@ -0,0 +1,55 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test for canvas drawWindow</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
+  <script type="application/javascript" src="file_drawWindow_common.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+
+  SimpleTest.waitForExplicitFinish();
+  window.addEventListener("load", openSourceWindow, false);
+
+  var sourceWindow;
+
+  function openSourceWindow(event) {
+    if (event.target != document) {
+      return;
+    }
+
+    sourceWindow = window.open("file_drawWindow_source.html", "",
+                               "width=200,height=100");
+    sourceWindow.addEventListener("load", runTests, false);
+  }
+
+  function runTests(event) {
+    if (event.target != sourceWindow.document) {
+      return;
+    }
+
+    // Run the tests with the source document in an <iframe> within this
+    // page, which we expect to have transparency.
+    runDrawWindowTests(document.getElementById("source").contentWindow,
+                       0, true);
+
+    // Run the tests on the same source document, but in a window opened
+    // by window.open.  We do not expect this to have transparency...
+    // except on B2G.  (This is *probably* a bug in B2G.)
+    var isB2G = /Mobile|Tablet/.test(navigator.userAgent) &&
+                !navigator.userAgent.contains("Android");
+    runDrawWindowTests(sourceWindow, 0, isB2G);
+
+    sourceWindow.close();
+
+    SimpleTest.finish();
+  }
+
+  </script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
+<iframe id="source" src="file_drawWindow_source.html" width="200" height="100"></iframe>
+</body>
+</html>