mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-29 09:22:22 -05:00
Clean up SVGImport tests.
This commit is contained in:
Jürg Lehni
parent
5f42020869
commit
5604dd7a30
3 changed files with 96 additions and 365 deletions
|
|
@ -273,8 +273,16 @@ function asyncTest(testName, expected) {
|
|||
|
||||
// SVG
|
||||
|
||||
function createSVG(xml) {
|
||||
return new DOMParser().parseFromString(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg">' + xml + '</svg>',
|
||||
'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(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg">' + str + '</svg>',
|
||||
'text/xml');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue