1 files changed, 48 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.js b/testing/web-platform/tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.js
new file mode 100644
index 0000000000..cb2e245803
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.js
@@ -0,0 +1,48 @@
+var getRegularContextForFilter = function(filter, pattern) {
+  var c = document.createElement("canvas");
+  c.width = c.height = 80;
+  var ctx = c.getContext('2d');
+  ctx.filter = filter;
+  ctx.drawImage(pattern, 5, 5);
+  ctx.drawImage(pattern, 25, 25);
+  ctx.drawImage(pattern, 45, 45);
+  return ctx;
+};
+
+var matchImageDataResults = function(offscreenImage, regularImage, filter) {
+  assert_array_equals(offscreenImage, regularImage,
+      "The image data generated by filter " +
+      filter +
+      " should be the same for both OffscreenCanvas and regular canvas");
+};
+
+var createPatternCanvas = function() {
+  var patternCanvas = document.createElement('canvas');
+  patternCanvas.width = 20;
+  patternCanvas.height = 20;
+  var patternCtx = patternCanvas.getContext('2d');
+  patternCtx.fillStyle = '#A00';
+  patternCtx.fillRect(0, 0, 10, 10);
+  patternCtx.fillStyle = '#0A0';
+  patternCtx.fillRect(10, 0, 10, 10);
+  patternCtx.fillStyle = '#00A';
+  patternCtx.fillRect(0, 10, 10, 10);
+  patternCtx.fillStyle = "#AA0";
+  patternCtx.fillRect(10, 10, 10, 10);
+  return patternCanvas;
+};
+
+var filters =    [ "none"          ,
+      "blur(10px)"                 ,
+      "brightness(40%)"            ,
+      "contrast(20%)"              ,
+      "drop-shadow(0 0 5px green)" ,
+      "grayscale(100%)"            ,
+      "invert(100%)"               ,
+      "opacity(50%)"               ,
+      "saturate(20%)"              ,
+      "sepia(100%)"                ,
+      "sepia(1) hue-rotate(200deg)",
+      "url(#url)"                  ];
+
+