diff --git a/test/lib/helpers.js b/test/lib/helpers.js
index 7a02d721..c483fb27 100644
--- a/test/lib/helpers.js
+++ b/test/lib/helpers.js
@@ -67,6 +67,28 @@ var comparators = {
QUnit.push(Base.equals(actual, expected), actual, expected, message);
},
+ Element: function(actual, expected, message, options) {
+ // Convention: Loop through the attribute lists of both actual and
+ // expected element, and compare values even if they may be inherited.
+ // This is to handle styling values on SVGElements more flexibly.
+ equals(actual && actual.tagName, expected.tagName,
+ (message || '') + '.tagName', options);
+ for (var i = 0; i < expected.attributes.length; i++) {
+ var attr = expected.attributes[i];
+ if (attr.specified) {
+ equals(actual && actual.getAttribute(attr.name), attr.value,
+ (message || '') + '.' + attr.name, options);
+ }
+ }
+ for (var i = 0; i < actual && actual.attributes.length; i++) {
+ var attr = actual.attributes[i];
+ if (attr.specified) {
+ equals(attr.value, expected.getAttribute(attr.name)
+ (message || '') + '.' + attr.name, options);
+ }
+ }
+ },
+
Base: function(actual, expected, message, options) {
comparators.Object(actual, expected, message, options);
},
@@ -228,14 +250,12 @@ function equals(actual, expected, message, options) {
|| type === 'boolean' && 'Boolean'
|| type === 'undefined' && 'Undefined'
|| Array.isArray(expected) && 'Array'
- || (cls = expected && expected._class)
- || type === 'object' && 'Object';
+ || expected instanceof Element && 'Element' // handle DOM Elements
+ || (cls = expected && expected._class) // check _class 2nd last
+ || type === 'object' && 'Object'; // Object as catch-all
var comparator = type && comparators[type];
- if (!message) {
- message = type
- ? type.charAt(0).toLowerCase() + type.substring(1)
- : 'value';
- }
+ if (!message)
+ message = type ? type.toLowerCase() : 'value';
if (comparator) {
comparator(actual, expected, message, options);
} else if (expected && expected.equals) {
diff --git a/test/tests/SVGExport.js b/test/tests/SVGExport.js
index 217c1088..30eca294 100644
--- a/test/tests/SVGExport.js
+++ b/test/tests/SVGExport.js
@@ -12,527 +12,94 @@
module('SVGExport');
-// TODO: Implement proper tests and clean up testing code
-
-test('compare line path functions', 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 line = new Path.Line([x1, y1], [x2, y2]);
-
- var exportedLine = line.exportSVG();
-
- var shapex1 = shape.getAttribute('x1');
- var shapey1 = shape.getAttribute('y1');
- var shapex2 = shape.getAttribute('x2');
- var shapey2 = shape.getAttribute('y2');
-
- var exportedx1 = exportedLine.getAttribute('x1');
- var exportedy1 = exportedLine.getAttribute('y1');
- var exportedx2 = exportedLine.getAttribute('x2');
- var exportedy2 = exportedLine.getAttribute('y2');
-
- equals(shapex1, exportedx1);
- equals(shapey1, exportedy1);
- equals(shapex2, exportedx2);
- equals(shapey2, exportedy2);
-
+test('Export SVG line', function() {
+ var attrs = {
+ x1: 5,
+ x2: 45,
+ y1: 5,
+ y2: 45
+ };
+ var path = new Path.Line([attrs.x1, attrs.y1], [attrs.x2, attrs.y2]);
+ equals(path.exportSVG(), createSVG('line', attrs));
});
-test('compare negative line path functions', 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 line = new Path.Line([x1, y1], [x2, y2]);
-
- var exportedLine = line.exportSVG();
-
- var shapex1 = shape.getAttribute('x1');
- var shapey1 = shape.getAttribute('y1');
- var shapex2 = shape.getAttribute('x2');
- var shapey2 = shape.getAttribute('y2');
-
- var exportedx1 = exportedLine.getAttribute('x1');
- var exportedy1 = exportedLine.getAttribute('y1');
- var exportedx2 = exportedLine.getAttribute('x2');
- var exportedy2 = exportedLine.getAttribute('y2');
-
- equals(shapex1, exportedx1);
- equals(shapey1, exportedy1);
- equals(shapex2, exportedx2);
- equals(shapey2, exportedy2);
-
+test('Export SVG rect', function() {
+ var attrs = {
+ x: 25,
+ y: 25,
+ width: 100,
+ height: 100
+ };
+ var path = new Path.Rectangle(attrs);
+ equals(path.exportSVG({ matchShapes: true }), createSVG('rect', attrs));
});
-test('compare invalid line path functions', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'line');
- var x1 = null,
- x2 = null,
- y1 = null,
- y2 = null;
- shape.setAttribute('x1', x1);
- shape.setAttribute('y1', y1);
- shape.setAttribute('x2', x2);
- shape.setAttribute('y2', y2);
-
- var line = new Path.Line([x1, y1], [x2, y2]);
-
- var exportedLine = line.exportSVG();
-
- var shapex1 = shape.getAttribute('x1');
- var shapey1 = shape.getAttribute('y1');
- var shapex2 = shape.getAttribute('x2');
- var shapey2 = shape.getAttribute('y2');
-
- var exportedx1 = exportedLine.getAttribute('x1');
- var exportedy1 = exportedLine.getAttribute('y1');
- var exportedx2 = exportedLine.getAttribute('x2');
- var exportedy2 = exportedLine.getAttribute('y2');
-
- equals(shapex1, exportedx1);
- equals(shapey1, exportedy1);
- equals(shapex2, exportedx2);
- equals(shapey2, exportedy2);
-
+test('Export SVG round rect', function() {
+ var attrs = {
+ x: 25,
+ y: 25,
+ rx: 50,
+ ry: 50,
+ width: 100,
+ height: 100
+ };
+ var path = new Path.Rectangle(new Rectangle(attrs),
+ new Size(attrs.rx, attrs.ry));
+ equals(path.exportSVG({ matchShapes: true }), createSVG('rect', attrs));
});
-/*
-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 point = new Point(100, 100);
- var size = new Size(100, 100);
- var path = new Path.Rectangle(point, size);
-
- var exportedRectangle = path.exportSVG();
-
- var shapex1 = shape.getAttribute('x');
- var shapey1 = shape.getAttribute('y1');
- var shapewidth = shape.getAttribute('width');
- var shapeheight = shape.getAttribute('height');
-
- var exportedx = exportedRectangle.getAttribute('x1');
- var exportedy = exportedRectangle.getAttribute('y1');
-
- var exportedwidth = exportedRectangle.getAttribute('width');
- var exportedheight = exportedRectangle.getAttribute('height');
-
- equals(shapex, exportedx);
- equals(shapey, exportedy);
- equals(shapewidth, exportedwidth);
- equals(shapeheight, exportedheight);
-});
-
-test('compare negative 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 topLeft = new Point(x, y);
- var size = new Size(width, height);
- var rect = new Rectangle(topLeft, size);
-
- var exportedRectangle = rect.exportSVG();
-
- var shapex = shape.getAttribute('x');
- var shapey = shape.getAttribute('y');
- var shapewidth = shape.getAttribute('width');
- var shapeheight = shape.getAttribute('height');
-
- var exportedx = exportedRectangle.getAttribute('x');
- var exportedy = exportedRectangle.getAttribute('y');
- var exportedwidth = exportedRectangle.getAttribute('width');
- var exportedheight = exportedRectangle.getAttribute('height');
-
- equals(shapex, exportedx);
- equals(shapey, exportedy);
- equals(shapewidth, exportedwidth);
- equals(shapeheight, exportedheight);
-});
-
-test('compare invalid rectangle values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'rect');
- var x = null,
- y = null,
- width = null,
- height = 100;
- shape.setAttribute('x', x);
- shape.setAttribute('y', y);
- shape.setAttribute('width', width);
- shape.setAttribute('height', height);
-
- var topLeft = new Point(x, y);
- var size = new Size(width, height);
- var rect = new Rectangle(topLeft, size);
-
- var exportedRectangle = rect.exportSVG();
-
- var shapex = shape.getAttribute('x');
- var shapey = shape.getAttribute('y');
- var shapewidth = shape.getAttribute('width');
- var shapeheight = shape.getAttribute('height');
-
- var exportedx = exportedRectangle.getAttribute('x');
- var exportedy = exportedRectangle.getAttribute('y');
- var exportedwidth = exportedRectangle.getAttribute('width');
- var exportedheight = exportedRectangle.getAttribute('height');
-
- equals(shapex, exportedx);
- equals(shapey, exportedy);
- equals(shapewidth, exportedwidth);
- equals(shapeheight, exportedheight);
-});
-
-test('compare rounded 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 topLeft = new Point(x, y);
- var size = new Size(width, height);
- var cornerSize = new Size(rx, ry);
- var rect = new Rectangle(topLeft, size);
- var roundRect = new Path.Rectangle(rect, cornerSize);
-
- var exportedRectangle = rect.exportSVG();
-
- var shapex = shape.getAttribute('x');
- var shapey = shape.getAttribute('y');
- var shapecx = shape.getAttribute('rx');
- var shapecy = shape.getAttribute('ry');
- var shapewidth = shape.getAttribute('width');
- var shapeheight = shape.getAttribute('height');
-
- var exportedx = exportedRectangle.getAttribute('x');
- var exportedy = exportedRectangle.getAttribute('y');
- var exportedcx = exportedRectangle.getAttribute('rx');
- var exportedcy = exportedRectangle.getAttribute('ry');
- var exportedwidth = exportedRectangle.getAttribute('width');
- var exportedheight = exportedRectangle.getAttribute('height');
-
- equals(shapex, exportedx);
- equals(shapey, exportedy);
- equals(shapewidth, exportedwidth);
- equals(shapeheight, exportedheight);
-});
-
-test('compare negative rounded 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 topLeft = new Point(x, y);
- var size = new Size(width, height);
- var cornerSize = new Size(rx, ry);
- var rect = new Rectangle(topLeft, size);
- var roundRect = new Path.Rectangle(rect, cornerSize);
-
- var exportedRectangle = rect.exportSVG();
-
- var shapex = shape.getAttribute('x');
- var shapey = shape.getAttribute('y');
- var shapecx = shape.getAttribute('rx');
- var shapecy = shape.getAttribute('ry');
- var shapewidth = shape.getAttribute('width');
- var shapeheight = shape.getAttribute('height');
-
- var exportedx = exportedRectangle.getAttribute('x');
- var exportedy = exportedRectangle.getAttribute('y');
- var exportedcx = exportedRectangle.getAttribute('rx');
- var exportedcy = exportedRectangle.getAttribute('ry');
- var exportedwidth = exportedRectangle.getAttribute('width');
- var exportedheight = exportedRectangle.getAttribute('height');
-
- equals(shapex, exportedx);
- equals(shapey, exportedy);
- equals(shapewidth, exportedwidth);
- equals(shapeheight, exportedheight);
-});
-
-test('compare invalid rounded 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 topLeft = new Point(x, y);
- var size = new Size(width, height);
- var cornerSize = new Size(rx, ry);
- var rect = new Rectangle(topLeft, size);
- var roundRect = new Path.Rectangle(rect, cornerSize);
-
- var exportedRectangle = rect.exportSVG();
-
- var shapex = shape.getAttribute('x');
- var shapey = shape.getAttribute('y');
- var shapecx = shape.getAttribute('rx');
- var shapecy = shape.getAttribute('ry');
- var shapewidth = shape.getAttribute('width');
- var shapeheight = shape.getAttribute('height');
-
- var exportedx = exportedRectangle.getAttribute('x');
- var exportedy = exportedRectangle.getAttribute('y');
- var exportedcx = exportedRectangle.getAttribute('rx');
- var exportedcy = exportedRectangle.getAttribute('ry');
- var exportedwidth = exportedRectangle.getAttribute('width');
- var exportedheight = exportedRectangle.getAttribute('height');
-
- equals(shapex, exportedx);
- equals(shapey, exportedy);
- equals(shapewidth, exportedwidth);
- equals(shapeheight, exportedheight);
-});*/
-
-test('compare ellipse values', function() {
- var svgns = 'http://www.w3.org/2000/svg';
- var shape = document.createElementNS(svgns, 'ellipse');
- var cx = 100,
- cy = 80,
- rx = 50,
- ry = 30;
- shape.setAttribute('cx', cx);
- shape.setAttribute('cy', cy);
- shape.setAttribute('rx', rx);
- shape.setAttribute('ry', ry);
-
- var center = new Point(cx, cy);
- var offset = new Point(rx, ry);
- var topLeft = center.subtract(offset);
- var bottomRight = center.add(offset);
-
- var rect = new Rectangle(topLeft, bottomRight);
- var ellipse = new Shape.Ellipse(rect);
-
- var exportedEllipse = ellipse.exportSVG();
-
- var shapecx = shape.getAttribute('cx');
- var shapecy = shape.getAttribute('cy');
- var shaperx = shape.getAttribute('rx');
- var shapery = shape.getAttribute('ry');
-
- var exportedcx = exportedEllipse.getAttribute('cx');
- var exportedcy = exportedEllipse.getAttribute('cy');
- var exportedrx = exportedEllipse.getAttribute('rx');
- var exportedry = exportedEllipse.getAttribute('ry');
-
- equals(shapecx, exportedcx);
- equals(shapecy, exportedcy);
- equals(shaperx, exportedrx);
- equals(shapery, exportedry);
-
-});
-
-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 center = new Point(cx, cy);
- var circle = new Shape.Circle(center, r);
-
- var exportedCircle = circle.exportSVG();
-
- var shapecx = shape.getAttribute('cx');
- var shapecy = shape.getAttribute('cy');
- var shaper = shape.getAttribute('r');
-
- var exportedcx = exportedCircle.getAttribute('cx');
- var exportedcy = exportedCircle.getAttribute('cy');
- var exportedr = exportedCircle.getAttribute('r');
-
- equals(shapecx, exportedcx);
- equals(shapecy, exportedcy);
- equals(shaper, exportedr);
-
-});
-
-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 poly = new Path();
- var points = shape.points;
- var start = points.getItem(0);
- var point;
- poly.moveTo([start.x, start.y]);
-
- for (var i = 1; i < points.length; i++) {
- point = points.getItem(i);
- poly.lineTo([point.x, point.y]);
+test('Export SVG ellipse', function() {
+ var attrs = {
+ cx: 300,
+ cy: 80,
+ rx: 100,
+ ry: 50
}
- if (shape.nodeName.toLowerCase() == 'polygon') {
- poly.closePath();
- }
-
- var exportedPolygon = poly.exportSVG();
-
- var svgPoints = shape.getAttribute('points');
-
- var exportedPoints = shape.getAttribute('points');
-
- equals(svgPoints, exportedPoints);
-
+ var path = new Path.Ellipse({
+ center: new Point(attrs.cx, attrs.cy),
+ radius: new Point(attrs.rx, attrs.ry)
+ });
+ equals(path.exportSVG({ matchShapes: true }), createSVG('ellipse', attrs));
});
-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 poly = new Path();
- var points = shape.points;
- var start = points.getItem(0);
- var point;
- poly.moveTo([start.x, start.y]);
-
- for (var i = 1; i < points.length; i++) {
- point = points.getItem(i);
- poly.lineTo([point.x, point.y]);
+test('Export SVG circle', function() {
+ var attrs = {
+ cx: 100,
+ cy: 80,
+ r: 50
}
- if (shape.nodeName.toLowerCase() == 'polygon') {
- poly.closePath();
- }
-
- var exportedPolygon = poly.exportSVG();
-
- var svgPoints = shape.getAttribute('points');
-
- var exportedPoints = shape.getAttribute('points');
-
- equals(svgPoints, exportedPoints);
-
+ var path = new Path.Circle({
+ center: new Point(attrs.cx, attrs.cy),
+ radius: attrs.r
+ });
+ equals(path.exportSVG({ matchShapes: true }), createSVG('circle', attrs));
});
-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 poly = new Path();
- var points = shape.points;
- var start = points.getItem(0);
- var point;
- poly.moveTo([start.x, start.y]);
-
- for (var i = 1; i < points.length; i++) {
- point = points.getItem(i);
- poly.lineTo([point.x, point.y]);
- }
- if (shape.nodeName.toLowerCase() == 'polygon') {
- poly.closePath();
- }
-
- var exportedPolygon = poly.exportSVG();
-
- var svgPoints = shape.getAttribute('points');
-
- var exportedPoints = shape.getAttribute('points');
-
- equals(svgPoints, exportedPoints);
+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;
+}
+test('Export SVG polygon', function() {
+ var points = '100,10 40,180 190,60 10,60 160,180';
+ var path = createPolyPath(points);
+ path.closePath();
+ equals(path.exportSVG({ matchShapes: true }), createSVG('polygon', {
+ points: points
+ }));
});
-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 poly = new Path();
- var points = shape.points;
- var start = points.getItem(0);
- var point;
- poly.moveTo([start.x, start.y]);
-
- for (var i = 1; i < points.length; i++) {
- point = points.getItem(i);
- poly.lineTo([point.x, point.y]);
- }
- if (shape.nodeName.toLowerCase() == 'polygon') {
- poly.closePath();
- }
-
- var exportedPolygon = poly.exportSVG();
-
- var svgPoints = shape.getAttribute('points');
-
- var exportedPoints = shape.getAttribute('points');
-
- equals(svgPoints, exportedPoints);
-
+test('Export SVG polyline', function() {
+ var points = '5,5 45,45 5,45 45,5';
+ var path = createPolyPath(points);
+ equals(path.exportSVG({ matchShapes: true }), createSVG('polyline', {
+ points: points
+ }));
});
+
diff --git a/test/tests/SVGImport.js b/test/tests/SVGImport.js
index c9295a35..212443dc 100644
--- a/test/tests/SVGImport.js
+++ b/test/tests/SVGImport.js
@@ -12,12 +12,6 @@
module('SVGImport');
-test('Import complex CompoundPath and clone', function() {
- var svg = createSVG(';');
- var item = paper.project.importSVG(svg.getElementById('path'));
- equals(item, item.clone(), null, { cloned: true });
-});
-
test('Import SVG line', function() {
var attrs = {
x1: 5,
@@ -112,10 +106,16 @@ test('Import SVG polygon', function() {
});
test('Import SVG polyline', function() {
- var points = "5,5 45,45 5,45 45,5";
+ 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);
});
+
+test('Import complex CompoundPath and clone', function() {
+ var svg = createSVG(';');
+ var item = paper.project.importSVG(svg.getElementById('path'));
+ equals(item, item.clone(), null, { cloned: true });
+});
diff --git a/test/tests/load.js b/test/tests/load.js
index acc8fdc7..adf878e3 100644
--- a/test/tests/load.js
+++ b/test/tests/load.js
@@ -59,6 +59,7 @@
/*#*/ include('HitResult.js');
+/*#*/ include('JSON.js');
+
/*#*/ include('SVGImport.js');
/*#*/ include('SVGExport.js');
-/*#*/ include('JSON.js');