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( - '' + xml + '', - '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( + '' + str + '', + '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); });