From 513233bf7836a1863107e2fba92b24e5240c716a Mon Sep 17 00:00:00 2001
From: Andrea Bogazzi <andreabogazzi79@gmail.com>
Date: Sun, 16 Sep 2018 01:59:36 +0200
Subject: [PATCH] Making clipPath absolute positionable (#5199)

Added visual tests
Added property absolutePositioned and inverse
---
 .eslintrc_tests                     |   3 +-
 .travis.yml                         |  10 +-
 package.json                        |  10 +-
 src/shapes/object.class.js          |  43 ++-
 test/lib/visualCallbackQunit.js     |  41 +++
 test/node_test_setup.js             |  23 +-
 test/unit/object_clipPath.js        | 113 +++++---
 test/visual/assets/svg_linear_8.svg |   4 +-
 test/visual/clippath.js             | 418 ++++++++++++++++++++++++++++
 test/visual/golden/clipping0.png    | Bin 0 -> 1347 bytes
 test/visual/golden/clipping01.png   | Bin 0 -> 1938 bytes
 test/visual/golden/clipping1.png    | Bin 0 -> 1646 bytes
 test/visual/golden/clipping2.png    | Bin 0 -> 3842 bytes
 test/visual/golden/clipping3.png    | Bin 0 -> 5205 bytes
 test/visual/golden/clipping4.png    | Bin 0 -> 2283 bytes
 test/visual/golden/clipping5.png    | Bin 0 -> 3830 bytes
 test/visual/golden/clipping6.png    | Bin 0 -> 5124 bytes
 test/visual/golden/clipping7.png    | Bin 0 -> 4291 bytes
 test/visual/golden/clipping8.png    | Bin 0 -> 2243 bytes
 test/visual/golden/clipping9.png    | Bin 0 -> 2533 bytes
 test/visual/golden/svg_linear_8.png | Bin 2343 -> 2066 bytes
 test/visual/resize_filter.js        |  28 +-
 test/visual/svg_import.js           |  33 ++-
 testem-visual.json                  |   1 +
 24 files changed, 663 insertions(+), 64 deletions(-)
 create mode 100644 test/lib/visualCallbackQunit.js
 create mode 100644 test/visual/clippath.js
 create mode 100644 test/visual/golden/clipping0.png
 create mode 100644 test/visual/golden/clipping01.png
 create mode 100644 test/visual/golden/clipping1.png
 create mode 100644 test/visual/golden/clipping2.png
 create mode 100644 test/visual/golden/clipping3.png
 create mode 100644 test/visual/golden/clipping4.png
 create mode 100644 test/visual/golden/clipping5.png
 create mode 100644 test/visual/golden/clipping6.png
 create mode 100644 test/visual/golden/clipping7.png
 create mode 100644 test/visual/golden/clipping8.png
 create mode 100644 test/visual/golden/clipping9.png

diff --git a/.eslintrc_tests b/.eslintrc_tests
index 7b7d9f95..39d48ab8 100644
--- a/.eslintrc_tests
+++ b/.eslintrc_tests
@@ -6,7 +6,8 @@
   "globals": {
     "fabric": true,
     "QUnit": true,
-    "assert": true
+    "assert": true,
+    "pixelmatch": true
   },
   "rules": {
     "eqeqeq": 0,
diff --git a/.travis.yml b/.travis.yml
index a5dd827f..5301fcd0 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -13,6 +13,7 @@ addons:
     - libpng-dev
     - libpango1.0-dev
     - libjpeg-dev
+    - librsvg2-dev
 # libcairo2-dev is preinstalled
 stages:
   - Linting and Building
@@ -50,12 +51,14 @@ jobs:
           packages: # avoid installing packages
     - stage: Unit Tests
       env: LAUNCHER=Chrome
+      script: npm run build:fast && testem ci --port 8080 -f testem.json -l $LAUNCHER
       install: npm install testem@1.18.4 qunit@2.6.1
       addons:
         apt:
           packages: # avoid installing packages
     - stage: Unit Tests
       env: LAUNCHER=Firefox
+      script: npm run build:fast && testem ci --port 8080 -f testem.json -l $LAUNCHER
       install: npm install testem@1.18.4 qunit@2.6.1
       addons:
         apt:
@@ -72,17 +75,18 @@ jobs:
     - stage: Unit Tests
       node_js: "4"
     - stage: Visual Tests
+      env: LAUNCHER=Node CANFAIL=TRUE
       node_js: "8"
       script: npm run build:fast && npm run test:visual
     - stage: Visual Tests
       env: LAUNCHER=Chrome
-      install: npm install testem@1.18.4 qunit@2.4.1
+      install: npm install testem@1.18.4 qunit@2.6.1
       script: npm run build:fast && testem ci --port 8080 -f testem-visual.json -l $LAUNCHER
     - stage: Visual Tests
       env: LAUNCHER=Firefox
-      install: npm install testem@1.18.4 qunit@2.4.1
+      install: npm install testem@1.18.4 qunit@2.6.1
       script: npm run build:fast && testem ci --port 8080 -f testem-visual.json -l $LAUNCHER
 
-script: 'npm run build:fast && testem ci --port 8080 -f testem.json -l $LAUNCHER'
+script: npm run build:fast && npm run test
 
 dist: trusty
diff --git a/package.json b/package.json
index c13da032..476f4e9a 100644
--- a/package.json
+++ b/package.json
@@ -48,9 +48,10 @@
     "test:single": "./node_modules/qunit/bin/qunit test/node_test_setup.js test/lib",
     "test": "istanbul cover ./node_modules/qunit/bin/qunit test/node_test_setup.js test/lib test/unit",
     "test:visual": "./node_modules/qunit/bin/qunit test/node_test_setup.js test/lib test/visual",
+    "test:visual:single": "./node_modules/qunit/bin/qunit test/node_test_setup.js test/lib",
     "test:all": "npm run test && npm run test:visual",
     "lint": "eslint --config .eslintrc.json src",
-    "lint_tests": "eslint test/unit --config .eslintrc_tests",
+    "lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests",
     "export_dist_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric.js && cp package.json ../fabricjs.com/lib/package.json && cp -r src HEADER.js lib ../fabricjs.com/build/files/",
     "export_tests_to_site": "cp test/unit/*.js ../fabricjs.com/test/unit && cp -r test/visual/* ../fabricjs.com/test/visual && cp -r test/fixtures/* ../fabricjs.com/test/fixtures",
     "all": "npm run build && npm run test && npm run test:visual && npm run lint && npm run lint_tests && npm run export_dist_to_site && npm run export_tests_to_site",
@@ -59,8 +60,8 @@
     "testem:ci": "testem ci"
   },
   "optionalDependencies": {
-    "canvas": "1.6.x",
-    "jsdom": "9.x.x",
+    "canvas": "^1.6.12",
+    "jsdom": "^9.12.0",
     "xmldom": "0.1.x"
   },
   "devDependencies": {
@@ -70,7 +71,8 @@
     "qunit": "^2.6.1",
     "testem": "^1.18.4",
     "uglify-js": "3.3.x",
-    "pixelmatch": "^4.0.2"
+    "pixelmatch": "^4.0.2",
+    "chalk": "^2.4.1"
   },
   "engines": {
     "node": ">=4.0.0"
diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js
index 6f06947a..803c9f54 100644
--- a/src/shapes/object.class.js
+++ b/src/shapes/object.class.js
@@ -612,6 +612,27 @@
      */
     clipPath: undefined,
 
+    /**
+     * Meaningfull ONLY when the object is used as clipPath.
+     * if true, the clipPath will make the object clip to the outside of the clipPath
+     * since 2.4.0
+     * @type boolean
+     * @default false
+     */
+    inverted: false,
+
+    /**
+     * Meaningfull ONLY when the object is used as clipPath.
+     * if true, the clipPath will have its top and left relative to canvas, and will
+     * not be influenced by the object transform. This will make the clipPath relative
+     * to the canvas, but clipping just a particular object.
+     * WARNING this is beta, this feature may change or be renamed.
+     * since 2.4.0
+     * @type boolean
+     * @default false
+     */
+    absolutePositioned: false,
+
     /**
      * Constructor
      * @param {Object} [options] Options object
@@ -842,6 +863,8 @@
 
       if (this.clipPath) {
         object.clipPath = this.clipPath.toObject(propertiesToInclude);
+        object.clipPath.inverted = this.clipPath.inverted;
+        object.clipPath.absolutePositioned = this.clipPath.absolutePositioned;
       }
 
       fabric.util.populateWithProperties(this, object, propertiesToInclude);
@@ -1120,8 +1143,17 @@
       ctx.save();
       // DEBUG: uncomment this line, comment the following
       // ctx.globalAlpha = 0.4
-      ctx.globalCompositeOperation = 'destination-in';
+      if (path.inverted) {
+        ctx.globalCompositeOperation = 'destination-out';
+      }
+      else {
+        ctx.globalCompositeOperation = 'destination-in';
+      }
       //ctx.scale(1 / 2, 1 / 2);
+      if (path.absolutePositioned) {
+        var m = fabric.util.invertTransform(this.calcTransformMatrix());
+        ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+      }
       path.transform(ctx);
       ctx.scale(1 / path.zoomX, 1 / path.zoomY);
       ctx.drawImage(path._cacheCanvas, -path.cacheTranslationX, -path.cacheTranslationY);
@@ -1182,7 +1214,10 @@
         return true;
       }
       else {
-        if (this.dirty || (this.statefullCache && this.hasStateChanged('cacheProperties'))) {
+        if (this.dirty ||
+          (this.clipPath && this.clipPath.absolutePositioned) ||
+          (this.statefullCache && this.hasStateChanged('cacheProperties'))
+        ) {
           if (this._cacheCanvas && !skipCanvas) {
             var width = this.cacheWidth / this.zoomX;
             var height = this.cacheHeight / this.zoomY;
@@ -1252,8 +1287,8 @@
 
     _setClippingProperties: function(ctx) {
       ctx.globalAlpha = 1;
-      ctx.lineWidth = 0;
-      ctx.fillStyle = 'black';
+      ctx.strokeStyle = 'transparent';
+      ctx.fillStyle = '#000000';
     },
 
     /**
diff --git a/test/lib/visualCallbackQunit.js b/test/lib/visualCallbackQunit.js
new file mode 100644
index 00000000..b987a46b
--- /dev/null
+++ b/test/lib/visualCallbackQunit.js
@@ -0,0 +1,41 @@
+(function(window) {
+  function visualCallback() {
+    this.currentArgs = {};
+  }
+
+  visualCallback.prototype.addArguments = function(argumentObj) {
+    this.currentArgs = {
+      enabled: true,
+      fabric: argumentObj.fabric,
+      golden: argumentObj.golden,
+      diff: argumentObj.diff,
+    };
+  };
+
+  visualCallback.prototype.testDone = function(details) {
+    if (window && document && this.currentArgs.enabled) {
+      var fabricCanvas = this.currentArgs.fabric;
+      var ouputImageDataRef = this.currentArgs.diff;
+      var goldenCanvasRef = this.currentArgs.golden;
+      var id = 'qunit-test-output-' + details.testId;
+      var node = document.getElementById(id);
+      var fabricCopy = document.createElement('canvas');
+      var diff = document.createElement('canvas');
+      diff.width = fabricCopy.width = fabricCanvas.width;
+      diff.height = fabricCopy.height = fabricCanvas.height;
+      diff.getContext('2d').putImageData(ouputImageDataRef, 0, 0);
+      fabricCopy.getContext('2d').drawImage(fabricCanvas, 0, 0);
+      var _div = document.createElement('div');
+      _div.appendChild(goldenCanvasRef);
+      _div.appendChild(fabricCopy);
+      _div.appendChild(diff);
+      node.appendChild(_div);
+      // after one run, disable
+      this.currentArgs.enabled = false;
+    }
+  };
+
+  if (window) {
+    window.visualCallback = new visualCallback();
+  }
+})(this);
diff --git a/test/node_test_setup.js b/test/node_test_setup.js
index 1d2a50e5..7542ca7e 100644
--- a/test/node_test_setup.js
+++ b/test/node_test_setup.js
@@ -1,8 +1,29 @@
 // set the fabric famework as a global for tests
+var chalk = require('chalk');
 global.fabric = require('../dist/fabric').fabric;
 global.pixelmatch = require('pixelmatch');
 global.fs = require('fs');
-
+global.visualCallback = {
+  addArguments: function() {},
+};
+global.imageDataToChalk = function(imageData) {
+  // actually this does not work on travis-ci, so commenting it out
+  return '';
+  var block = String.fromCharCode(9608)
+  var data = imageData.data;
+  var width = imageData.width;
+  var height = imageData.height;
+  var outputString = '';
+  var cp = 0;
+  for (var i = 0; i < height; i++) {
+    outputString += '\n';
+    for (var j = 0; j < width; j++) {
+      cp = (i * width + j) * 4;
+      outputString += chalk.rgb(data[cp], data[cp + 1], data[cp + 2])(block);
+    }
+  }
+  return outputString;
+};
 QUnit.config.testTimeout = 15000;
 QUnit.config.noglobals = true;
 QUnit.config.hidePassed = true;
diff --git a/test/unit/object_clipPath.js b/test/unit/object_clipPath.js
index 26146caa..a434e22b 100644
--- a/test/unit/object_clipPath.js
+++ b/test/unit/object_clipPath.js
@@ -16,46 +16,50 @@
 
   QUnit.test('toObject with clipPath', function(assert) {
     var emptyObjectRepr = {
-      'version':                  fabric.version,
-      'type':                     'object',
-      'originX':                  'left',
-      'originY':                  'top',
-      'left':                     0,
-      'top':                      0,
-      'width':                    0,
-      'height':                   0,
-      'fill':                     'rgb(0,0,0)',
-      'stroke':                   null,
-      'strokeWidth':              1,
-      'strokeDashArray':          null,
-      'strokeLineCap':            'butt',
-      'strokeLineJoin':           'miter',
-      'strokeMiterLimit':         4,
-      'scaleX':                   1,
-      'scaleY':                   1,
-      'angle':                    0,
-      'flipX':                    false,
-      'flipY':                    false,
-      'opacity':                  1,
-      'shadow':                   null,
-      'visible':                  true,
-      'backgroundColor':          '',
-      'clipTo':                   null,
-      'fillRule':                 'nonzero',
-      'paintFirst':               'fill',
-      'globalCompositeOperation': 'source-over',
-      'skewX':                      0,
-      'skewY':                      0,
-      'transformMatrix':          null
+      version:                  fabric.version,
+      type:                     'object',
+      originX:                  'left',
+      originY:                  'top',
+      left:                     0,
+      top:                      0,
+      width:                    0,
+      height:                   0,
+      fill:                     'rgb(0,0,0)',
+      stroke:                   null,
+      strokeWidth:              1,
+      strokeDashArray:          null,
+      strokeLineCap:            'butt',
+      strokeLineJoin:           'miter',
+      strokeMiterLimit:         4,
+      scaleX:                   1,
+      scaleY:                   1,
+      angle:                    0,
+      flipX:                    false,
+      flipY:                    false,
+      opacity:                  1,
+      shadow:                   null,
+      visible:                  true,
+      backgroundColor:          '',
+      clipTo:                   null,
+      fillRule:                 'nonzero',
+      paintFirst:               'fill',
+      globalCompositeOperation: 'source-over',
+      skewX:                      0,
+      skewY:                      0,
+      transformMatrix:          null,
     };
 
     var cObj = new fabric.Object();
     assert.deepEqual(emptyObjectRepr, cObj.toObject());
 
     cObj.clipPath = new fabric.Object();
-
     var expected = fabric.util.object.clone(emptyObjectRepr);
-    expected.clipPath = emptyObjectRepr;
+    var expectedClipPath = fabric.util.object.clone(emptyObjectRepr);
+    expectedClipPath = fabric.util.object.extend(expectedClipPath, {
+      inverted: cObj.clipPath.inverted,
+      absolutePositioned: cObj.clipPath.absolutePositioned,
+    });
+    expected.clipPath = expectedClipPath;
     assert.deepEqual(expected, cObj.toObject());
   });
 
@@ -71,6 +75,20 @@
     });
   });
 
+  QUnit.test('from object with clipPath inverted, absolutePositioned', function(assert) {
+    var done = assert.async();
+    var rect = new fabric.Rect({ width: 100, height: 100 });
+    rect.clipPath = new fabric.Circle({ radius: 50, inverted: true, absolutePositioned: true });
+    var toObject = rect.toObject();
+    fabric.Rect.fromObject(toObject, function(rect) {
+      assert.ok(rect.clipPath instanceof fabric.Circle, 'clipPath is enlived');
+      assert.equal(rect.clipPath.radius, 50, 'radius is restored correctly');
+      assert.equal(rect.clipPath.inverted, true, 'inverted is restored correctly');
+      assert.equal(rect.clipPath.absolutePositioned, true, 'absolutePositioned is restored correctly');
+      done();
+    });
+  });
+
   QUnit.test('from object with clipPath, nested', function(assert) {
     var done = assert.async();
     var rect = new fabric.Rect({ width: 100, height: 100 });
@@ -85,4 +103,33 @@
       done();
     });
   });
+
+  QUnit.test('from object with clipPath, nested inverted, absolutePositioned', function(assert) {
+    var done = assert.async();
+    var rect = new fabric.Rect({ width: 100, height: 100 });
+    rect.clipPath = new fabric.Circle({ radius: 50 });
+    rect.clipPath.clipPath = new fabric.Text('clipPath', { inverted: true, absolutePositioned: true});
+    var toObject = rect.toObject();
+    fabric.Rect.fromObject(toObject, function(rect) {
+      assert.ok(rect.clipPath instanceof fabric.Circle, 'clipPath is enlived');
+      assert.equal(rect.clipPath.radius, 50, 'radius is restored correctly');
+      assert.ok(rect.clipPath.clipPath instanceof fabric.Text, 'neted clipPath is enlived');
+      assert.equal(rect.clipPath.clipPath.text, 'clipPath', 'instance is restored correctly');
+      assert.equal(rect.clipPath.clipPath.inverted, true, 'instance inverted is restored correctly');
+      assert.equal(rect.clipPath.clipPath.absolutePositioned, true, 'instance absolutePositioned is restored correctly');
+      done();
+    });
+  });
+
+  QUnit.test('_setClippingProperties fix the context props', function(assert) {
+    var canvas = new fabric.Canvas();
+    var rect = new fabric.Rect({ width: 100, height: 100 });
+    canvas.contextContainer.fillStyle = 'red';
+    canvas.contextContainer.strokeStyle = 'blue';
+    canvas.contextContainer.globalAlpha = 0.3;
+    rect._setClippingProperties(canvas.contextContainer);
+    assert.equal(canvas.contextContainer.fillStyle, '#000000', 'fillStyle is reset');
+    assert.equal(new fabric.Color(canvas.contextContainer.strokeStyle).getAlpha(), 0, 'stroke style is reset');
+    assert.equal(canvas.contextContainer.globalAlpha, 1, 'globalAlpha is reset');
+  });
 })();
diff --git a/test/visual/assets/svg_linear_8.svg b/test/visual/assets/svg_linear_8.svg
index fe21f47f..d8affc9d 100644
--- a/test/visual/assets/svg_linear_8.svg
+++ b/test/visual/assets/svg_linear_8.svg
@@ -8,6 +8,6 @@
 </linearGradient>
 </defs>
 
-<rect x="0" y="0" width="200" height="100"
+<rect x="1" y="1" width="200" height="100" stroke-width="2"
     style="fill: url(#three_stops); stroke: black;"/>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/test/visual/clippath.js b/test/visual/clippath.js
new file mode 100644
index 00000000..0c5482e8
--- /dev/null
+++ b/test/visual/clippath.js
@@ -0,0 +1,418 @@
+(function() {
+  fabric.enableGLFiltering = false;
+  fabric.isWebglSupported = false;
+  fabric.Object.prototype.objectCaching = true;
+  var _pixelMatch;
+  var visualCallback;
+  var fs;
+  var imageDataToChalk;
+  if (fabric.isLikelyNode) {
+    fs = global.fs;
+    _pixelMatch = global.pixelmatch;
+    visualCallback = global.visualCallback;
+    imageDataToChalk = global.imageDataToChalk;
+  }
+  else {
+    _pixelMatch = pixelmatch;
+    if (window) {
+      visualCallback = window.visualCallback;
+    }
+    imageDataToChalk = function() { return ''; };
+  }
+  var fabricCanvas = this.canvas = new fabric.Canvas(null, {
+    enableRetinaScaling: false, renderOnAddRemove: false, width: 200, height: 200,
+  });
+  var pixelmatchOptions = {
+    includeAA: false,
+    threshold: 0.095
+  };
+
+  function getAbsolutePath(path) {
+    var isAbsolute = /^https?:/.test(path);
+    if (isAbsolute) { return path; };
+    var imgEl = fabric.document.createElement('img');
+    imgEl.src = path;
+    var src = imgEl.src;
+    imgEl = null;
+    return src;
+  }
+
+  // function getFixtureName(filename) {
+  //   var finalName = '/fixtures/' + filename;
+  //   return fabric.isLikelyNode ? (__dirname + '/..' + finalName) : getAbsolutePath('/test' + finalName);
+  // }
+
+  function getGoldeName(filename) {
+    var finalName = '/golden/' + filename;
+    return fabric.isLikelyNode ? (__dirname + finalName) : getAbsolutePath('/test/visual' + finalName);
+  }
+
+  function getImage(filename, original, callback) {
+    if (fabric.isLikelyNode && original) {
+      try {
+        fs.statSync(filename);
+      }
+      catch (err) {
+        var dataUrl = original.toDataURL().split(',')[1];
+        console.log('creating original for ', filename);
+        fs.writeFileSync(filename, dataUrl, { encoding: 'base64' });
+      }
+    }
+    var img = fabric.document.createElement('img');
+    img.onload = function() {
+      img.onload = null;
+      callback(img);
+    };
+    img.onerror = function(err) {
+      img.onerror = null;
+      callback(img);
+      console.log('Image loading errored', err);
+    };
+    img.src = filename;
+  }
+
+  function beforeEachHandler() {
+    fabricCanvas.clipPath = null;
+    fabricCanvas.viewportTransform = [1, 0, 0, 1, 0, 0];
+    fabricCanvas.clear();
+    fabricCanvas.renderAll();
+  }
+
+  var tests = [];
+
+  function clipping0(canvas, callback) {
+    var clipPath = new fabric.Circle({ radius: 100, strokeWidth: 0, top: -10, left: -10 });
+    var obj = new fabric.Rect({ top: 0, left: 0, strokeWidth: 0, width: 200, height: 200, fill: 'rgba(0,255,0,0.5)'});
+    obj.clipPath = clipPath;
+    canvas.add(obj);
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'Clip a rect with a circle, no zoom',
+    code: clipping0,
+    golden: 'clipping0.png',
+    newModule: 'Clipping shapes',
+    percentage: 0.06,
+  });
+
+  function clipping01(canvas, callback) {
+    var clipPath = new fabric.Circle({ radius: 50, strokeWidth: 40, top: -50, left: -50, fill: 'transparent' });
+    var obj = new fabric.Rect({ top: 0, left: 0, strokeWidth: 0, width: 200, height: 200, fill: 'rgba(0,255,0,0.5)'});
+    obj.clipPath = clipPath;
+    canvas.add(obj);
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'A clippath ignores fill and stroke for drawing, not positioning',
+    code: clipping01,
+    golden: 'clipping01.png',
+    newModule: 'Clipping shapes',
+    percentage: 0.06,
+  });
+
+  function clipping1(canvas, callback) {
+    var zoom = 20;
+    canvas.setZoom(zoom);
+    var clipPath = new fabric.Circle({ radius: 5, strokeWidth: 0, top: -2, left: -2 });
+    var obj = new fabric.Rect({ top: 0, left: 0, strokeWidth: 0, width: 10, height: 10, fill: 'rgba(255,0,0,0.5)'});
+    obj.clipPath = clipPath;
+    canvas.add(obj);
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'Clip a rect with a circle, with zoom',
+    code: clipping1,
+    golden: 'clipping1.png',
+    percentage: 0.06,
+  });
+
+  function clipping2(canvas, callback) {
+    var clipPath = new fabric.Circle({
+      radius: 100,
+      top: -100,
+      left: -100
+    });
+    var group = new fabric.Group([
+      new fabric.Rect({ strokeWidth: 0, width: 100, height: 100, fill: 'red' }),
+      new fabric.Rect({ strokeWidth: 0, width: 100, height: 100, fill: 'yellow', left: 100 }),
+      new fabric.Rect({ strokeWidth: 0, width: 100, height: 100, fill: 'blue', top: 100 }),
+      new fabric.Rect({ strokeWidth: 0, width: 100, height: 100, fill: 'green', left: 100, top: 100 })
+    ], { strokeWidth: 0 });
+    group.clipPath = clipPath;
+    canvas.add(group);
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'Clip a group with a circle',
+    code: clipping2,
+    golden: 'clipping2.png',
+    percentage: 0.06,
+  });
+
+  // function clipping3(canvas, callback) {
+  //   var clipPath = new fabric.Circle({ radius: 100, top: -100, left: -100 });
+  //   var small = new fabric.Circle({ radius: 50, top: -50, left: -50 });
+  //   var small2 = new fabric.Rect({ width: 30, height: 30, top: -50, left: -50 });
+  //   var group = new fabric.Group([
+  //     new fabric.Rect({ strokeWidth: 0, width: 100, height: 100, fill: 'red', clipPath: small }),
+  //     new fabric.Rect({ strokeWidth: 0, width: 100, height: 100, fill: 'yellow', left: 100 }),
+  //     new fabric.Rect({ strokeWidth: 0, width: 100, height: 100, fill: 'blue', top: 100, clipPath: small2 }),
+  //     new fabric.Rect({ strokeWidth: 0, width: 100, height: 100, fill: 'green', left: 100, top: 100 })
+  //   ], { strokeWidth: 0 });
+  //   group.clipPath = clipPath;
+  //   canvas.add(group);
+  //   canvas.renderAll();
+  //   callback(canvas.lowerCanvasEl);
+  // }
+
+  // FIX ON NODE
+  // tests.push({
+  //   test: 'Isolation of clipPath of group and inner objects',
+  //   code: clipping3,
+  //   golden: 'clipping3.png',
+  //   percentage: 0.06,
+  // });
+
+  function clipping4(canvas, callback) {
+    var clipPath = new fabric.Circle({ radius: 20, strokeWidth: 0, top: -10, left: -10, scaleX: 2, skewY: 45 });
+    var obj = new fabric.Rect({ top: 0, left: 0, strokeWidth: 0, width: 200, height: 200, fill: 'rgba(0,255,0,0.5)'});
+    obj.fill = new fabric.Gradient({
+      type: 'linear',
+      coords: {
+        x1: 0,
+        y1: 0,
+        x2: 200,
+        y2: 200,
+      },
+      colorStops: [
+        {
+          offset: 0,
+          color: 'red',
+        },
+        {
+          offset: 1,
+          color: 'blue',
+        }
+      ]
+    });
+    obj.clipPath = clipPath;
+    canvas.add(obj);
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'ClipPath can be transformed',
+    code: clipping4,
+    golden: 'clipping4.png',
+    percentage: 0.06,
+  });
+
+  function clipping5(canvas, callback) {
+    var clipPath = new fabric.Circle({ radius: 20, strokeWidth: 0, top: -10, left: -10, scaleX: 2, skewY: 45 });
+    var clipPath1 = new fabric.Circle({ radius: 15, rotate: 45, strokeWidth: 0, top: -100, left: -50, scaleX: 2, skewY: 45 });
+    var clipPath2 = new fabric.Circle({ radius: 10, strokeWidth: 0, top: -20, left: -20, scaleY: 2, skewX: 45 });
+    var group = new fabric.Group([clipPath, clipPath1, clipPath2]);
+    var obj = new fabric.Rect({ top: 0, left: 0, strokeWidth: 0, width: 200, height: 200, fill: 'rgba(0,255,0,0.5)'});
+    obj.fill = new fabric.Gradient({
+      type: 'linear',
+      coords: {
+        x1: 0,
+        y1: 0,
+        x2: 200,
+        y2: 200,
+      },
+      colorStops: [
+        {
+          offset: 0,
+          color: 'red',
+        },
+        {
+          offset: 1,
+          color: 'blue',
+        }
+      ]
+    });
+    obj.clipPath = group;
+    canvas.add(obj);
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'ClipPath can be a group with many objects',
+    code: clipping5,
+    golden: 'clipping5.png',
+    percentage: 0.06,
+  });
+
+  function clipping6(canvas, callback) {
+    var clipPath = new fabric.Circle({ radius: 20, strokeWidth: 0, top: -10, left: -10, scaleX: 2, skewY: 45 });
+    var clipPath1 = new fabric.Circle({ radius: 15, rotate: 45, strokeWidth: 0, top: -100, left: -50, scaleX: 2, skewY: 45 });
+    var clipPath2 = new fabric.Circle({ radius: 10, strokeWidth: 0, top: -20, left: -20, scaleY: 2, skewX: 45 });
+    var group = new fabric.Group([clipPath, clipPath1, clipPath2]);
+    var obj = new fabric.Rect({ top: 0, left: 0, strokeWidth: 0, width: 200, height: 200, fill: 'rgba(0,255,0,0.5)'});
+    obj.fill = new fabric.Gradient({
+      type: 'linear',
+      coords: {
+        x1: 0,
+        y1: 0,
+        x2: 200,
+        y2: 200,
+      },
+      colorStops: [
+        {
+          offset: 0,
+          color: 'red',
+        },
+        {
+          offset: 1,
+          color: 'blue',
+        }
+      ]
+    });
+    obj.clipPath = group;
+    group.inverted = true;
+    canvas.add(obj);
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'ClipPath can be inverted, it will clip what is outside the clipPath',
+    code: clipping6,
+    golden: 'clipping6.png',
+    percentage: 0.06,
+  });
+
+  // function clipping7(canvas, callback) {
+  //   var clipPath = new fabric.Circle({ radius: 30, strokeWidth: 0, top: -30, left: -30, skewY: 45 });
+  //   var obj1 = new fabric.Rect({ top: 0, left: 100, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(0,255,0,0.8)'});
+  //   var obj2 = new fabric.Rect({ top: 0, left: 0, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(255,255,0,0.8)'});
+  //   var obj3 = new fabric.Rect({ top: 100, left: 0, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(0,255,255,0.8)'});
+  //   var obj4 = new fabric.Rect({ top: 100, left: 100, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(255,0,0,0.8)'});
+  //   obj1.clipPath = clipPath;
+  //   obj2.clipPath = clipPath;
+  //   obj3.clipPath = clipPath;
+  //   obj4.clipPath = clipPath;
+  //   canvas.add(obj1);
+  //   canvas.add(obj2);
+  //   canvas.add(obj3);
+  //   canvas.add(obj4);
+  //   canvas.renderAll();
+  //   callback(canvas.lowerCanvasEl);
+  // }
+
+  // FIX ON NODE
+  // tests.push({
+  //   test: 'Many Objects can share the same clipPath',
+  //   code: clipping7,
+  //   golden: 'clipping7.png',
+  //   percentage: 0.06,
+  // });
+
+  function clipping8(canvas, callback) {
+    var clipPath = new fabric.Circle({ radius: 60, strokeWidth: 0, top: 40, left: 40, absolutePositioned: true });
+    var obj1 = new fabric.Rect({ top: 0, left: 100, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(0,255,0,0.8)'});
+    var obj2 = new fabric.Rect({ top: 0, left: 0, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(255,255,0,0.8)'});
+    var obj3 = new fabric.Rect({ top: 100, left: 0, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(0,255,255,0.8)'});
+    var obj4 = new fabric.Rect({ top: 100, left: 100, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(255,0,0,0.8)'});
+    obj1.clipPath = clipPath;
+    obj2.clipPath = clipPath;
+    obj3.clipPath = clipPath;
+    canvas.add(obj1);
+    canvas.add(obj2);
+    canvas.add(obj3);
+    canvas.add(obj4);
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'an absolute positioned clipPath, shared',
+    code: clipping8,
+    golden: 'clipping8.png',
+    percentage: 0.06,
+  });
+
+  function clipping9(canvas, callback) {
+    var clipPath = new fabric.Circle({ radius: 60, strokeWidth: 0, top: 10, left: 10 });
+    var obj1 = new fabric.Rect({ top: 0, left: 100, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(0,255,0,0.8)'});
+    var obj2 = new fabric.Rect({ top: 0, left: 0, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(255,255,0,0.8)'});
+    var obj3 = new fabric.Rect({ top: 100, left: 0, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(0,255,255,0.8)'});
+    var obj4 = new fabric.Rect({ top: 100, left: 100, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(255,0,0,0.8)'});
+    canvas.add(obj1);
+    canvas.add(obj2);
+    canvas.add(obj3);
+    canvas.add(obj4);
+    canvas.clipPath = clipPath;
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'a clipPath on the canvas',
+    code: clipping9,
+    golden: 'clipping9.png',
+    percentage: 0.06,
+  });
+
+
+  tests.forEach(function(testObj) {
+    var testName = testObj.test;
+    var code = testObj.code;
+    var percentage = testObj.percentage;
+    var golden = testObj.golden;
+    var newModule = testObj.newModule;
+    if (newModule) {
+      QUnit.module(newModule, {
+        beforeEach: beforeEachHandler,
+      });
+    }
+    QUnit.test(testName, function(assert) {
+      var done = assert.async();
+      code(fabricCanvas, function(renderedCanvas) {
+        var width = renderedCanvas.width;
+        var height = renderedCanvas.height;
+        var totalPixels = width * height;
+        var imageDataCanvas = renderedCanvas.getContext('2d').getImageData(0, 0, width, height).data;
+        var canvas = fabric.document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        var ctx = canvas.getContext('2d');
+        var output = ctx.getImageData(0, 0, width, height);
+        getImage(getGoldeName(golden), renderedCanvas, function(goldenImage) {
+          ctx.drawImage(goldenImage, 0, 0);
+          visualCallback.addArguments({
+            enabled: true,
+            golden: canvas,
+            fabric: renderedCanvas,
+            diff: output
+          });
+          var imageDataGolden = ctx.getImageData(0, 0, width, height).data;
+          var differentPixels = _pixelMatch(imageDataCanvas, imageDataGolden, output.data, width, height, pixelmatchOptions);
+          var percDiff = differentPixels / totalPixels * 100;
+          var okDiff = totalPixels * percentage;
+          var isOK = differentPixels < okDiff;
+          assert.ok(
+            isOK,
+            testName + ' has too many different pixels ' + differentPixels + '(' + okDiff + ') representing ' + percDiff + '%'
+          );
+          if (!isOK) {
+            var stringa = imageDataToChalk(output);
+            console.log(stringa);
+          }
+          done();
+        });
+      });
+    });
+  });
+})();
diff --git a/test/visual/golden/clipping0.png b/test/visual/golden/clipping0.png
new file mode 100644
index 0000000000000000000000000000000000000000..bcf570be1f9df95ea11b7732c7a7e2124db4d1f8
GIT binary patch
literal 1347
zcmbtUeN<8h6vro1=-|{?9W8`sg5b%rv{Z&TG)=&-oHaAcN-?9gNIGhUrkKr2($_OF
z%CAk<G!qH5w0yPgY{Bb8OC*nWvNAUlrOqlO`(n7x+1dZyd+xpG-t+tY?z#Wmqw5l4
zT;?sBhrwW6c-*M3?NvV)I465<->7P^7pIKam?(^G&YO^*t1%etYhF~u`u%n02U8Ur
zHjs3WJ1VWcvPHY(wNV-ksN=^DG?m_g)sVW$W~1C;2rL<1$u9@$dd_zZG5a0QC_=`n
z6tn7nro`MuwCjJmHPw3|&L#1F!;J!q;>kAHQJZO-p5ntr+Tshaz&ic*T6I`Mk!@o7
zZMpVI5?l^!C(uMxCX<zL>nb@`lh3lHNmsCGEVx%OJ{_dnRh5MOZPiIqqBtk7?xvwO
zVhg@3+>|=D8Fo!>4jsvFswLvggN#1q+8n0E#iGQQnN!4}Xw7hr^5v?1?zsES4a=6(
zQe%totH&RXKx=}w(<E?V-FO96$4b-+f$iU(B=N<|P-7Uv2nmy_nKWm(P_am->ND(S
zO4TcKkLtRpL)zOZTFHFeOTSd!@v%1ly&j3UGRx9}0Mx2@8jYAiw+~ylIEm@#6(mL&
z5B6?C`>2hySzlu6V&iGf{vJ4)_sqAT&B|co%O;H4>+ORfk7I4t3$MPyG$d(GkEfeT
zBbT@}FnZuOcw@t8bKFsmd<&|gUP?|Gc|ieEcjS7$c~2Et$yw*Hn)CeS)LB~Ygll>P
zc(di|!`I$upPf?Ak;kJ$t&}I4&w<p1xhEbc^1@B*8(gf0z|W)4u0{`!Hp|w66)M42
z*g5BK(Hg8qZ;Fq<_J^)}u`d+8L3H@NPc9`bSg$LrXc36uhd!0@ME#GgB0WWb*0zck
zNd4i<DpQ1M&(qxwQh)gsUZ0hmaRMhuI$3z;a<g|D7p!O!EJKfvX8JFY%2cWwh(RKY
zra>oaNW2&O-jOdIr%bn)=-*hA8^>-0yX(96(3uY;N22MFdrfiUz2Ae0`knmBv(LgK
z9RW|?gF$op?%M_#=el?)%0kLF`U0NO=;WZ8BjkcUEdlKZWpDFO6ZIZ@s7#~eNEQ`p
zZFBAD8J5VhXwc-9>dy)fOf#^7S+wWbc#0&L1}M&5zI#6((QV8F6sjp+rG=a^j29d;
z$=RxcxDw9U$+a+olyg8sazD9ohJ1(*8ukS(^hx-hb5=RN4sJtqkNl)@H@mtSp?-kk
z7|hO@IYpAj={CVdNcp1zKv4>N@xq_8odV|TS8e8tJFRZLT+pDtC&8pAfJhA~L43jL
z(ObuPlU9)?q{o76W5`6~EApWfB6n+cHEEKK?eK-JF1M0PhKSq%%b!MP`$`LTpnsO?
zEOGsH3a_MOS2^I6l%a4Z5F(p)?3K$29Iz-<LWl&5Z~`|#*#2zr;6<y)`6|u`Yr&a7
z!Wz)bln|mobNwV6Gew7Huz_yU&h_FI=ntcr>VtrAO7Ps_lpX!$T?ytdALwFTgwuaH
zY~`*Mfbb_lao88xp@1;E%Zj;`2%5WXnH)f<n+bQE&t(Pg^nf@c%sX~A9m>N7g3?YO
z$N{gce~&nCv+L`=yEq41`mu`v=NiD%PI1?lV1W*AD35HvcNVYok`lO}87Htye?%2q
r{+-vC|DRfQ!1b4R*n!F*eaQ!h&7C_lT(sF`b1#b*oe-sp+*bMz>(WUM

literal 0
HcmV?d00001

diff --git a/test/visual/golden/clipping01.png b/test/visual/golden/clipping01.png
new file mode 100644
index 0000000000000000000000000000000000000000..af577e421db354c31bbad30d134c75473524a609
GIT binary patch
literal 1938
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
b$$n0W#T;s}Z)szRi!9*mK*ZOcBvJnh)Ma(p

literal 0
HcmV?d00001

diff --git a/test/visual/golden/clipping1.png b/test/visual/golden/clipping1.png
new file mode 100644
index 0000000000000000000000000000000000000000..22ad3f0f1d75640022296dfab73587071ed5f58e
GIT binary patch
literal 1646
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
Tq%~n52+ncuLAzobzxaOvD<kTt

literal 0
HcmV?d00001

diff --git a/test/visual/golden/clipping2.png b/test/visual/golden/clipping2.png
new file mode 100644
index 0000000000000000000000000000000000000000..99c8eab271d0741c3f574b1f43fe30afb33c0e9f
GIT binary patch
literal 3842
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

literal 0
HcmV?d00001

diff --git a/test/visual/golden/clipping3.png b/test/visual/golden/clipping3.png
new file mode 100644
index 0000000000000000000000000000000000000000..e62010e417f3ccdddb845bfee498750582b9435d
GIT binary patch
literal 5205
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

literal 0
HcmV?d00001

diff --git a/test/visual/golden/clipping4.png b/test/visual/golden/clipping4.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e28b4890086b235b9d0a8372cfbc6b77325718b
GIT binary patch
literal 2283
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

literal 0
HcmV?d00001

diff --git a/test/visual/golden/clipping5.png b/test/visual/golden/clipping5.png
new file mode 100644
index 0000000000000000000000000000000000000000..a4c1ad6ed44c75a460529892a5009cd2d4333341
GIT binary patch
literal 3830
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

literal 0
HcmV?d00001

diff --git a/test/visual/golden/clipping6.png b/test/visual/golden/clipping6.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a363c297fdc691dc6a0a94b5182b13ddbd020b1
GIT binary patch
literal 5124
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

literal 0
HcmV?d00001

diff --git a/test/visual/golden/clipping7.png b/test/visual/golden/clipping7.png
new file mode 100644
index 0000000000000000000000000000000000000000..da7f253e51759fc5450c5121ef3a408678c6d4c9
GIT binary patch
literal 4291
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

literal 0
HcmV?d00001

diff --git a/test/visual/golden/clipping8.png b/test/visual/golden/clipping8.png
new file mode 100644
index 0000000000000000000000000000000000000000..16b569389bda6ea5b70e95effafc7d44426003d0
GIT binary patch
literal 2243
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
W){z!Y6frcF04_%;4vmLt>Hh^&V(a?=

literal 0
HcmV?d00001

diff --git a/test/visual/golden/clipping9.png b/test/visual/golden/clipping9.png
new file mode 100644
index 0000000000000000000000000000000000000000..48ad5b81862a832b5054dc6bed81ff6e04c66866
GIT binary patch
literal 2533
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

literal 0
HcmV?d00001

diff --git a/test/visual/golden/svg_linear_8.png b/test/visual/golden/svg_linear_8.png
index 8f6aec888b2e14ace12fea24b6efaa6c596cea83..f6a988a8a76c02e0a71251ae6922562ddfd986a2 100644
GIT binary patch
literal 2066
zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!r*W_W$&~1=mlzn>Z+f~ohE&A8y_;L~$W5d*
zu`%6y^RhLX-d^8QJhuK2I@GK$ar}9h?dNnS-`gekw)xA(ZH=0pIqTbGdk%#Ul8tB6
zng9I$E-cZluwmc)&E+rr9THgAJha?!?|<d&Wq)sPxu3f{bN}43&-a&K&%d0vJ#w#I
zkM!g3-G#sJrhTpY^E>g*%inLyAODWqcmL^Y`Re;0|LT3#+4FwJ^WW<4t;JHUeRqHS
zE)i9+SN?zY@{f<R{o>1iy?^zZ{eHRa`6-n#XJ4~d?n#oX|Nrmxmu#&KlbEu<zhA%n
z(5u52D&ku%TdjFkP@Ni4D=_Q*(GOPV9&61pKfWQV<$_Gy_qcxfr^y;;6Td!r?SFsy
zX&bT6e*)$7XS5&S@>qFP#AHqBVjYuJSJD<I-pxGbZ)V#lDitAh?c?M1ZKXdf{&*bT
zV;pz*)UVd}cGA4whplSn#F|ae-?b%t$Ko#QniHm35qCFd&HHb;!9<7m^^<!hYrGqN
zd(4<xEH$ldY2w|Tv$QujF?%1rw83P}?bUmkv`sd=Ic$}8v|#FohqW2yv6m*l>o|Oh
zt82>5f{5_h{@XtvU)(NxZu0MS$Mm0m(z<o{{qB8M(~bJY-_%!S$?kiYwX|)jP-uH)
zL4=H0`_aVIrI+U3%m6yJCi<fH?0Ich)fjg9hJY;7;a%;Uml*+c#MZ1Cr;nXXOii5$
zbPrG@EKI8~LSCkDvxVuQOkSC5^WRlo*|2Go4@8%?_EeBRCI$=d+arG_^pF|jh1^A8
zuVhB#7M%`t3g?VfEt$F@K4Itd3wv9hZ+<biz4V@k_pWp#^Fx>H2HUmW-~JM+(Q6Jr
ztoi(z-*)<kZ>ts<-(7!xOZ<lms7ipgzglTA-*)0HkY&!wFo&7U%UhnheD~aUWxH;_
zyr;jx#`Jh_F_^eC863VkyxO+Q&wYNp!9s_x`|vCA2#~@&kdBup!9JhXHg#U`c6m-y
z9bi0O+JLOhWX<Qjt?Pt#dA-m|+<#yb|7km&-@u6S^4I$f3QO<9UgtG`Z+Nyit?aS-
z*W6DrPUls>#2k{F2{res@>;(6H=cL92m>RfFhVA*st6qROB0tq7Xb>%?z#Hn#^NM>
z**<mq_zDXpOYPHOQ-Prqw6e&>2)nMri29-m@8!qQ;_k8Hs@p#kS0$(aetIn3`fjZ1
zp1oeH5}!Vs4vpVDr?qKm%Xe3EzCBzd7q<UE(W4c@?sF|(9l7}B2{>hdeWTuIRrsai
z_sJiD5!Q3wnw;JKTqgha%zdAJec5YYHQ)MO#y;i$+V6M&`=$OoG1@t78q`0jOM_CQ
znQ^)Ixm%_@$i}GV%TjZ$J=oIr<;kYYcm2x4IZfAmnS&5Evjhi|So>8ANNhdYa7nr6
z@FNfh7>VEre6-=#6HwTJg7fhKuvGV9uYLny+yXg3<Df!WlY_x|p)jJC87u`d;t<q`
zOT}FfQ&;=?0SyA>8B;z`@&Fsb0Zl8w$b||Gd52xeP53%{m!$HC{X!D+-TwScWP0A;
zVsFEr-|t|>*eJTeNlY<8(1($cC5we6taoxChk}3uungB}(o|@0=xsQ#s?dmwk%fta
zV@-pr0V|8Z3PFJgQ$IJw1_uU^c8+BY3{0j>OskKb)L;?dP*B*wBz90lz+r)#L&8-H
z$yNp?MxeO|lx8q7aa;i!BBj1qz(Jv*;Q&_zORxh&qZDIf=;IU-CJq(>fe6O#1TGGR
u0A+;@S#x@v7#bOvn6yV7M_$PNXZ*SA)xDD9(>H*1J%gvKpUXO@geCx9<B^j9

literal 2343
zcmeHJ`B&0e90fXf2$wt_O{83!A~nd=w5GJ&Gqu!cLaZ!N%hXXbbHfE^2C*!c#ss%g
zD`h-xjJt)@(Ud6!OGe7dG6@+)C1u1Ef%%%vnf{0AymQ|ByybI0_ult@cvt;>J+<LT
zI0yvN_B!m21%bdAAg01JfIjS0+Ykr@oAq*c`62nt%xEn2wVi%H0mV0H)4X8V%gBxB
z08c|UK1xEc_|j)528y?;uNDQ<jljqt9zUL_$EHfTXc0HIQD5;<6^%T|bf_U5w$xsl
zE5Po*XScaVER?ShmriEf&f}{@3$3jsgGmYMGv!Sm<{aBjT`HSb(&i7#9<EU5`Jy=K
zk|0j>yS<_#<Z0+saldk2)G;_Y$R4b~dYjU!-p?f%eD9c+iZEe4(TJx}#G&4Ud|?3>
z9Xr^hPIoY+c|HpwTIF$Sl32GE{n$IjWpY2UQ=jpo>5w)1A!;^7LF+p(=&)&Qw8ZNc
zlc*{<{W^n}Ui@xorHVKwA0Hj5qe-u98qa%Y(>J#(FBKJ=a_?`>qEj_nnh}O?k{k<v
zzG1^+L~<u-cZmmK$LpE|8ihWbCJ;t(L)fj2qPf=MH>6-{_K{rkN96-!)R}1+3e3Ei
zYB3OFlT$X%JD>1WmKE3XWOkyvTtQt_J8^|COc6NGGxjcfdP<+@5ROjRmznpt;=4<R
z!|<>uRs2GM2Dweou*Vx#=frWv`^;z&w$xuMy^X}>Q?eMk0&E>R>Lg5)upkbI#Pff=
z7udrLbJmumwHpFU_((h*WfX}IZ=tLm0s81B)7?H7s0_D<wmzL!c^-I}BrT{kut$aA
zV5*RU33xg=i?Q5-mN0TEOt)Zw3DK_B)*Kjh1-w{iuAV&n?D_Rvy~Y3+hK^*qqbL%8
z07<R0$7i>>AR>W^%8?=@6)AXoVtajWvre5G8{50qrk<6yA72Y!E$=)BD0186h6gBZ
zsn=;(PcWdxzwH{Tl@Pj2aL4$&eO^}Ne=e_!Bk@`bZvdF94QB>`a`s~+j6-}DQ&Lbg
zt6V|=hJDs|<N-<VyH(1%I9<T3&(LOxA{JSqZSlsQZ9ghww|CYyAaSIF6o&3bAWgZi
z5Ge>Ens6gd+Lbnm4n{wS;#E?rDF%<5KkviPSAuE*f_KgfS>#B3w}auATC>OLD=Sog
zZBFcZCDposFiL;_Ud6qiJnz1lZKn^NI{ll;e73@pWGr%BU>-1RegTnVpPk7+rTK;i
zmENk`J|I3Tte>IKQL~p-vQGB3879doe@<z(${u1wEt<vMFGJb+ARagWxyICG`YEO=
z(6xnJX3tDp&_ItWWHzfxH}*^omegPF7*fs?{a&<>(sT(6e}$|{$B>8b?v0)ZGo~is
z1%$wCgFhJcy(cxLv!%kueJv>>Q}Tl-->;nD$2>O%q&6UZGon+{Q!*s-I964!Z?whP
zZLye7@0!&HGH3kPZo}%B7b+Z_@(pJm9NOP>cu#mrcZdn_PEEhus;YcFfM?ORm2A-O
zRBE2HCWM<y-&47&@6=>Wb!r32E;jqW4YM_ShnGENiC;9lNse6i<x;;L9{#_%k@V@K
zmA3Sq3D%o!r`08{QPahJ5@A%t2<ZqvK=vwT#Ho#|pbKg7M-{uq2gDrqhNU!Ns8Kj?
zGSb9@M^Bb54V8Pwz2&6MD-f4hvb{5(+Ar<cm&*}z#;oM|>|Jat1xLtgSKIQK-Q^vQ
zYJsdl*uTPAJpLhp=ocVAd+qpbMMZy?Kvk{0C<wP#UVQFHa#Y=BIcBJCVwYd86k3ke
zK$h-S?bgzPPoqD^dt0g(o7O>dq;j3+8xW|4^G|5FHKz9$h(7Ets29#Zp;rxpBB(ab
zU^w|$CLwEb$5m`5M2mx{1VMW&9x-|@7r9$HgDK~<{4*g0{a`%dzV{vdN>Hz@27qM^
zx30GiLLGzqXA+Fo=~p@<pa@)X<F6J_AoV&J?r(M-qJ=&Z;B^xMr1pcL7P^PP6oZ<&
mZQfvjMrh_Y8vnYn0xb+n)$C3jO9VbZATJMJ_eR&?pZ@{gJ}&nF

diff --git a/test/visual/resize_filter.js b/test/visual/resize_filter.js
index 01df6b52..b7e1682b 100644
--- a/test/visual/resize_filter.js
+++ b/test/visual/resize_filter.js
@@ -1,10 +1,19 @@
 (function() {
   fabric.enableGLFiltering = false;
   fabric.isWebglSupported = false;
-  var _pixelMatch = pixelmatch;
+  var _pixelMatch;
+  var visualCallback;
+  var fs;
   if (fabric.isLikelyNode) {
-    var fs = global.fs;
+    fs = global.fs;
     _pixelMatch = global.pixelmatch;
+    visualCallback = global.visualCallback;
+  }
+  else {
+    _pixelMatch = pixelmatch;
+    if (window) {
+      visualCallback = window.visualCallback;
+    }
   }
   var fabricCanvas = this.canvas = new fabric.Canvas(null, {enableRetinaScaling: false, renderOnAddRemove: false});
   var pixelmatchOptions = {
@@ -56,7 +65,7 @@
     img.src = filename;
   }
 
-  function afterEachHandler() {
+  function beforeEachHandler() {
     fabricCanvas.setZoom(1);
     fabricCanvas.setDimensions({
       width: 300,
@@ -205,7 +214,7 @@
     var newModule = testObj.newModule;
     if (newModule) {
       QUnit.module(newModule, {
-        afterEach: afterEachHandler,
+        beforeEach: beforeEachHandler,
       });
     }
     QUnit.test(testName, function(assert) {
@@ -219,18 +228,23 @@
         canvas.width = width;
         canvas.height = height;
         var ctx = canvas.getContext('2d');
-        var output = ctx.getImageData(0, 0, width, height).data;
+        var output = ctx.getImageData(0, 0, width, height);
         getImage(getGoldeName(golden), renderedCanvas, function(goldenImage) {
           ctx.drawImage(goldenImage, 0, 0);
+          visualCallback.addArguments({
+            enabled: true,
+            golden: canvas,
+            fabric: renderedCanvas,
+            diff: output
+          });
           var imageDataGolden = ctx.getImageData(0, 0, width, height).data;
-          var differentPixels = _pixelMatch(imageDataCanvas, imageDataGolden, output, width, height, pixelmatchOptions);
+          var differentPixels = _pixelMatch(imageDataCanvas, imageDataGolden, output.data, width, height, pixelmatchOptions);
           var percDiff = differentPixels / totalPixels * 100;
           var okDiff = totalPixels * percentage;
           assert.ok(
             differentPixels < okDiff,
             testName + ' has too many different pixels ' + differentPixels + '(' + okDiff + ') representing ' + percDiff + '%'
           );
-          console.log('Different pixels:', differentPixels, '/', totalPixels, ' diff:', percDiff.toFixed(3), '%');
           done();
         });
       });
diff --git a/test/visual/svg_import.js b/test/visual/svg_import.js
index 7c5c60ab..3195ac4c 100644
--- a/test/visual/svg_import.js
+++ b/test/visual/svg_import.js
@@ -1,8 +1,19 @@
 (function() {
-  var _pixelMatch = pixelmatch;
+  fabric.enableGLFiltering = false;
+  fabric.isWebglSupported = false;
+  var _pixelMatch;
+  var visualCallback;
+  var fs;
   if (fabric.isLikelyNode) {
-    var fs = global.fs;
+    fs = global.fs;
     _pixelMatch = global.pixelmatch;
+    visualCallback = global.visualCallback;
+  }
+  else {
+    _pixelMatch = pixelmatch;
+    if (window) {
+      visualCallback = window.visualCallback;
+    }
   }
   var fabricCanvas = this.canvas = new fabric.Canvas(null, {enableRetinaScaling: false, renderOnAddRemove: false});
   var pixelmatchOptions = {
@@ -63,23 +74,28 @@
         height: height
       });
       var ctx = canvas.getContext('2d');
+      var outputImageData = ctx.getImageData(0, 0, width, height);
       ctx.drawImage(img, 0, 0);
-      var goldenImageData = ctx.getImageData(0, 0, width, height).data;
-      ctx.clearRect(0, 0, width, height);
-      var outputImageData = ctx.getImageData(0, 0, width, height).data;
+      var goldenImageData = ctx.getImageData(0, 0, width, height);
       getAsset(filename, function(err, string) {
         fabric.loadSVGFromString(string, function(objects) {
           fabricCanvas.add.apply(fabricCanvas, objects);
           fabricCanvas.renderAll();
+          visualCallback.addArguments({
+            enabled: true,
+            golden: canvas,
+            fabric: fabricCanvas.lowerCanvasEl,
+            diff: outputImageData
+          });
           var fabricImageData = fabricCanvas.contextContainer.getImageData(0, 0, width, height).data;
-          callback(fabricImageData, goldenImageData, width, height, outputImageData);
+          callback(fabricImageData, goldenImageData.data, width, height, outputImageData.data);
         });
       });
     });
   }
 
   QUnit.module('Simple svg import test', {
-    afterEach: function() {
+    beforeEach: function() {
       fabricCanvas.clear();
       fabricCanvas.renderAll();
     }
@@ -116,7 +132,7 @@
     ['svg_radial_13', 4],
   ].forEach(function(filenameArray) {
     var filename = filenameArray[0];
-    var expectedPixels = filenameArray[1];
+    // var expectedPixels = filenameArray[1];
     QUnit.test('Import test for file ' + filename, function(assert) {
       var done = assert.async();
       loadAndPrepareCanvasFor(filename, function(imageDataCanvas, imageDataGolden, width, height, output) {
@@ -126,7 +142,6 @@
         var percDiff = differentPixels / totalPixels * 100;
         assert.ok(differentPixels < totalPixels * percentage, 'Image ' + filename + ' has too many different pixels ' + differentPixels + ' representing ' + percDiff + '%');
         done();
-        console.log('Different pixels for', filename, ':', differentPixels, '/', totalPixels, 'expected:', expectedPixels, ' diff:', percDiff.toFixed(3), '%');
       });
     });
   });
diff --git a/testem-visual.json b/testem-visual.json
index a971ca9c..a54e77d4 100644
--- a/testem-visual.json
+++ b/testem-visual.json
@@ -3,6 +3,7 @@
   "serve_files": [
     "dist/fabric.js",
     "test/lib/pixelmatch.js",
+    "test/lib/visualCallbackQunit.js",
     "test/visual/*.js"
   ],
   "routes": {