Clean up SVGExport tests.

This commit is contained in:
Jürg Lehni 2015-07-27 11:42:41 +02:00
parent 5604dd7a30
commit 3816407ee7
4 changed files with 111 additions and 523 deletions

View file

@ -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) {

View file

@ -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
}));
});

View file

@ -12,12 +12,6 @@
module('SVGImport');
test('Import complex CompoundPath and clone', function() {
var svg = createSVG('<path id="path" fill="red" d="M4,14h20v-2H4V14z M15,26h7v-2h-7V26z M15,22h9v-2h-9V22z M15,18h9v-2h-9V18z M4,26h9V16H4V26z M28,10V6H0v22c0,0,0,4,4,4 h25c0,0,3-0.062,3-4V10H28z M4,30c-2,0-2-2-2-2V8h24v20c0,0.921,0.284,1.558,0.676,2H4z"/>;');
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('<path id="path" fill="red" d="M4,14h20v-2H4V14z M15,26h7v-2h-7V26z M15,22h9v-2h-9V22z M15,18h9v-2h-9V18z M4,26h9V16H4V26z M28,10V6H0v22c0,0,0,4,4,4 h25c0,0,3-0.062,3-4V10H28z M4,30c-2,0-2-2-2-2V8h24v20c0,0.921,0.284,1.558,0.676,2H4z"/>;');
var item = paper.project.importSVG(svg.getElementById('path'));
equals(item, item.clone(), null, { cloned: true });
});

View file

@ -59,6 +59,7 @@
/*#*/ include('HitResult.js');
/*#*/ include('JSON.js');
/*#*/ include('SVGImport.js');
/*#*/ include('SVGExport.js');
/*#*/ include('JSON.js');