From 8dce4b6b7ef0623ae8dcce6a4dfe55f2fd51bb04 Mon Sep 17 00:00:00 2001
From: claas-c <claascassens@t-online.de>
Date: Fri, 16 Oct 2020 19:16:08 +0200
Subject: [PATCH] Fixed SvgExport in path with gradient and added tests

---
 src/gradient.class.js                      |   2 +-
 test/visual/generic_rendering.js           |  29 +++++++++++++++++++++
 test/visual/golden/pathWithGradient.png    | Bin 0 -> 399 bytes
 test/visual/golden/pathWithGradientSvg.png | Bin 0 -> 399 bytes
 test/visual/z_svg_export.js                |  28 ++++++++++++++++++++
 5 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 test/visual/golden/pathWithGradient.png
 create mode 100644 test/visual/golden/pathWithGradientSvg.png

diff --git a/src/gradient.class.js b/src/gradient.class.js
index df9a76a5d7e..db08d06f4a2 100644
--- a/src/gradient.class.js
+++ b/src/gradient.class.js
@@ -238,7 +238,7 @@
         offsetX += object.width / 2;
         offsetY += object.height / 2;
       }
-      if (object.type === 'path') {
+      if (object.type === 'path' && this.gradientUnits !== 'percentage') {
         offsetX -= object.pathOffset.x;
         offsetY -= object.pathOffset.y;
       }
diff --git a/test/visual/generic_rendering.js b/test/visual/generic_rendering.js
index 7e4c9c8dc5e..67665945d03 100644
--- a/test/visual/generic_rendering.js
+++ b/test/visual/generic_rendering.js
@@ -332,5 +332,34 @@
     height: 400,
   });
 
+  function pathWithGradient(canvas, callback) {
+    var pathWithGradient = new fabric.Path('M 0 0 L 0 100 L 100 100 L 100 0 Z', {
+      fill: new fabric.Gradient({
+        gradientUnits: 'percentage',
+        coords: { x1: 0, y1: 0, x2: 0, y2: 1 },
+        colorStops: [
+          { offset: 0, color: 'red' },
+          { offset: 1, color: 'black' }
+        ]
+      }),
+      height: 100,
+      width: 100,
+      top: 0,
+      left: 0
+    });
+    canvas.add(pathWithGradient);
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'gradient should be applied to path',
+    code: pathWithGradient,
+    golden: 'pathWithGradient.png',
+    percentage: 0.06,
+    width: 100,
+    height: 100,
+  });
+
   tests.forEach(visualTestLoop(QUnit));
 })();
diff --git a/test/visual/golden/pathWithGradient.png b/test/visual/golden/pathWithGradient.png
new file mode 100644
index 0000000000000000000000000000000000000000..19d922c37290091b5c1f579f7ef3f018ef3111e3
GIT binary patch
literal 399
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<j1|$m}O$`B3Y)RhkE)4%caKYZ?lNlHoT|8YJ
zLn`LHy>^iEuz`rn!Tf;4mpZ-D*6j@kMPJCKIg}q<6f67vO!~j}hSGC2eKX&`>;ABP
z-Av1}`%TApmECU;Z#=T5I3%o-w=*!(kg0Q{qG6mzk3&*OSWkX_&#5j!j~-r-pq93q
zf}xqpG44*F$f>T6Z+l_N%~ae{kFHoFF;#T&rX&`jWap$DkP0M?P-*1}64D@PpwSLM
zHD`9EKf71UE%#cgamt$F@4OX;ui&<{9RV8Hc;v<e34Ilyy;|DGwwnWO;ZQl&1`?bq
z3O4I;>k$r+<v+e1gDIC50y+X{!Kp43=OHx0q>-GbU}$e}vi<_E@~T!~2s3!P`njxg
HN@xNAAz__A

literal 0
HcmV?d00001

diff --git a/test/visual/golden/pathWithGradientSvg.png b/test/visual/golden/pathWithGradientSvg.png
new file mode 100644
index 0000000000000000000000000000000000000000..19d922c37290091b5c1f579f7ef3f018ef3111e3
GIT binary patch
literal 399
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<j1|$m}O$`B3Y)RhkE)4%caKYZ?lNlHoT|8YJ
zLn`LHy>^iEuz`rn!Tf;4mpZ-D*6j@kMPJCKIg}q<6f67vO!~j}hSGC2eKX&`>;ABP
z-Av1}`%TApmECU;Z#=T5I3%o-w=*!(kg0Q{qG6mzk3&*OSWkX_&#5j!j~-r-pq93q
zf}xqpG44*F$f>T6Z+l_N%~ae{kFHoFF;#T&rX&`jWap$DkP0M?P-*1}64D@PpwSLM
zHD`9EKf71UE%#cgamt$F@4OX;ui&<{9RV8Hc;v<e34Ilyy;|DGwwnWO;ZQl&1`?bq
z3O4I;>k$r+<v+e1gDIC50y+X{!Kp43=OHx0q>-GbU}$e}vi<_E@~T!~2s3!P`njxg
HN@xNAAz__A

literal 0
HcmV?d00001

diff --git a/test/visual/z_svg_export.js b/test/visual/z_svg_export.js
index ead19acc38a..b242660c360 100644
--- a/test/visual/z_svg_export.js
+++ b/test/visual/z_svg_export.js
@@ -416,5 +416,33 @@
     width: 760,
     height: 760,
   });
+
+  function pathWithGradientSvg(canvas, callback) {
+    var pathWithGradient = new fabric.Path('M 0 0 L 0 100 L 100 100 L 100 0 Z', {
+      fill: new fabric.Gradient({
+        gradientUnits: 'percentage',
+        coords: { x1: 0, y1: 0, x2: 0, y2: 1 },
+        colorStops: [
+          { offset: 0, color: 'red' },
+          { offset: 1, color: 'black' }
+        ]
+      }),
+      height: 100,
+      width: 100,
+      top: 0,
+      left: 0
+    });
+    canvas.add(pathWithGradient);
+    toSVGCanvas(canvas, callback);
+  }
+
+  tests.push({
+    test: 'gradient should be applied to path in svg',
+    code: pathWithGradientSvg,
+    golden: 'pathWithGradientSvg.png',
+    percentage: 0.06,
+    width: 100,
+    height: 100,
+  });
   tests.forEach(visualTestLoop(QUnit));
 })();