From 3b314d11cc0246f471f8b9cb8bbb8fdf9ea13f35 Mon Sep 17 00:00:00 2001 From: Blob Date: Fri, 23 Nov 2018 00:56:00 +0100 Subject: [PATCH] Add strokeDashOffset and svg corresponding attribute (#5398) * Add strokeDashOffset and svg corresponding attribute --- HEADER.js | 2 +- src/mixins/object.svg_export.js | 2 ++ src/parser.js | 1 + src/shapes/object.class.js | 13 +++++++++++-- test/unit/activeselection.js | 1 + test/unit/canvas.js | 6 +++--- test/unit/canvas_static.js | 13 +++++++------ test/unit/circle.js | 5 +++-- test/unit/ellipse.js | 7 ++++--- test/unit/group.js | 9 +++++---- test/unit/header.js | 2 +- test/unit/image.js | 5 +++-- test/unit/itext.js | 1 + test/unit/line.js | 3 ++- test/unit/object.js | 6 ++++-- test/unit/object_clipPath.js | 1 + test/unit/path.js | 7 ++++--- test/unit/polygon.js | 3 ++- test/unit/polyline.js | 3 ++- test/unit/rect.js | 11 ++++++----- test/unit/text.js | 1 + test/unit/text_to_svg.js | 10 +++++----- test/unit/textbox.js | 1 + 23 files changed, 71 insertions(+), 42 deletions(-) diff --git a/HEADER.js b/HEADER.js index 69db2ddc..a1ee13cf 100644 --- a/HEADER.js +++ b/HEADER.js @@ -51,7 +51,7 @@ fabric.SHARED_ATTRIBUTES = [ 'transform', 'fill', 'fill-opacity', 'fill-rule', 'opacity', - 'stroke', 'stroke-dasharray', 'stroke-linecap', + 'stroke', 'stroke-dasharray', 'stroke-linecap', 'stroke-dashoffset', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'id', 'paint-order', diff --git a/src/mixins/object.svg_export.js b/src/mixins/object.svg_export.js index 47f9058f..265a1b6e 100644 --- a/src/mixins/object.svg_export.js +++ b/src/mixins/object.svg_export.js @@ -32,6 +32,7 @@ var fillRule = this.fillRule ? this.fillRule : 'nonzero', strokeWidth = this.strokeWidth ? this.strokeWidth : '0', strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none', + strokeDashOffset = this.strokeDashOffset ? this.strokeDashOffset : '0', strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt', strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter', strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4', @@ -46,6 +47,7 @@ 'stroke-width: ', strokeWidth, '; ', 'stroke-dasharray: ', strokeDashArray, '; ', 'stroke-linecap: ', strokeLineCap, '; ', + 'stroke-dashoffset: ', strokeDashOffset, '; ', 'stroke-linejoin: ', strokeLineJoin, '; ', 'stroke-miterlimit: ', strokeMiterLimit, '; ', fill, diff --git a/src/parser.js b/src/parser.js index 6a0035a8..203e5dcf 100644 --- a/src/parser.js +++ b/src/parser.js @@ -38,6 +38,7 @@ 'letter-spacing': 'charSpacing', 'paint-order': 'paintFirst', 'stroke-dasharray': 'strokeDashArray', + 'stroke-dashoffset': 'strokeDashOffset', 'stroke-linecap': 'strokeLineCap', 'stroke-linejoin': 'strokeLineJoin', 'stroke-miterlimit': 'strokeMiterLimit', diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 24e59940..5fd5257c 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -321,6 +321,13 @@ */ strokeDashArray: null, + /** + * Line offset of an object's stroke + * @type Number + * @default + */ + strokeDashOffset: 0, + /** * Line endings style of an object's stroke (one of "butt", "round", "square") * @type String @@ -586,7 +593,7 @@ */ stateProperties: ( 'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' + - 'stroke strokeWidth strokeDashArray strokeLineCap strokeLineJoin strokeMiterLimit ' + + 'stroke strokeWidth strokeDashArray strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit ' + 'angle opacity fill globalCompositeOperation shadow clipTo visible backgroundColor ' + 'skewX skewY fillRule paintFirst' ).split(' '), @@ -600,7 +607,7 @@ */ cacheProperties: ( 'fill stroke strokeWidth strokeDashArray width height paintFirst' + - ' strokeLineCap strokeLineJoin strokeMiterLimit backgroundColor' + ' strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit backgroundColor' ).split(' '), /** @@ -841,6 +848,7 @@ strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS), strokeDashArray: this.strokeDashArray ? this.strokeDashArray.concat() : this.strokeDashArray, strokeLineCap: this.strokeLineCap, + strokeDashOffset: this.strokeDashOffset, strokeLineJoin: this.strokeLineJoin, strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS), scaleX: toFixed(this.scaleX, NUM_FRACTION_DIGITS), @@ -1271,6 +1279,7 @@ if (decl.stroke) { ctx.lineWidth = decl.strokeWidth; ctx.lineCap = decl.strokeLineCap; + ctx.lineDashOffset = decl.strokeDashOffset; ctx.lineJoin = decl.strokeLineJoin; ctx.miterLimit = decl.strokeMiterLimit; ctx.strokeStyle = decl.stroke.toLive diff --git a/test/unit/activeselection.js b/test/unit/activeselection.js index 0257beda..3687d44c 100644 --- a/test/unit/activeselection.js +++ b/test/unit/activeselection.js @@ -66,6 +66,7 @@ 'strokeWidth': 0, 'strokeDashArray': null, 'strokeLineCap': 'butt', + 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, diff --git a/test/unit/canvas.js b/test/unit/canvas.js index faa7d599..607f6288 100644 --- a/test/unit/canvas.js +++ b/test/unit/canvas.js @@ -55,12 +55,12 @@ '13.99], ["z", null]]}'; var PATH_DATALESS_JSON = '{"version":"' + fabric.version + '","objects":[{"type":"path","version":"' + fabric.version + '","originX":"left","originY":"top","left":100,"top":100,"width":200,"height":200,"fill":"rgb(0,0,0)",' + - '"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":4,' + + '"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,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"sourcePath":"http://example.com/"}]}'; var RECT_JSON = '{"version":"' + fabric.version + '","objects":[{"type":"rect","version":"' + fabric.version + '","originX":"left","originY":"top","left":0,"top":0,"width":10,"height":10,"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,' + + '"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,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0}],"background":"#ff5555","overlay":"rgba(0,0,0,0.2)"}'; @@ -1568,7 +1568,7 @@ QUnit.test('loadFromJSON with custom properties on Canvas with image', function(assert) { var done = assert.async(); - var JSON_STRING = '{"objects":[{"type":"image","originX":"left","originY":"top","left":13.6,"top":-1.4,"width":3000,"height":3351,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.05,"scaleY":0.05,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"' + IMG_SRC + '","filters":[],"crossOrigin":""}],' + var JSON_STRING = '{"objects":[{"type":"image","originX":"left","originY":"top","left":13.6,"top":-1.4,"width":3000,"height":3351,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.05,"scaleY":0.05,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"' + IMG_SRC + '","filters":[],"crossOrigin":""}],' + '"background":"green"}'; var serialized = JSON.parse(JSON_STRING); serialized.controlsAboveOverlay = true; diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index adc2b752..e0f271ea 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -41,17 +41,17 @@ '13.99], ["z", null]]}], "background": "#ff5555","overlay": "rgba(0,0,0,0.2)"}'; var PATH_DATALESS_JSON = '{"version":"' + fabric.version + '","objects":[{"type":"path","version":"' + fabric.version + '","originX":"left","originY":"top","left":100,"top":100,"width":200,"height":200,"fill":"rgb(0,0,0)",' + - '"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":4,' + + '"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,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"sourcePath":"http://example.com/"}]}'; var RECT_JSON = '{"version":"' + fabric.version + '","objects":[{"type":"rect","version":"' + fabric.version + '","originX":"left","originY":"top","left":0,"top":0,"width":10,"height":10,"fill":"rgb(0,0,0)",' + - '"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":4,' + + '"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,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0}],"background":"#ff5555","overlay":"rgba(0,0,0,0.2)"}'; var RECT_JSON_WITH_PADDING = '{"version":"' + fabric.version + '","objects":[{"type":"rect","version":"' + fabric.version + '","originX":"left","originY":"top","left":0,"top":0,"width":10,"height":20,"fill":"rgb(0,0,0)",' + - '"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":4,' + + '"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,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0,"padding":123,"foo":"bar"}]}'; @@ -82,6 +82,7 @@ 'stroke': null, 'strokeWidth': 0, 'strokeDashArray': null, + 'strokeDashOffset': 0, 'strokeLineCap': 'butt', 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, @@ -872,7 +873,7 @@ canvasClip.clipPath = new fabric.Rect({ width: 200, height: 200 }); canvasClip.add(new fabric.Circle({ radius: 200 })); var svg = canvasClip.toSVG(); - var expectedSVG = '\n\n\nCreated with Fabric.js ' + fabric.version + '\n\n\n\t\n\n\n\n\n\n\n\n'; + var expectedSVG = '\n\n\nCreated with Fabric.js ' + fabric.version + '\n\n\n\t\n\n\n\n\n\n\n\n'; assert.equal(svg, expectedSVG, 'SVG with clipPath should match'); }); @@ -884,7 +885,7 @@ canvas.renderOnAddRemove = false; canvas.backgroundImage = imageBG; canvas.overlayImage = imageOL; - var expectedSVG = '\n\n\nCreated with Fabric.js ' + fabric.version + '\n\n\n\n\t\n\n\n\t\n\n'; + var expectedSVG = '\n\n\nCreated with Fabric.js ' + fabric.version + '\n\n\n\n\t\n\n\n\t\n\n'; var svg1 = canvas.toSVG(); assert.equal(svg1, expectedSVG, 'svg with bg and overlay do not match'); imageBG.excludeFromExport = true; @@ -1181,7 +1182,7 @@ var done = assert.async(); var serialized = JSON.parse(PATH_JSON); serialized.background = 'green'; - serialized.backgroundImage = JSON.parse('{"type":"image","originX":"left","originY":"top","left":13.6,"top":-1.4,"width":3000,"height":3351,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.05,"scaleY":0.05,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"' + IMG_SRC + '","filters":[],"crossOrigin":""}'); + serialized.backgroundImage = JSON.parse('{"type":"image","originX":"left","originY":"top","left":13.6,"top":-1.4,"width":3000,"height":3351,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.05,"scaleY":0.05,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"' + IMG_SRC + '","filters":[],"crossOrigin":""}'); canvas.loadFromJSON(serialized, function() { assert.ok(!canvas.isEmpty(), 'canvas is not empty'); assert.equal(canvas.backgroundColor, 'green'); diff --git a/test/unit/circle.js b/test/unit/circle.js index a11d51e7..ddbb9103 100644 --- a/test/unit/circle.js +++ b/test/unit/circle.js @@ -99,6 +99,7 @@ 'strokeWidth': 1, 'strokeDashArray': null, 'strokeLineCap': 'butt', + 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, @@ -141,7 +142,7 @@ var circle = new fabric.Circle({ width: 100, height: 100, radius: 10 }); var svg = circle.toSVG(); var svgClipPath = circle.toClipPathSVG(); - assert.equal(svg, '\n\n\n'); + assert.equal(svg, '\n\n\n'); assert.equal(svgClipPath, '\t\n', 'circle as clipPath'); }); @@ -149,7 +150,7 @@ var circle = new fabric.Circle({ width: 100, height: 100, radius: 10, endAngle: Math.PI }); var svg = circle.toSVG(); var svgClipPath = circle.toClipPathSVG(); - assert.equal(svg, '\n\n\n'); + assert.equal(svg, '\n\n\n'); assert.equal(svgClipPath, '\t\n', 'half circle as clipPath'); }); diff --git a/test/unit/ellipse.js b/test/unit/ellipse.js index 63b0031e..d09fe01f 100644 --- a/test/unit/ellipse.js +++ b/test/unit/ellipse.js @@ -39,6 +39,7 @@ 'strokeWidth': 1, 'strokeDashArray': null, 'strokeLineCap': 'butt', + 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, @@ -97,21 +98,21 @@ QUnit.test('toSVG', function(assert) { var ellipse = new fabric.Ellipse({ rx: 100, ry: 12, fill: 'red', stroke: 'blue' }); - assert.equal(ellipse.toSVG(), '\n\n\n', 'SVG should match'); + assert.equal(ellipse.toSVG(), '\n\n\n', 'SVG should match'); assert.equal(ellipse.toClipPathSVG(), '\t\n', 'SVG clippath should match'); }); QUnit.test('toSVG with a clipPath', function(assert) { var ellipse = new fabric.Ellipse({ rx: 100, ry: 12, fill: 'red', stroke: 'blue' }); ellipse.clipPath = new fabric.Ellipse({ rx: 12, ry: 100, left: 60, top: -50 }); - assert.equal(ellipse.toSVG(), '\n\n\t\n\n\n\n', 'SVG with clipPath should match'); + assert.equal(ellipse.toSVG(), '\n\n\t\n\n\n\n', 'SVG with clipPath should match'); }); QUnit.test('toSVG with a clipPath absolute positioned', function(assert) { var ellipse = new fabric.Ellipse({ rx: 100, ry: 12, fill: 'red', stroke: 'blue' }); ellipse.clipPath = new fabric.Ellipse({ rx: 12, ry: 100, left: 60, top: -50 }); ellipse.clipPath.absolutePositioned = true; - assert.equal(ellipse.toSVG(), '\n\n\n\t\n\n\n\n\n', 'SVG with clipPath should match'); + assert.equal(ellipse.toSVG(), '\n\n\n\t\n\n\n\n\n', 'SVG with clipPath should match'); }); QUnit.test('fromElement', function(assert) { diff --git a/test/unit/group.js b/test/unit/group.js index 744b15ef..bde7475d 100644 --- a/test/unit/group.js +++ b/test/unit/group.js @@ -169,6 +169,7 @@ 'strokeWidth': 0, 'strokeDashArray': null, 'strokeLineCap': 'butt', + 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, @@ -447,7 +448,7 @@ var group = makeGroupWith2Objects(); assert.ok(typeof group.toSVG === 'function'); - var expectedSVG = '\n\t\n\n\n\t\n\n\n\n'; + var expectedSVG = '\n\t\n\n\n\t\n\n\n\n'; assert.equal(group.toSVG(), expectedSVG); }); @@ -455,7 +456,7 @@ var group = makeGroupWith2Objects(); assert.ok(typeof group.toSVG === 'function'); group.clipPath = new fabric.Rect({ width: 100, height: 100 }); - var expectedSVG = '\n\n\t\n\n\t\n\n\n\t\n\n\n\n'; + var expectedSVG = '\n\n\t\n\n\t\n\n\n\t\n\n\n\n'; assert.equal(group.toSVG(), expectedSVG); }); @@ -464,7 +465,7 @@ assert.ok(typeof group.toSVG === 'function'); group.clipPath = new fabric.Rect({ width: 100, height: 100 }); group.clipPath.absolutePositioned = true; - var expectedSVG = '\n\n\n\t\n\n\t\n\n\n\t\n\n\n\n\n'; + var expectedSVG = '\n\n\n\t\n\n\t\n\n\n\t\n\n\n\n\n'; assert.equal(group.toSVG(), expectedSVG); }); @@ -472,7 +473,7 @@ var group = makeGroupWith2Objects(); assert.ok(typeof group.toSVG === 'function'); group.clipPath = makeGroupWith2Objects(); - var expectedSVG = '\n\n\t\t\n\t\t\n\n\t\n\n\n\t\n\n\n\n'; + var expectedSVG = '\n\n\t\t\n\t\t\n\n\t\n\n\n\t\n\n\n\n'; assert.equal(group.toSVG(), expectedSVG); }); diff --git a/test/unit/header.js b/test/unit/header.js index d7afcbc0..4f6cfc81 100644 --- a/test/unit/header.js +++ b/test/unit/header.js @@ -6,7 +6,7 @@ assert.ok(typeof fabric.window !== 'undefined', 'window is set'); assert.ok(typeof fabric.isTouchSupported !== 'undefined', 'isTouchSupported is set'); assert.ok(typeof fabric.isLikelyNode !== 'undefined', 'isLikelyNode is set'); - assert.equal(fabric.SHARED_ATTRIBUTES.length, 17, 'SHARED_ATTRIBUTES is set'); + assert.equal(fabric.SHARED_ATTRIBUTES.length, 18, 'SHARED_ATTRIBUTES is set'); }); QUnit.test('initFilterBackend', function(assert) { diff --git a/test/unit/image.js b/test/unit/image.js index 5218a95b..ad8248a6 100644 --- a/test/unit/image.js +++ b/test/unit/image.js @@ -42,6 +42,7 @@ 'strokeWidth': 0, 'strokeDashArray': null, 'strokeLineCap': 'butt', + 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, @@ -249,7 +250,7 @@ image.width -= 2; image.height -= 2; fabric.Object.__uid = 1; - var expectedSVG = '\n\n\t\n\n\t\n\n'; + var expectedSVG = '\n\n\t\n\n\t\n\n'; assert.equal(image.toSVG(), expectedSVG); done(); }); @@ -278,7 +279,7 @@ var done = assert.async(); createImageObject(function(image) { assert.ok(typeof image.toSVG === 'function'); - var expectedSVG = '\n\t\n\n'; + var expectedSVG = '\n\t\n\n'; assert.equal(image.toSVG(), expectedSVG); done(); }); diff --git a/test/unit/itext.js b/test/unit/itext.js index 9f339cd4..5695acec 100644 --- a/test/unit/itext.js +++ b/test/unit/itext.js @@ -22,6 +22,7 @@ 'strokeWidth': 1, 'strokeDashArray': null, 'strokeLineCap': 'butt', + 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, diff --git a/test/unit/line.js b/test/unit/line.js index 667df52d..16b6558b 100644 --- a/test/unit/line.js +++ b/test/unit/line.js @@ -14,6 +14,7 @@ 'strokeWidth': 1, 'strokeDashArray': null, 'strokeLineCap': 'butt', + 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, @@ -69,7 +70,7 @@ QUnit.test('toSVG', function(assert) { var line = new fabric.Line([11, 12, 13, 14]); - var EXPECTED_SVG = '\n\n\n'; + var EXPECTED_SVG = '\n\n\n'; assert.equal(line.toSVG(), EXPECTED_SVG); }); diff --git a/test/unit/object.js b/test/unit/object.js index 6bfd19f6..ab037dca 100644 --- a/test/unit/object.js +++ b/test/unit/object.js @@ -134,13 +134,13 @@ QUnit.test('toJSON', function(assert) { var emptyObjectJSON = '{"type":"object","version":"' + fabric.version + '","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,' + + '"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,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over",' + '"transformMatrix":null,"skewX":0,"skewY":0}'; var augmentedJSON = '{"type":"object","version":"' + fabric.version + '","originX":"left","originY":"top","left":0,"top":0,"width":122,"height":0,"fill":"rgb(0,0,0)",' + - '"stroke":null,"strokeWidth":1,"strokeDashArray":[5,2],"strokeLineCap":"round","strokeLineJoin":"bevil","strokeMiterLimit":5,' + + '"stroke":null,"strokeWidth":1,"strokeDashArray":[5,2],"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"bevil","strokeMiterLimit":5,' + '"scaleX":1.3,"scaleY":1,"angle":0,"flipX":false,"flipY":true,"opacity":0.88,' + '"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over",' + '"transformMatrix":null,"skewX":0,"skewY":0}'; @@ -176,6 +176,7 @@ 'strokeWidth': 1, 'strokeDashArray': null, 'strokeLineCap': 'butt', + 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, @@ -210,6 +211,7 @@ 'strokeWidth': 1, 'strokeDashArray': [5, 2], 'strokeLineCap': 'round', + 'strokeDashOffset': 0, 'strokeLineJoin': 'bevil', 'strokeMiterLimit': 5, 'scaleX': 1, diff --git a/test/unit/object_clipPath.js b/test/unit/object_clipPath.js index a434e22b..7874469b 100644 --- a/test/unit/object_clipPath.js +++ b/test/unit/object_clipPath.js @@ -29,6 +29,7 @@ strokeWidth: 1, strokeDashArray: null, strokeLineCap: 'butt', + strokeDashOffset: 0, strokeLineJoin: 'miter', strokeMiterLimit: 4, scaleX: 1, diff --git a/test/unit/path.js b/test/unit/path.js index a7395c27..d08fbcca 100644 --- a/test/unit/path.js +++ b/test/unit/path.js @@ -14,6 +14,7 @@ 'strokeWidth': 1, 'strokeDashArray': null, 'strokeLineCap': 'butt', + 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, @@ -128,7 +129,7 @@ var done = assert.async(); makePathObject(function(path) { assert.ok(typeof path.toSVG === 'function'); - assert.deepEqual(path.toSVG(), '\n\n\n'); + assert.deepEqual(path.toSVG(), '\n\n\n'); done(); }); }); @@ -138,7 +139,7 @@ makePathObject(function(path) { makePathObject(function(path2) { path.clipPath = path2; - assert.deepEqual(path.toSVG(), '\n\n\t\n\n\n\n', 'path clipPath toSVG should match'); + assert.deepEqual(path.toSVG(), '\n\n\t\n\n\n\n', 'path clipPath toSVG should match'); done(); }); }); @@ -151,7 +152,7 @@ makePathObject(function(path2) { path.clipPath = path2; path.clipPath.absolutePositioned = true; - assert.deepEqual(path.toSVG(), '\n\n\n\t\n\n\n\n\n', 'path clipPath toSVG absolute should match'); + assert.deepEqual(path.toSVG(), '\n\n\n\t\n\n\n\n\n', 'path clipPath toSVG absolute should match'); done(); }); }); diff --git a/test/unit/polygon.js b/test/unit/polygon.js index 4dbc115b..cf785315 100644 --- a/test/unit/polygon.js +++ b/test/unit/polygon.js @@ -21,6 +21,7 @@ 'strokeWidth': 1, 'strokeDashArray': null, 'strokeLineCap': 'butt', + 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, @@ -83,7 +84,7 @@ QUnit.test('toSVG', function(assert) { var polygon = new fabric.Polygon(getPoints(), { fill: 'red', stroke: 'blue' }); assert.ok(typeof polygon.toSVG === 'function'); - var EXPECTED_SVG = '\n\n\n'; + var EXPECTED_SVG = '\n\n\n'; assert.deepEqual(polygon.toSVG(), EXPECTED_SVG); }); diff --git a/test/unit/polyline.js b/test/unit/polyline.js index 0d93bcb6..7a805369 100644 --- a/test/unit/polyline.js +++ b/test/unit/polyline.js @@ -21,6 +21,7 @@ 'strokeWidth': 1, 'strokeDashArray': null, 'strokeLineCap': 'butt', + 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, @@ -82,7 +83,7 @@ QUnit.test('toSVG', function(assert) { var polyline = new fabric.Polygon(getPoints(), { fill: 'red', stroke: 'blue' }); assert.ok(typeof polyline.toSVG === 'function'); - var EXPECTED_SVG = '\n\n\n'; + var EXPECTED_SVG = '\n\n\n'; assert.deepEqual(polyline.toSVG(), EXPECTED_SVG); }); diff --git a/test/unit/rect.js b/test/unit/rect.js index 02d8ea9e..ec95c590 100644 --- a/test/unit/rect.js +++ b/test/unit/rect.js @@ -14,6 +14,7 @@ 'strokeWidth': 1, 'strokeDashArray': null, 'strokeLineCap': 'butt', + 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, @@ -172,31 +173,31 @@ var rect = new fabric.Rect({ width: 100, height: 100, rx: 20, ry: 30, strokeWidth: 0 }); var svg = rect.toSVG(); - assert.equal(svg, '\n\n\n'); + assert.equal(svg, '\n\n\n'); }); QUnit.test('toSVG with alpha colors fill', function(assert) { var rect = new fabric.Rect({ width: 100, height: 100, strokeWidth: 0, fill: 'rgba(255, 0, 0, 0.5)' }); var svg = rect.toSVG(); - assert.equal(svg, '\n\n\n'); + assert.equal(svg, '\n\n\n'); }); QUnit.test('toSVG with id', function(assert) { var rect = new fabric.Rect({id: 'myRect', width: 100, height: 100, strokeWidth: 0, fill: 'rgba(255, 0, 0, 0.5)' }); var svg = rect.toSVG(); - assert.equal(svg, '\n\n\n'); + assert.equal(svg, '\n\n\n'); }); QUnit.test('toSVG with alpha colors stroke', function(assert) { var rect = new fabric.Rect({ width: 100, height: 100, strokeWidth: 0, fill: '', stroke: 'rgba(255, 0, 0, 0.5)' }); var svg = rect.toSVG(); - assert.equal(svg, '\n\n\n'); + assert.equal(svg, '\n\n\n'); }); QUnit.test('toSVG with paintFirst set to stroke', function(assert) { var rect = new fabric.Rect({ width: 100, height: 100, paintFirst: 'stroke' }); var svg = rect.toSVG(); - assert.equal(svg, '\n\n\n'); + assert.equal(svg, '\n\n\n'); }); QUnit.test('toObject without default values', function(assert) { diff --git a/test/unit/text.js b/test/unit/text.js index be54c6d7..b9332f96 100644 --- a/test/unit/text.js +++ b/test/unit/text.js @@ -22,6 +22,7 @@ 'strokeWidth': 1, 'strokeDashArray': null, 'strokeLineCap': 'butt', + 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, diff --git a/test/unit/text_to_svg.js b/test/unit/text_to_svg.js index d7d46cad..2ca9a269 100644 --- a/test/unit/text_to_svg.js +++ b/test/unit/text_to_svg.js @@ -4,14 +4,14 @@ } QUnit.module('fabric.Text'); QUnit.test('toSVG', function(assert) { - var TEXT_SVG = '\n\t\tx\n\n'; + var TEXT_SVG = '\n\t\tx\n\n'; var text = new fabric.Text('x'); assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG)); text.set('fontFamily', 'Arial'); assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG.replace('font-family="Times New Roman"', 'font-family="Arial"'))); }); QUnit.test('toSVG justified', function(assert) { - var TEXT_SVG_JUSTIFIED = '\n\t\txxxxxxx y\n\n'; + var TEXT_SVG_JUSTIFIED = '\n\t\txxxxxxx y\n\n'; var text = new fabric.Text('xxxxxx\nx y', { textAlign: 'justify', }); @@ -19,13 +19,13 @@ assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG_JUSTIFIED)); }); QUnit.test('toSVG with multiple spaces', function(assert) { - var TEXT_SVG_MULTIPLESPACES = '\n\t\tx y\n\n'; + var TEXT_SVG_MULTIPLESPACES = '\n\t\tx y\n\n'; var text = new fabric.Text('x y'); assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG_MULTIPLESPACES)); }); QUnit.test('toSVG with deltaY', function(assert) { fabric.Object.NUM_FRACTION_DIGITS = 0; - var TEXT_SVG = '\n\t\txx\n\n'; + var TEXT_SVG = '\n\t\txx\n\n'; var text = new fabric.Text('xx', { styles: { 0: { @@ -41,7 +41,7 @@ }); QUnit.test('toSVG with font', function(assert) { - var TEXT_SVG_WITH_FONT = '\n\t\txxxxxxx y\n\n'; + var TEXT_SVG_WITH_FONT = '\n\t\txxxxxxx y\n\n'; var text = new fabric.Text('xxxxxx\nx y', { textAlign: 'justify', styles: {0: { diff --git a/test/unit/textbox.js b/test/unit/textbox.js index d2aa7bac..ce21891e 100644 --- a/test/unit/textbox.js +++ b/test/unit/textbox.js @@ -20,6 +20,7 @@ strokeWidth: 1, strokeDashArray: null, strokeLineCap: 'butt', + strokeDashOffset: 0, strokeLineJoin: 'miter', strokeMiterLimit: 4, scaleX: 1,