Fix the spell error which makes the gradientTransform doesn't work

src/shapes/object.class.js

@@ -1309,7 +1309,7 @@
         ctx.lineJoin = decl.strokeLineJoin;
         ctx.miterLimit = decl.strokeMiterLimit;
         if (stroke.toLive) {
-          if (stroke.gradientUnits === 'percentage' || stroke.gradientTrasnform || stroke.patternTransform) {
+          if (stroke.gradientUnits === 'percentage' || stroke.gradientTransform || stroke.patternTransform) {
             // need to transform gradient in a pattern.
             // this is a slow process. If you are hitting this codepath, and the object
             // is not using caching, you should consider switching it on.

src/shapes/text.class.js

@@ -1019,7 +1019,7 @@
     handleFiller: function(ctx, property, filler) {
       var offsetX, offsetY;
       if (filler.toLive) {
-        if (filler.gradientUnits === 'percentage' || filler.gradientTrasnform || filler.patternTransform) {
+        if (filler.gradientUnits === 'percentage' || filler.gradientTransform || filler.patternTransform) {
           // need to transform gradient in a pattern.
           // this is a slow process. If you are hitting this codepath, and the object
           // is not using caching, you should consider switching it on.

test/visual/generic_rendering.js

@@ -361,5 +361,112 @@
     height: 100,
   });
 
+  function gradientStroke(canvas, callback) {
+		var line = new fabric.Line([10, 10, 200, 200], {
+			stroke: {
+				toLive(ctx) {
+					var gradient = new fabric.Gradient({
+            type: 'linear',
+            coords: {
+              x1: 20,
+              y1: 0,
+              x2: 80,
+              y2: 0,
+            },
+            colorStops: [
+              {
+                offset: 0,
+                color: 'green',
+              },
+              {
+                offset: 0.4,
+                color: 'cyan',
+              },
+              {
+                offset: 1,
+                color: 'red',
+              },
+            ],
+          }).toLive(ctx);
+					return gradient;
+				},
+				gradientTransform: [1, 0, 0, 1, -50, 0],
+			},
+			strokeWidth: 20,
+		});
+		canvas.add(
+			line
+		);
+		canvas.renderAll();
+		callback(canvas.lowerCanvasEl);
+
+	}
+
+	tests.push({
+		test: 'Use the gradient strokeStyle for line(other shape is ok)',
+		code: gradientStroke,
+		golden: 'gradientStroke.png',
+		newModule: 'Gradient stroke',
+		percentage: 0.09,
+		width: 300,
+		height: 300,
+	});
+
+	function textGradientFill(canvas, callback) {
+		var text = new fabric.Text('Some Text', {
+			fontSize: 40,
+			left: 50,
+			top: 30,
+			fontWeight: 'bold',
+			fill: {
+				toLive(ctx) {
+					var gradient = new fabric.Gradient({
+            type: 'radial',
+            coords: {
+              x1: 0,
+              y1: 0,
+              r1: 100,
+              x2: 0,
+              y2: 0,
+              r2: 10
+            },
+            colorStops: [
+              {
+                offset: 0,
+                color: 'white',
+              },
+              {
+                offset: 0.6,
+                color: 'indianred',
+              },
+              {
+                offset: 1,
+                color: 'green',
+              },
+            ],
+          }).toLive(ctx);
+					return gradient;
+				},
+				gradientTransform: [1, 0, 0, 1, 10, 50],
+			},
+		});
+		canvas.add(
+			text
+		);
+		canvas.renderAll();
+		callback(canvas.lowerCanvasEl);
+
+	}
+
+	tests.push({
+		test: 'Use the gradient fillStyle for text',
+		code: textGradientFill,
+		golden: 'textGradientFill.png',
+		newModule: 'Text gradient fill',
+		percentage: 0.09,
+		width: 300,
+		height: 100,
+	});
+
   tests.forEach(visualTestLoop(QUnit));
 })();