fix(fabric.Gradient): Guard against deep mutation on svg export for c…

…olor exports (#8196)
fabricjs · Aug 26, 2022 · af947d6 · af947d6
1 parent 16f5bcb
commit af947d6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/gradient/gradient.class.ts b/src/gradient/gradient.class.ts
@@ -146,8 +146,8 @@ export class Gradient<S, T extends GradientType = S extends GradientType ? S : '
     const markup = [],
       transform = this.gradientTransform ? this.gradientTransform.concat() : iMatrix.concat(),
       gradientUnits = this.gradientUnits === 'pixels' ? 'userSpaceOnUse' : 'objectBoundingBox';
-    // colorStops must be sorted ascending
-    const colorStops = this.colorStops.concat().sort((a, b) => {
+    // colorStops must be sorted ascending, and guarded against deep mutations
+    const colorStops = this.colorStops.map((colorStop) => ({ ...colorStop })).sort((a, b) => {
       return a.offset - b.offset;
     });
 
@@ -274,7 +274,7 @@ export class Gradient<S, T extends GradientType = S extends GradientType ? S : '
    * @return {Gradient} Gradient instance
    * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement
    * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement
-   * 
+   *
    *  @example
    *
    *  <linearGradient id="linearGrad1">

diff --git a/test/unit/gradient.js b/test/unit/gradient.js
@@ -690,7 +690,11 @@
     fabric.Object.__uid = 0;
     var gradient = createRadialGradientSwapped();
     var obj = new fabric.Object({ width: 100, height: 100 });
-    assert.equal(gradient.toSVG(obj), SVG_SWAPPED);
+    const gradientColorStops = JSON.stringify(gradient.colorStops);
+    assert.equal(gradient.toSVG(obj), SVG_SWAPPED, 'it exports as expected');
+    const gradientColorStopsAfterExport = JSON.stringify(gradient.colorStops);
+    assert.equal(gradient.toSVG(obj), SVG_SWAPPED, 'it exports as expected a second time');
+    assert.equal(gradientColorStops, gradientColorStopsAfterExport, 'colorstops do not change')
   });
 
   QUnit.test('toSVG linear objectBoundingBox', function(assert) {