diff --git a/test/lib/helpers.js b/test/lib/helpers.js
index 0cdb47a1..7a02d721 100644
--- a/test/lib/helpers.js
+++ b/test/lib/helpers.js
@@ -273,8 +273,16 @@ function asyncTest(testName, expected) {
// SVG
-function createSVG(xml) {
- return new DOMParser().parseFromString(
- '',
- 'text/xml');
+function createSVG(str, attrs) {
+ if (attrs) {
+ // Similar to SVGExport's createElement / setAttributes.
+ var node = document.createElementNS('http://www.w3.org/2000/svg', str);
+ for (var key in attrs)
+ node.setAttribute(key, attrs[key]);
+ return node;
+ } else {
+ return new DOMParser().parseFromString(
+ '',
+ 'text/xml');
+ }
}
diff --git a/test/tests/JSON.js b/test/tests/JSON.js
index 00712cba..6428d42d 100644
--- a/test/tests/JSON.js
+++ b/test/tests/JSON.js
@@ -26,7 +26,6 @@ test('Circles', function() {
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'black';
- console.log('JSON', path.exportJSON());
var topLeft = new Point(5, 400);
var size = new Size(100, 50);
diff --git a/test/tests/SVGImport.js b/test/tests/SVGImport.js
index 52a43b47..c9295a35 100644
--- a/test/tests/SVGImport.js
+++ b/test/tests/SVGImport.js
@@ -18,380 +18,104 @@ test('Import complex CompoundPath and clone', function() {
equals(item, item.clone(), null, { cloned: true });
});
-test('make an svg line', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'line');
- var x1 = 5,
- x2 = 45,
- y1 = 5,
- y2 = 45;
- shape.setAttribute('x1', x1);
- shape.setAttribute('y1', y1);
- shape.setAttribute('x2', x2);
- shape.setAttribute('y2', y2);
-
- var importedLine = paper.project.importSVG(shape);
-
- var line = new Path.Line([x1, y1], [x2, y2]);
-
- equals(importedLine, line);
+test('Import SVG line', function() {
+ var attrs = {
+ x1: 5,
+ x2: 45,
+ y1: 5,
+ y2: 45
+ };
+ var imported = paper.project.importSVG(createSVG('line', attrs));
+ var path = new Path.Line([attrs.x1, attrs.y1], [attrs.x2, attrs.y2]);
+ equals(imported, path);
});
-test('make an svg line with invalid values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'line');
- shape.setAttribute('x1', null);
- shape.setAttribute('y1', null);
- shape.setAttribute('x2', null);
- shape.setAttribute('y2', null);
-
- var importedLine = paper.project.importSVG(shape);
-
- var line = new Path.Line([0, 0], [0, 0]);
-
- equals(importedLine, line);
+test('Import SVG rect', function() {
+ var attrs = {
+ x: 25,
+ y: 25,
+ width: 100,
+ height: 100
+ };
+ var imported = paper.project.importSVG(createSVG('rect', attrs),
+ { expandShapes: true });
+ var path = new Path.Rectangle(attrs);
+ equals(imported, path);
});
-test('compare rectangle values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'rect');
- var x = 25,
- y = 25,
- width = 100,
- height = 100;
- shape.setAttribute('x', x);
- shape.setAttribute('y', y);
- shape.setAttribute('width', width);
- shape.setAttribute('height', height);
-
- var importedRectangle = paper.project.importSVG(shape);
-
- var topLeft = new Point(x, y);
- var size = new Size(width, height);
- var rectangle = new Rectangle(topLeft, size);
- var realRectangle = new Shape.Rectangle(rectangle);
-
- equals(importedRectangle, realRectangle);
+test('Import SVG round rect', function() {
+ var attrs = {
+ x: 25,
+ y: 25,
+ rx: 50,
+ ry: 50,
+ width: 100,
+ height: 100
+ };
+ var imported = paper.project.importSVG(createSVG('rect', attrs),
+ { expandShapes: true });
+ var path = new Path.Rectangle(new Rectangle(attrs),
+ new Size(attrs.rx, attrs.ry));
+ equals(imported, path);
});
-
-test('compare negative rectangle values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'rect');
- var x = -925,
- y = -111,
- width = -100,
- height = -18;
- shape.setAttribute('x', x);
- shape.setAttribute('y', y);
- shape.setAttribute('width', width);
- shape.setAttribute('height', height);
-
- var importedRectangle = paper.project.importSVG(shape);
- var topLeft = new Point(x, y);
- var size = new Size(width, height);
- var rectangle = new Rectangle(topLeft, size);
- var realRectangle = new Shape.Rectangle(rectangle);
-
- equals(importedRectangle, realRectangle);
-});
-
-
-test('compare invalid rectangle values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'rect');
-
- shape.setAttribute('x', null);
- shape.setAttribute('y', null);
- shape.setAttribute('width', null);
- shape.setAttribute('height', null);
-
- var importedRectangle = paper.project.importSVG(shape);
-
- var topLeft = new Point(0, 0);
- var size = new Size(0, 0);
- var rectangle = new Rectangle(topLeft, size);
- var realRectangle = new Shape.Rectangle(rectangle);
-
- equals(importedRectangle, realRectangle);
-});
-
-test('compare round rectangle values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'rect');
- var x = 25,
- y = 25,
- rx = 50,
- ry = 50,
- width = 100,
- height = 100;
- shape.setAttribute('x', x);
- shape.setAttribute('y', y);
- shape.setAttribute('rx', rx);
- shape.setAttribute('ry', ry);
- shape.setAttribute('width', width);
- shape.setAttribute('height', height);
-
- var importedRectangle = paper.project.importSVG(shape);
-
- var topLeft = new Point(x, y);
- var size = new Size(width, height);
- var cornerSize = new Size(rx, ry);
- var rectangle = new Rectangle(topLeft, size);
- var roundRect = new Shape.Rectangle(rectangle, cornerSize);
-
- equals(importedRectangle, roundRect);
-});
-
-test('compare negative round rectangle values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'rect');
- var x = -25,
- y = -25,
- rx = -50,
- ry = -50,
- width = -100,
- height = -100;
- shape.setAttribute('x', x);
- shape.setAttribute('y', y);
- shape.setAttribute('rx', rx);
- shape.setAttribute('ry', ry);
- shape.setAttribute('width', width);
- shape.setAttribute('height', height);
-
- var importedRectangle = paper.project.importSVG(shape);
-
- var topLeft = new Point(x, y);
- var size = new Size(width, height);
- var cornerSize = new Size(rx, ry);
- var rectangle = new Rectangle(topLeft, size);
- var roundRect = new Shape.Rectangle(rectangle, cornerSize);
-
- equals(importedRectangle, roundRect);
-});
-
-test('compare invalid round rectangle values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'rect');
- var x = null,
- y = null,
- rx = null,
- ry = null,
- width = null,
- height = null;
- shape.setAttribute('x', x);
- shape.setAttribute('y', y);
- shape.setAttribute('rx', rx);
- shape.setAttribute('ry', ry);
- shape.setAttribute('width', width);
- shape.setAttribute('height', height);
-
- var importedRectangle = paper.project.importSVG(shape);
-
- var topLeft = new Point(x, y);
- var size = new Size(width, height);
- var cornerSize = new Size(rx, ry);
- var rectangle = new Rectangle(topLeft, size);
- var roundRect = new Shape.Rectangle(rectangle, cornerSize);
-
- equals(importedRectangle, roundRect);
-});
-
-test('compare ellipse values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'ellipse');
- var cx = 300,
- cy = 80,
- rx = 100,
- ry = 50;
- shape.setAttribute('cx', cx);
- shape.setAttribute('cy', cy);
- shape.setAttribute('rx', rx);
- shape.setAttribute('ry', ry);
-
- var importedEllipse = paper.project.importSVG(shape);
-
- var ellipse = new Shape.Ellipse({
- center: new Point(cx, cy),
- radius: new Point(rx, ry)
+test('Import SVG ellipse', function() {
+ var attrs = {
+ cx: 300,
+ cy: 80,
+ rx: 100,
+ ry: 50
+ }
+ var imported = paper.project.importSVG(createSVG('ellipse', attrs),
+ { expandShapes: true });
+ var path = new Path.Ellipse({
+ center: new Point(attrs.cx, attrs.cy),
+ radius: new Point(attrs.rx, attrs.ry)
});
-
- equals(importedEllipse, ellipse);
+ equals(imported, path);
});
-test('compare negative ellipse values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'ellipse');
- var cx = -111,
- cy = -2,
- rx = -292,
- ry = -1;
- shape.setAttribute('cx', cx);
- shape.setAttribute('cy', cy);
- shape.setAttribute('rx', rx);
- shape.setAttribute('ry', ry);
-
- var importedEllipse = paper.project.importSVG(shape);
-
- var ellipse = new Shape.Ellipse({
- center: new Point(cx, cy),
- radius: new Point(rx, ry)
+test('Import SVG circle', function() {
+ var attrs = {
+ cx: 100,
+ cy: 80,
+ r: 50
+ }
+ var imported = paper.project.importSVG(createSVG('circle', attrs),
+ { expandShapes: true });
+ var path = new Path.Circle({
+ center: new Point(attrs.cx, attrs.cy),
+ radius: attrs.r
});
-
- equals(importedEllipse, ellipse);
+ equals(imported, path);
});
-test('compare invalid ellipse values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'ellipse');
- shape.setAttribute('cx', null);
- shape.setAttribute('cy', null);
- shape.setAttribute('rx', null);
- shape.setAttribute('ry', null);
-
- var importedEllipse = paper.project.importSVG(shape);
-
- var ellipse = new Shape.Ellipse({
- center: new Point(0, 0),
- radius: new Point(0, 0)
+function createPolyPath(str) {
+ var points = str.split(' ').map(function(point) {
+ return point.split(',').map(parseFloat);
});
+ var path = new Path();
+ path.moveTo(points[0]);
+ for (var i = 1; i < points.length; i++)
+ path.lineTo(points[i]);
+ return path;
+}
- equals(importedEllipse, ellipse);
+test('Import SVG polygon', function() {
+ var points = '100,10 40,180 190,60 10,60 160,180';
+ var imported = paper.project.importSVG(createSVG('polygon', {
+ points: points
+ }));
+ var path = createPolyPath(points);
+ path.closePath();
+ equals(imported, path);
});
-test('compare circle values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'circle');
- var cx = 100,
- cy = 80,
- r = 50;
- shape.setAttribute('cx', cx);
- shape.setAttribute('cy', cy);
- shape.setAttribute('r', r);
-
- var importedCircle = paper.project.importSVG(shape);
-
- var center = new Point(cx, cy);
- var circle = new Shape.Circle(center, r);
-
- equals(importedCircle, circle);
-});
-
-test('compare negative circle values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'circle');
- var cx = -234,
- cy = -77,
- r = -1110;
- shape.setAttribute('cx', cx);
- shape.setAttribute('cy', cy);
- shape.setAttribute('r', r);
-
- var importedCircle = paper.project.importSVG(shape);
-
- var center = new Point(cx, cy);
- var circle = new Shape.Circle(center, r);
-
- equals(importedCircle, circle);
-});
-
-
-test('compare invalid circle values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'circle');
- shape.setAttribute('cx', null);
- shape.setAttribute('cy', null);
- shape.setAttribute('r', null);
-
- var importedCircle = paper.project.importSVG(shape);
-
- var center = new Point(0, 0);
- var circle = new Shape.Circle(center, 0);
-
- equals(importedCircle, circle);
-
-});
-
-test('compare polygon values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'polygon');
- var svgpoints = "100,10 40,180 190,60 10,60 160,180";
- shape.setAttribute('points', svgpoints);
-
- var importedPolygon = paper.project.importSVG(shape);
-
- var poly = new Path();
- var points = shape.points;
- poly.moveTo(points.getItem(0));
- for (var i = 1; i < points.numberOfItems; i++) {
- poly.lineTo(points.getItem(i));
- }
- if (shape.nodeName.toLowerCase() == 'polygon') {
- poly.closePath();
- }
-
- equals(importedPolygon, poly);
-});
-
-test('compare negative polygon values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'polygon');
- var svgpoints = "-100,-10 -40,-180 -190,-60 -10,-60 -160,-180";
- shape.setAttribute('points', svgpoints);
-
- var importedPolygon = paper.project.importSVG(shape);
-
- var poly = new Path();
- var points = shape.points;
- poly.moveTo(points.getItem(0));
- for (var i = 1; i < points.numberOfItems; i++) {
- poly.lineTo(points.getItem(i));
- }
- if (shape.nodeName.toLowerCase() == 'polygon') {
- poly.closePath();
- }
-
- equals(importedPolygon, poly);
-});
-
-test('compare polyline values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'polyline');
- var svgpoints = "5,5 45,45 5,45 45,5";
- shape.setAttribute('points', svgpoints);
-
- var importedPolyline = paper.project.importSVG(shape);
-
- var poly = new Path();
- var points = shape.points;
- poly.moveTo(points.getItem(0));
- for (var i = 1; i < points.numberOfItems; i++) {
- poly.lineTo(points.getItem(i));
- }
- if (shape.nodeName.toLowerCase() == 'polygon') {
- poly.closePath();
- }
-
- equals(importedPolyline, poly);
-});
-
-test('compare negative polyline values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'polyline');
- var svgpoints = "-5,-5 -45,-45 -5,-45 -45,-5";
- shape.setAttribute('points', svgpoints);
-
- var importedPolyline = paper.project.importSVG(shape);
-
- var poly = new Path();
- var points = shape.points;
- poly.moveTo(points.getItem(0));
- for (var i = 1; i < points.numberOfItems; i++) {
- poly.lineTo(points.getItem(i));
- }
- if (shape.nodeName.toLowerCase() == 'polygon') {
- poly.closePath();
- }
-
- equals(importedPolyline, poly);
+test('Import SVG polyline', function() {
+ var points = "5,5 45,45 5,45 45,5";
+ var imported = paper.project.importSVG(createSVG('polyline', {
+ points: points
+ }));
+ var path = createPolyPath(points);
+ equals(imported, path);
});