fabric 7.1.0 → 7.2.0

package/src/shapes/Object/objectSvgExport.spec.ts

@@ -0,0 +1,112 @@
+import { describe, expect, it } from 'vitest';
+import { Circle } from '../Circle';
+import { Ellipse } from '../Ellipse';
+import { Rect } from '../Rect';
+import { FabricText } from '../Text/Text';
+import { FabricImage } from '../Image';
+import { Shadow } from '../../Shadow';
+
+const MALICIOUS = 'x" /><script>alert(1)</script>';
+const MALICIOUS2 = `x" onclick="alert('svg animatetransform onbegin')"`;
+const ONCLICK_PAYLOAD = `onclick="alert('svg animatetransform onbegin')"`;
+
+describe.each([MALICIOUS, MALICIOUS2])(
+  'Object SVG export sanitization (%s)',
+  (payload) => {
+    it('sanitizes object id attributes', () => {
+      const rect = new Rect({
+        id: payload,
+        width: 10,
+        height: 10,
+      });
+
+      const svg = rect.toSVG();
+      expect(svg).not.toContain('<script>');
+      expect(svg).not.toContain(ONCLICK_PAYLOAD);
+    });
+
+    it('sanitizes object style attributes', () => {
+      const rect = new Rect({
+        width: 10,
+        height: 10,
+        fillRule: payload as unknown as 'nonzero',
+        strokeLineCap: payload as unknown as 'round',
+        strokeLineJoin: payload as unknown as 'round',
+        strokeDashArray: [payload as unknown as number],
+        paintFirst: payload as unknown as 'stroke',
+        shadow: new Shadow({
+          color: 'rgba(0, 0, 0, 0.5)',
+          blur: 0,
+          offsetX: 0,
+          offsetY: 0,
+        }),
+      });
+      rect.shadow.id = payload as unknown as number;
+
+      const svg = rect.toSVG();
+      expect(svg).not.toContain('<script>');
+      expect(svg).not.toContain(ONCLICK_PAYLOAD);
+    });
+
+    it('sanitizes circle radius output', () => {
+      const circle = new Circle({
+        radius: payload as unknown as number,
+      });
+
+      const svg = circle.toSVG();
+      expect(svg).not.toContain('<script>');
+      expect(svg).not.toContain(ONCLICK_PAYLOAD);
+    });
+
+    it('sanitizes ellipse radii output', () => {
+      const ellipse = new Ellipse({
+        rx: payload as unknown as number,
+        ry: payload as unknown as number,
+      });
+
+      const svg = ellipse.toSVG();
+      expect(svg).not.toContain('<script>');
+      expect(svg).not.toContain(ONCLICK_PAYLOAD);
+    });
+
+    it('sanitizes text content and font attributes', () => {
+      const text = new FabricText('<script>alert(1)</script>', {
+        fontFamily: `Times New Roman ${payload}`,
+      });
+
+      const svg = text.toSVG();
+      expect(svg).not.toContain('<script>');
+      expect(svg).not.toContain(ONCLICK_PAYLOAD);
+    });
+
+    it('sanitizes text style overrides', () => {
+      const text = new FabricText('x', {
+        styles: {
+          0: {
+            0: {
+              fill: `red ${payload}`,
+              fontFamily: `Times ${payload}`,
+              fontWeight: `bold ${payload}`,
+              fontStyle: `italic ${payload}`,
+              fontSize: payload as unknown as number,
+            },
+          },
+        },
+      });
+
+      const svg = text.toSVG();
+      expect(svg).not.toContain('<script>');
+      expect(svg).not.toContain(ONCLICK_PAYLOAD);
+    });
+
+    it('sanitizes image src output', () => {
+      const element = new Image(10, 10);
+      element.src = `data:image/svg+xml,<svg>${payload}</svg>`;
+      const image = new FabricImage(element, { width: 10, height: 10 });
+
+      const svg = image.toSVG();
+      expect(svg).not.toContain('<script>');
+      expect(svg).not.toContain(ONCLICK_PAYLOAD);
+    });
+  },
+);

package/src/shapes/Object/types/FabricObjectProps.ts

@@ -4,10 +4,7 @@ import type { LockInteractionProps } from './LockInteractionProps';
 import type { ObjectProps } from './ObjectProps';
 
 export interface FabricObjectProps
-  extends ObjectProps,
-    ControlProps,
-    BorderProps,
-    LockInteractionProps {
+  extends ObjectProps, ControlProps, BorderProps, LockInteractionProps {
   /**
    * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled
    * too much and will be redrawn with correct details at the end of scaling.

package/src/shapes/Object/types/ObjectProps.ts

@@ -10,9 +10,7 @@ import type {
 } from './SerializedObjectProps';
 
 export interface ObjectProps
-  extends SerializedObjectProps,
-    ClipPathProps,
-    ObjectTransformActionProps {
+  extends SerializedObjectProps, ClipPathProps, ObjectTransformActionProps {
   clipPath?: FabricObject;
   fill: TFiller | string | null;
   stroke: TFiller | string | null;

package/src/shapes/Path.spec.ts

@@ -1,13 +1,10 @@
 import { describe, expect, it } from 'vitest';
 import { Path } from './Path';
 import type { TSimpleParsedCommand } from '../util';
-import { FabricObject, getFabricDocument, version } from '../../fabric';
+import { FabricObject, getFabricDocument } from '../../fabric';
+import { createReferenceObject } from '../../test/utils';
 
-const REFERENCE_PATH_OBJECT = {
-  version: version,
-  type: 'Path',
-  originX: 'center' as const,
-  originY: 'center' as const,
+const REFERENCE_PATH_OBJECT = createReferenceObject('Path', {
   left: 200,
   top: 200,
   width: 200,
@@ -15,33 +12,13 @@ const REFERENCE_PATH_OBJECT = {
   fill: 'red',
   stroke: 'blue',
   strokeWidth: 0,
-  strokeDashArray: null,
-  strokeLineCap: 'butt' as const,
-  strokeDashOffset: 0,
-  strokeLineJoin: 'miter' as const,
-  strokeMiterLimit: 4,
-  scaleX: 1,
-  scaleY: 1,
-  angle: 0,
-  flipX: false,
-  flipY: false,
-  opacity: 1,
   path: [
     ['M', 100, 100],
     ['L', 300, 100],
     ['L', 200, 300],
     ['Z'],
   ] as TSimpleParsedCommand[],
-  shadow: null,
-  visible: true,
-  backgroundColor: '',
-  fillRule: 'nonzero' as const,
-  paintFirst: 'fill' as const,
-  globalCompositeOperation: 'source-over' as const,
-  skewX: 0,
-  skewY: 0,
-  strokeUniform: false,
-};
+});
 
 function getPathElement(path: string) {
   const namespace = 'http://www.w3.org/2000/svg';

package/src/shapes/Path.ts

@@ -35,8 +35,7 @@ interface UniquePathProps {
 }
 
 export interface SerializedPathProps
-  extends SerializedObjectProps,
-    UniquePathProps {}
+  extends SerializedObjectProps, UniquePathProps {}
 
 export interface PathProps extends FabricObjectProps, UniquePathProps {}
 
@@ -214,11 +213,10 @@ export class Path<
    * of the instance
    */
   _toSVG() {
-    const path = joinPath(this.path, config.NUM_FRACTION_DIGITS);
     return [
       '<path ',
       'COMMON_PARTS',
-      `d="${path}" stroke-linecap="round" />\n`,
+      `d="${joinPath(this.path, config.NUM_FRACTION_DIGITS)}" stroke-linecap="round" />\n`,
     ];
   }
 

package/src/shapes/Polygon.spec.ts

@@ -1,10 +1,10 @@
 import { describe, it, expect } from 'vitest';
 import { Point } from '../Point';
 import { getFabricDocument } from '../env';
-import { VERSION as version } from '../constants';
 import { Polygon } from './Polygon';
 import { Polyline } from './Polyline';
 import { FabricObject } from './Object/FabricObject';
+import { createReferenceObject } from '../../test/utils';
 
 function getPoints() {
   return [
@@ -13,40 +13,13 @@ function getPoints() {
   ];
 }
 
-const REFERENCE_OBJECT = {
-  version: version,
-  type: 'Polygon',
-  originX: 'center',
-  originY: 'center',
+const REFERENCE_OBJECT = createReferenceObject('Polygon', {
   left: 15,
   top: 17,
   width: 10,
   height: 10,
-  fill: 'rgb(0,0,0)',
-  stroke: null,
-  strokeWidth: 1,
-  strokeDashArray: null,
-  strokeLineCap: 'butt',
-  strokeDashOffset: 0,
-  strokeLineJoin: 'miter',
-  strokeMiterLimit: 4,
-  scaleX: 1,
-  scaleY: 1,
-  angle: 0,
-  flipX: false,
-  flipY: false,
-  opacity: 1,
   points: getPoints(),
-  shadow: null,
-  visible: true,
-  backgroundColor: '',
-  fillRule: 'nonzero',
-  paintFirst: 'fill',
-  globalCompositeOperation: 'source-over',
-  skewX: 0,
-  skewY: 0,
-  strokeUniform: false,
-} as const;
+});
 
 const REFERENCE_EMPTY_OBJECT = {
   points: [],
@@ -273,7 +246,7 @@ describe('Polygon', () => {
     expect(polygon.toSVG, 'toSVG should be a function').toBeTypeOf('function');
 
     const EXPECTED_SVG =
-      '<g transform="matrix(1 0 0 1 15 17)"  >\n<polygon style="stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;"  points="-5,-5 5,5 " />\n</g>\n';
+      '<g transform="matrix(1 0 0 1 15 17)"  >\n<polygon style="stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;"  points="-5,-5 5,5" />\n</g>\n';
 
     expect(polygon.toSVG(), 'SVG output should match expected').toBe(
       EXPECTED_SVG,

package/src/shapes/Polyline.spec.ts

@@ -3,9 +3,9 @@ import { Point } from '../Point';
 
 import { describe, expect, it } from 'vitest';
 import { getFabricDocument } from '../env';
-import { version } from '../../package.json';
 import { Polygon } from './Polygon';
 import { FabricObject } from './Object/FabricObject';
+import { createReferenceObject } from '../../test/utils';
 
 const points = [
   { x: 2, y: 2 },
@@ -13,40 +13,13 @@ const points = [
   { x: 12, y: 7 },
 ];
 
-const REFERENCE_OBJECT = {
-  version: version,
-  type: 'Polyline',
-  originX: 'center',
-  originY: 'center',
+const REFERENCE_OBJECT = createReferenceObject('Polyline', {
   left: 15,
   top: 17,
   width: 10,
   height: 10,
-  fill: 'rgb(0,0,0)',
-  stroke: null,
-  strokeWidth: 1,
-  strokeDashArray: null,
-  strokeLineCap: 'butt',
-  strokeDashOffset: 0,
-  strokeLineJoin: 'miter',
-  strokeMiterLimit: 4,
-  scaleX: 1,
-  scaleY: 1,
-  angle: 0,
-  flipX: false,
-  flipY: false,
-  opacity: 1,
   points: getPoints(),
-  shadow: null,
-  visible: true,
-  backgroundColor: '',
-  fillRule: 'nonzero',
-  paintFirst: 'fill',
-  globalCompositeOperation: 'source-over',
-  skewX: 0,
-  skewY: 0,
-  strokeUniform: false,
-} as const;
+});
 
 describe('Polyline', () => {
   describe('_calcDimensions and pathOffset', () => {
@@ -229,7 +202,7 @@ describe('Polyline', () => {
     const polyline = new Polygon(getPoints(), { fill: 'red', stroke: 'blue' });
     expect(polyline.toSVG).toBeTypeOf('function');
     const EXPECTED_SVG =
-      '<g transform="matrix(1 0 0 1 15 17)"  >\n<polygon style="stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;"  points="-5,-5 5,5 " />\n</g>\n';
+      '<g transform="matrix(1 0 0 1 15 17)"  >\n<polygon style="stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;"  points="-5,-5 5,5" />\n</g>\n';
     expect(polyline.toSVG()).toEqual(EXPECTED_SVG);
   });
 

package/src/shapes/Polyline.ts

@@ -25,6 +25,7 @@ import {
   TOP,
 } from '../constants';
 import type { CSSRules } from '../parser/typedefs';
+import { escapeXml } from '../util/lang_string';
 
 export const polylineDefaultValues: Partial<TClassProperties<Polyline>> = {
   /**
@@ -323,27 +324,25 @@ export class Polyline<
    * of the instance
    */
   _toSVG() {
-    const points = [],
-      diffX = this.pathOffset.x,
+    const diffX = this.pathOffset.x,
       diffY = this.pathOffset.y,
       NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS;
 
-    for (let i = 0, len = this.points.length; i < len; i++) {
-      points.push(
-        toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS),
-        ',',
-        toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS),
-        ' ',
-      );
-    }
+    const points = this.points
+      .map(
+        ({ x, y }) =>
+          `${toFixed(x - diffX, NUM_FRACTION_DIGITS)},${toFixed(y - diffY, NUM_FRACTION_DIGITS)}`,
+      )
+      .join(' ');
+
     return [
       `<${
-        (this.constructor as typeof Polyline).type.toLowerCase() as
+        escapeXml((this.constructor as typeof Polyline).type).toLowerCase() as
           | 'polyline'
           | 'polygon'
       } `,
       'COMMON_PARTS',
-      `points="${points.join('')}" />\n`,
+      `points="${points}" />\n`,
     ];
   }
 

package/src/shapes/Rect.spec.ts

@@ -7,42 +7,12 @@ import { Pattern } from '../Pattern';
 // will require some kind of handling here
 import { getEnv } from '../env';
 import { loadSVGFromString } from '../parser/loadSVGFromString';
+import { createReferenceObject } from '../../test/utils';
 
-const REFERENCE_RECT = {
-  version,
-  type: 'Rect',
-  originX: 'center',
-  originY: 'center',
-  left: 0,
-  top: 0,
-  width: 0,
-  height: 0,
-  fill: 'rgb(0,0,0)',
-  stroke: null,
-  strokeWidth: 1,
-  strokeDashArray: null,
-  strokeLineCap: 'butt',
-  strokeDashOffset: 0,
-  strokeLineJoin: 'miter',
-  strokeMiterLimit: 4,
-  scaleX: 1,
-  scaleY: 1,
-  angle: 0,
-  flipX: false,
-  flipY: false,
-  opacity: 1,
-  shadow: null,
-  visible: true,
-  backgroundColor: '',
-  fillRule: 'nonzero',
-  paintFirst: 'fill',
-  globalCompositeOperation: 'source-over',
+const REFERENCE_RECT = createReferenceObject('Rect', {
   rx: 0,
   ry: 0,
-  skewX: 0,
-  skewY: 0,
-  strokeUniform: false,
-};
+});
 
 describe('Rect', () => {
   it('constructor', function () {
@@ -273,4 +243,26 @@ describe('Rect', () => {
     expect(rectObject.paintFirst).toBe('stroke');
     expect(rectSvg).toContain('paint-order="stroke"');
   });
+
+  describe('svg attribute injection', () => {
+    it('properties are properly escaped', () => {
+      const rect = new Rect({
+        id: 'asd"><script>alert(1)</script>',
+        width: 100,
+        height: 100,
+      });
+      const svg = rect.toSVG();
+      expect(svg).toContain(
+        `id="asd&quot;&gt;&lt;script&gt;alert(1)&lt;/script&gt;"`,
+      );
+    });
+    it('polyglot test', () => {
+      const polyglotPayload =
+        'jaVasCript:/*-/*`/*\\`/*\'/*"/**/(/* */oNcliCk=alert() )';
+      const rect = new Rect({ id: polyglotPayload, width: 100, height: 100 });
+      const svg = rect.toSVG();
+      // Should escape all special characters
+      expect(svg).not.toContain(polyglotPayload);
+    });
+  });
 });

package/src/shapes/Rect.ts

@@ -7,6 +7,7 @@ import { FabricObject, cacheProperties } from './Object/FabricObject';
 import type { FabricObjectProps, SerializedObjectProps } from './Object/types';
 import type { ObjectEvents } from '../EventTypeDefs';
 import type { CSSRules } from '../parser/typedefs';
+import { escapeXml } from '../util/lang_string';
 
 export const rectDefaultValues: Partial<TClassProperties<Rect>> = {
   rx: 0,
@@ -19,18 +20,17 @@ interface UniqueRectProps {
 }
 
 export interface SerializedRectProps
-  extends SerializedObjectProps,
-    UniqueRectProps {}
+  extends SerializedObjectProps, UniqueRectProps {}
 
 export interface RectProps extends FabricObjectProps, UniqueRectProps {}
 
 const RECT_PROPS = ['rx', 'ry'] as const;
 
 export class Rect<
-    Props extends TOptions<RectProps> = Partial<RectProps>,
-    SProps extends SerializedRectProps = SerializedRectProps,
-    EventSpec extends ObjectEvents = ObjectEvents,
-  >
+  Props extends TOptions<RectProps> = Partial<RectProps>,
+  SProps extends SerializedRectProps = SerializedRectProps,
+  EventSpec extends ObjectEvents = ObjectEvents,
+>
   extends FabricObject<Props, SProps, EventSpec>
   implements RectProps
 {
@@ -164,7 +164,7 @@ export class Rect<
       'COMMON_PARTS',
       `x="${-width / 2}" y="${
         -height / 2
-      }" rx="${rx}" ry="${ry}" width="${width}" height="${height}" />\n`,
+      }" rx="${escapeXml(rx)}" ry="${escapeXml(ry)}" width="${escapeXml(width)}" height="${escapeXml(height)}" />\n`,
     ];
   }
 

package/src/shapes/Text/Text.spec.ts

@@ -10,38 +10,15 @@ import {
   getFabricDocument,
   IText,
   Textbox,
-  version,
 } from '../../../fabric';
 import { toFixed } from '../../util';
+import { createReferenceObject } from '../../../test/utils';
 
 const CHAR_WIDTH = 20;
 
-const REFERENCE_TEXT_OBJECT = {
-  version: version,
-  type: 'Text',
-  originX: 'center',
-  originY: 'center',
-  left: 0,
-  top: 0,
+const REFERENCE_TEXT_OBJECT = createReferenceObject('Text', {
   width: CHAR_WIDTH,
   height: 45.2,
-  fill: 'rgb(0,0,0)',
-  stroke: null,
-  strokeWidth: 1,
-  strokeDashArray: null,
-  strokeLineCap: 'butt',
-  strokeDashOffset: 0,
-  strokeLineJoin: 'miter',
-  strokeMiterLimit: 4,
-  scaleX: 1,
-  scaleY: 1,
-  angle: 0,
-  flipX: false,
-  flipY: false,
-  opacity: 1,
-  shadow: null,
-  visible: true,
-  backgroundColor: '',
   text: 'x',
   fontSize: 40,
   fontWeight: 'normal',
@@ -53,21 +30,15 @@ const REFERENCE_TEXT_OBJECT = {
   linethrough: false,
   textAlign: 'left',
   textBackgroundColor: '',
-  fillRule: 'nonzero',
-  paintFirst: 'fill',
-  globalCompositeOperation: 'source-over',
-  skewX: 0,
-  skewY: 0,
   charSpacing: 0,
   styles: [],
   path: undefined,
-  strokeUniform: false,
   direction: 'ltr',
   pathStartOffset: 0,
   pathSide: 'left',
   pathAlign: 'baseline',
   textDecorationThickness: 66.667,
-};
+});
 
 function createTextObject() {
   return new FabricText('x');

package/src/shapes/Text/Text.ts

@@ -125,8 +125,7 @@ interface UniqueTextProps {
 }
 
 export interface SerializedTextProps
-  extends SerializedObjectProps,
-    UniqueTextProps {
+  extends SerializedObjectProps, UniqueTextProps {
   styles: TextStyleArray | TextStyle;
 }
 
@@ -139,10 +138,10 @@ export interface TextProps extends FabricObjectProps, UniqueTextProps {
  * @see {@link http://fabric5.fabricjs.com/fabric-intro-part-2#text}
  */
 export class FabricText<
-    Props extends TOptions<TextProps> = Partial<TextProps>,
-    SProps extends SerializedTextProps = SerializedTextProps,
-    EventSpec extends ObjectEvents = ObjectEvents,
-  >
+  Props extends TOptions<TextProps> = Partial<TextProps>,
+  SProps extends SerializedTextProps = SerializedTextProps,
+  EventSpec extends ObjectEvents = ObjectEvents,
+>
   extends StyledText<Props, SProps, EventSpec>
   implements UniqueTextProps
 {

package/src/shapes/Text/TextSVGExportMixin.ts

@@ -77,12 +77,12 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     return [
       textBgRects.join(''),
       '\t\t<text xml:space="preserve" ',
-      `font-family="${this.fontFamily.replace(dblQuoteRegex, "'")}" `,
-      `font-size="${this.fontSize}" `,
-      this.fontStyle ? `font-style="${this.fontStyle}" ` : '',
-      this.fontWeight ? `font-weight="${this.fontWeight}" ` : '',
+      `font-family="${escapeXml(this.fontFamily.replace(dblQuoteRegex, "'"))}" `,
+      `font-size="${escapeXml(this.fontSize)}" `,
+      this.fontStyle ? `font-style="${escapeXml(this.fontStyle)}" ` : '',
+      this.fontWeight ? `font-weight="${escapeXml(this.fontWeight)}" ` : '',
       textDecoration ? `text-decoration="${textDecoration}" ` : '',
-      this.direction === 'rtl' ? `direction="${this.direction}" ` : '',
+      this.direction === 'rtl' ? `direction="rtl" ` : '',
       'style="',
       this.getSvgStyles(noShadow),
       '"',
@@ -112,7 +112,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     // bounding-box background
     this.backgroundColor &&
       textBgRects.push(
-        ...createSVGInlineRect(
+        createSVGInlineRect(
           this.backgroundColor,
           -this.width / 2,
           -this.height / 2,
@@ -270,7 +270,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
       if (currentColor !== lastColor) {
         lastColor &&
           textBgRects.push(
-            ...createSVGInlineRect(
+            createSVGInlineRect(
               lastColor,
               leftOffset + boxStart,
               textTopOffset,
@@ -287,7 +287,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     }
     currentColor &&
       textBgRects.push(
-        ...createSVGInlineRect(
+        createSVGInlineRect(
           lastColor,
           leftOffset + boxStart,
           textTopOffset,
@@ -339,17 +339,17 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     const thickness = textDecorationThickness || this.textDecorationThickness;
     return [
       stroke ? colorPropToSVG(STROKE, stroke) : '',
-      strokeWidth ? `stroke-width: ${strokeWidth}; ` : '',
+      strokeWidth ? `stroke-width: ${escapeXml(strokeWidth)}; ` : '',
       fontFamily
         ? `font-family: ${
             !fontFamily.includes("'") && !fontFamily.includes('"')
-              ? `'${fontFamily}'`
-              : fontFamily
+              ? `'${escapeXml(fontFamily)}'`
+              : escapeXml(fontFamily)
           }; `
         : '',
-      fontSize ? `font-size: ${fontSize}px; ` : '',
-      fontStyle ? `font-style: ${fontStyle}; ` : '',
-      fontWeight ? `font-weight: ${fontWeight}; ` : '',
+      fontSize ? `font-size: ${escapeXml(fontSize)}px; ` : '',
+      fontStyle ? `font-style: ${escapeXml(fontStyle)}; ` : '',
+      fontWeight ? `font-weight: ${escapeXml(fontWeight)}; ` : '',
       textDecoration
         ? `text-decoration: ${textDecoration}; text-decoration-thickness: ${toFixed((thickness * this.getObjectScaling().y) / 10, config.NUM_FRACTION_DIGITS)}%; `
         : '',

package/src/shapes/Text/__snapshots__/Text.spec.ts.snap

@@ -196,7 +196,7 @@ exports[`FabricText > toObject 1`] = `
   "type": "Text",
   "underline": false,
   "visible": true,
-  "width": 60,
+  "width": 59.98,
 }
 `;