diff --git a/src/gradient.class.js b/src/gradient.class.js index 62f53d1523f..a3bfa35efef 100644 --- a/src/gradient.class.js +++ b/src/gradient.class.js @@ -248,7 +248,7 @@ '\n' ); } diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js index 5612bd21fb4..65b57b3be65 100644 --- a/src/static_canvas.class.js +++ b/src/static_canvas.class.js @@ -1406,33 +1406,32 @@ * @private */ _setSVGBgOverlayColor: function(markup, property) { - var filler = this[property]; + var filler = this[property], vpt = this.viewportTransform, finalWidth = this.width / vpt[0], + finalHeight = this.height / vpt[3]; if (!filler) { return; } if (filler.toLive) { var repeat = filler.repeat; markup.push( - '\n' ); } else { markup.push( - '\n' ); } diff --git a/test.js b/test.js index 35ebf7d36fe..eb5c9785671 100644 --- a/test.js +++ b/test.js @@ -50,7 +50,7 @@ testrunner.run({ './test/unit/canvas_events.js', './test/unit/text_to_svg.js', ], - // tests: ['./test/unit/pattern.js'], + //tests: ['./test/unit/canvas_static.js',], }, function(err, report) { if (err) { console.log(err); diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index 004ffc8222f..70db1344438 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -1699,6 +1699,57 @@ } }); + QUnit.test('toSVG with background', function(assert) { + var canvas2 = new fabric.StaticCanvas(); + canvas2.backgroundColor = 'red'; + var svg = canvas2.toSVG(); + var expectedSVG = '\n\n\nCreated with Fabric.js ' + fabric.version + '\n\n\n\n'; + assert.equal(svg, expectedSVG, 'svg is as expected'); + }); + + QUnit.test('toSVG with background and zoom and svgViewportTransformation', function(assert) { + var canvas2 = new fabric.StaticCanvas(); + canvas2.backgroundColor = 'blue'; + canvas2.svgViewportTransformation = true; + canvas2.viewportTransform = [3, 0, 0, 3, 60, 30]; + var svg = canvas2.toSVG(); + var expectedSVG = '\n\n\nCreated with Fabric.js ' + fabric.version + '\n\n\n\n'; + assert.equal(svg, expectedSVG, 'svg is as expected'); + }); + + QUnit.test('toSVG with background gradient', function(assert) { + fabric.Object.__uid = 0; + var canvas2 = new fabric.StaticCanvas(); + canvas2.backgroundColor = new fabric.Gradient({ + type: 'linear', + colorStops: [ + { offset: 0, color: 'black' }, + { offset: 1, color: 'white' }, + ], + coords: { + x1: 0, + x2: 300, + y1: 0, + y2: 0, + }, + }); + var svg = canvas2.toSVG(); + var expectedSVG = '\n\n\nCreated with Fabric.js ' + fabric.version + '\n\n\n\n\n\n\n\n'; + assert.equal(svg, expectedSVG, 'svg is as expected'); + }); + + QUnit.test('toSVG with background pattern', function(assert) { + fabric.Object.__uid = 0; + var canvas2 = new fabric.StaticCanvas(); + canvas2.backgroundColor = new fabric.Pattern({ + source: 'a.jpeg', + repeat: 'repeat', + }); + var svg = canvas2.toSVG(); + var expectedSVG = '\n\n\nCreated with Fabric.js ' + fabric.version + '\n\n\n\n\n\n\n'; + assert.equal(svg, expectedSVG, 'svg is as expected'); + }); + // QUnit.test('backgroundImage', function(assert) { // var done = assert.async(); // assert.deepEqual('', canvas.backgroundImage); diff --git a/test/unit/gradient.js b/test/unit/gradient.js index 2559438b1a2..8b323ff9f63 100644 --- a/test/unit/gradient.js +++ b/test/unit/gradient.js @@ -72,10 +72,10 @@ }); } - var SVG_LINEAR = '\n\n\n\n'; - var SVG_RADIAL = '\n\n\n\n'; - var SVG_INTERNALRADIUS = '\n\n\n\n'; - var SVG_SWAPPED = '\n\n\n\n'; + var SVG_LINEAR = '\n\n\n\n'; + var SVG_RADIAL = '\n\n\n\n'; + var SVG_INTERNALRADIUS = '\n\n\n\n'; + var SVG_SWAPPED = '\n\n\n\n'; QUnit.test('constructor linearGradient', function(assert) {