zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Convert all tabs to spaces in tests for issue #37

master
codedread 2018-05-17 21:12:27 -07:00
parent 81c11b2ce0
commit 8b7b2d89da
17 changed files with 3555 additions and 3555 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
test/all_tests.js
View File

@ -1,12 +1,12 @@
/* eslint-disable no-var */
var iframes = document.getElementsByTagName('iframe');
for (var i = 0, len = iframes.length; i < len; ++i) {
var f = iframes[i];
(function (f) {
f.addEventListener('load', function () {
f.contentWindow.QUnit.done = function () {
f.style.height = (f.contentDocument.body.scrollHeight + 20) + 'px';
};
});
})(f);
var f = iframes[i];
(function (f) {
f.addEventListener('load', function () {
f.contentWindow.QUnit.done = function () {
f.style.height = (f.contentDocument.body.scrollHeight + 20) + 'px';
};
});
})(f);
}

86
test/contextmenu_test.js
View File

@ -2,61 +2,61 @@
/* eslint-env qunit */
/* globals svgedit, $, equals */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
function tearDown () {
svgedit.contextmenu.resetCustomMenus();
}
function tearDown () {
svgedit.contextmenu.resetCustomMenus();
}
module('svgedit.contextmenu');
module('svgedit.contextmenu');
test('Test svgedit.contextmenu package', function () {
expect(4);
test('Test svgedit.contextmenu package', function () {
expect(4);
ok(svgedit.contextmenu, 'contextmenu registered correctly');
ok(svgedit.contextmenu.add, 'contextmenu.add registered correctly');
ok(svgedit.contextmenu.hasCustomHandler, 'contextmenu hasCustomHandler registered correctly');
ok(svgedit.contextmenu.getCustomHandler, 'contextmenu getCustomHandler registered correctly');
});
ok(svgedit.contextmenu, 'contextmenu registered correctly');
ok(svgedit.contextmenu.add, 'contextmenu.add registered correctly');
ok(svgedit.contextmenu.hasCustomHandler, 'contextmenu hasCustomHandler registered correctly');
ok(svgedit.contextmenu.getCustomHandler, 'contextmenu getCustomHandler registered correctly');
});
test('Test svgedit.contextmenu does not add invalid menu item', function () {
expect(3);
test('Test svgedit.contextmenu does not add invalid menu item', function () {
expect(3);
svgedit.contextmenu.add({id: 'justanid'});
ok(!svgedit.contextmenu.hasCustomHandler('justanid'), 'menu item with just an id is invalid');
svgedit.contextmenu.add({id: 'justanid'});
ok(!svgedit.contextmenu.hasCustomHandler('justanid'), 'menu item with just an id is invalid');
svgedit.contextmenu.add({id: 'idandlabel', label: 'anicelabel'});
ok(!svgedit.contextmenu.hasCustomHandler('idandlabel'), 'menu item with just an id and label is invalid');
svgedit.contextmenu.add({id: 'idandlabel', label: 'anicelabel'});
ok(!svgedit.contextmenu.hasCustomHandler('idandlabel'), 'menu item with just an id and label is invalid');
svgedit.contextmenu.add({id: 'idandlabel', label: 'anicelabel', action: 'notafunction'});
ok(!svgedit.contextmenu.hasCustomHandler('idandlabel'), 'menu item with action that is not a function is invalid');
});
svgedit.contextmenu.add({id: 'idandlabel', label: 'anicelabel', action: 'notafunction'});
ok(!svgedit.contextmenu.hasCustomHandler('idandlabel'), 'menu item with action that is not a function is invalid');
});
test('Test svgedit.contextmenu adds valid menu item', function () {
expect(2);
test('Test svgedit.contextmenu adds valid menu item', function () {
expect(2);
var validItem = {id: 'valid', label: 'anicelabel', action: function () { alert('testing'); }};
svgedit.contextmenu.add(validItem);
var validItem = {id: 'valid', label: 'anicelabel', action: function () { alert('testing'); }};
svgedit.contextmenu.add(validItem);
ok(svgedit.contextmenu.hasCustomHandler('valid'), 'Valid menu item is added.');
equals(svgedit.contextmenu.getCustomHandler('valid'), validItem.action, 'Valid menu action is added.');
tearDown();
});
ok(svgedit.contextmenu.hasCustomHandler('valid'), 'Valid menu item is added.');
equals(svgedit.contextmenu.getCustomHandler('valid'), validItem.action, 'Valid menu action is added.');
tearDown();
});
test('Test svgedit.contextmenu rejects valid duplicate menu item id', function () {
expect(1);
test('Test svgedit.contextmenu rejects valid duplicate menu item id', function () {
expect(1);
var validItem1 = {id: 'valid', label: 'anicelabel', action: function () { alert('testing'); }};
var validItem2 = {id: 'valid', label: 'anicelabel', action: function () { alert('testingtwice'); }};
svgedit.contextmenu.add(validItem1);
svgedit.contextmenu.add(validItem2);
var validItem1 = {id: 'valid', label: 'anicelabel', action: function () { alert('testing'); }};
var validItem2 = {id: 'valid', label: 'anicelabel', action: function () { alert('testingtwice'); }};
svgedit.contextmenu.add(validItem1);
svgedit.contextmenu.add(validItem2);
equals(svgedit.contextmenu.getCustomHandler('valid'), validItem1.action, 'duplicate menu item is rejected.');
tearDown();
});
equals(svgedit.contextmenu.getCustomHandler('valid'), validItem1.action, 'duplicate menu item is rejected.');
tearDown();
});
});

662
test/coords_test.js
View File

@ -2,335 +2,335 @@
/* globals $, svgedit, equals */
/* eslint-disable no-var */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
var root = document.getElementById('root');
var svgroot = document.createElementNS(svgedit.NS.SVG, 'svg');
svgroot.id = 'svgroot';
root.appendChild(svgroot);
var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
svgroot.appendChild(svg);
var elemId = 1;
function setUp () {
// Mock out editor context.
svgedit.utilities.init({
getSVGRoot: function () { return svg; },
getDOMDocument: function () { return null; },
getDOMContainer: function () { return null; }
});
svgedit.coords.init({
getGridSnapping: function () { return false; },
getDrawing: function () {
return {
getNextId: function () { return '' + elemId++; }
};
}
});
}
function tearDown () {
while (svg.hasChildNodes()) {
svg.removeChild(svg.firstChild);
}
}
test('Test remapElement(translate) for rect', function () {
expect(4);
setUp();
var rect = document.createElementNS(svgedit.NS.SVG, 'rect');
rect.setAttribute('x', '200');
rect.setAttribute('y', '150');
rect.setAttribute('width', '250');
rect.setAttribute('height', '120');
svg.appendChild(rect);
var attrs = {
x: '200',
y: '150',
width: '125',
height: '75'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(rect, attrs, m);
equals(rect.getAttribute('x'), '300');
equals(rect.getAttribute('y'), '100');
equals(rect.getAttribute('width'), '125');
equals(rect.getAttribute('height'), '75');
tearDown();
});
test('Test remapElement(scale) for rect', function () {
expect(4);
setUp();
var rect = document.createElementNS(svgedit.NS.SVG, 'rect');
rect.setAttribute('width', '250');
rect.setAttribute('height', '120');
svg.appendChild(rect);
var attrs = {
x: '0',
y: '0',
width: '250',
height: '120'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 2; m.b = 0;
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
svgedit.coords.remapElement(rect, attrs, m);
equals(rect.getAttribute('x'), '0');
equals(rect.getAttribute('y'), '0');
equals(rect.getAttribute('width'), '500');
equals(rect.getAttribute('height'), '60');
tearDown();
});
test('Test remapElement(translate) for circle', function () {
expect(3);
setUp();
var circle = document.createElementNS(svgedit.NS.SVG, 'circle');
circle.setAttribute('cx', '200');
circle.setAttribute('cy', '150');
circle.setAttribute('r', '125');
svg.appendChild(circle);
var attrs = {
cx: '200',
cy: '150',
r: '125'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(circle, attrs, m);
equals(circle.getAttribute('cx'), '300');
equals(circle.getAttribute('cy'), '100');
equals(circle.getAttribute('r'), '125');
tearDown();
});
test('Test remapElement(scale) for circle', function () {
expect(3);
setUp();
var circle = document.createElementNS(svgedit.NS.SVG, 'circle');
circle.setAttribute('cx', '200');
circle.setAttribute('cy', '150');
circle.setAttribute('r', '250');
svg.appendChild(circle);
var attrs = {
cx: '200',
cy: '150',
r: '250'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 2; m.b = 0;
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
svgedit.coords.remapElement(circle, attrs, m);
equals(circle.getAttribute('cx'), '400');
equals(circle.getAttribute('cy'), '75');
// Radius is the minimum that fits in the new bounding box.
equals(circle.getAttribute('r'), '125');
tearDown();
});
test('Test remapElement(translate) for ellipse', function () {
expect(4);
setUp();
var ellipse = document.createElementNS(svgedit.NS.SVG, 'ellipse');
ellipse.setAttribute('cx', '200');
ellipse.setAttribute('cy', '150');
ellipse.setAttribute('rx', '125');
ellipse.setAttribute('ry', '75');
svg.appendChild(ellipse);
var attrs = {
cx: '200',
cy: '150',
rx: '125',
ry: '75'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(ellipse, attrs, m);
equals(ellipse.getAttribute('cx'), '300');
equals(ellipse.getAttribute('cy'), '100');
equals(ellipse.getAttribute('rx'), '125');
equals(ellipse.getAttribute('ry'), '75');
tearDown();
});
test('Test remapElement(scale) for ellipse', function () {
expect(4);
setUp();
var ellipse = document.createElementNS(svgedit.NS.SVG, 'ellipse');
ellipse.setAttribute('cx', '200');
ellipse.setAttribute('cy', '150');
ellipse.setAttribute('rx', '250');
ellipse.setAttribute('ry', '120');
svg.appendChild(ellipse);
var attrs = {
cx: '200',
cy: '150',
rx: '250',
ry: '120'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 2; m.b = 0;
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
svgedit.coords.remapElement(ellipse, attrs, m);
equals(ellipse.getAttribute('cx'), '400');
equals(ellipse.getAttribute('cy'), '75');
equals(ellipse.getAttribute('rx'), '500');
equals(ellipse.getAttribute('ry'), '60');
tearDown();
});
test('Test remapElement(translate) for line', function () {
expect(4);
setUp();
var line = document.createElementNS(svgedit.NS.SVG, 'line');
line.setAttribute('x1', '50');
line.setAttribute('y1', '100');
line.setAttribute('x2', '120');
line.setAttribute('y2', '200');
svg.appendChild(line);
var attrs = {
x1: '50',
y1: '100',
x2: '120',
y2: '200'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(line, attrs, m);
equals(line.getAttribute('x1'), '150');
equals(line.getAttribute('y1'), '50');
equals(line.getAttribute('x2'), '220');
equals(line.getAttribute('y2'), '150');
tearDown();
});
test('Test remapElement(scale) for line', function () {
expect(4);
setUp();
var line = document.createElementNS(svgedit.NS.SVG, 'line');
line.setAttribute('x1', '50');
line.setAttribute('y1', '100');
line.setAttribute('x2', '120');
line.setAttribute('y2', '200');
svg.appendChild(line);
var attrs = {
x1: '50',
y1: '100',
x2: '120',
y2: '200'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 2; m.b = 0;
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
svgedit.coords.remapElement(line, attrs, m);
equals(line.getAttribute('x1'), '100');
equals(line.getAttribute('y1'), '50');
equals(line.getAttribute('x2'), '240');
equals(line.getAttribute('y2'), '100');
tearDown();
});
test('Test remapElement(translate) for text', function () {
expect(2);
setUp();
var text = document.createElementNS(svgedit.NS.SVG, 'text');
text.setAttribute('x', '50');
text.setAttribute('y', '100');
svg.appendChild(text);
var attrs = {
x: '50',
y: '100'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(text, attrs, m);
equals(text.getAttribute('x'), '150');
equals(text.getAttribute('y'), '50');
tearDown();
});
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
var root = document.getElementById('root');
var svgroot = document.createElementNS(svgedit.NS.SVG, 'svg');
svgroot.id = 'svgroot';
root.appendChild(svgroot);
var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
svgroot.appendChild(svg);
var elemId = 1;
function setUp () {
// Mock out editor context.
svgedit.utilities.init({
getSVGRoot: function () { return svg; },
getDOMDocument: function () { return null; },
getDOMContainer: function () { return null; }
});
svgedit.coords.init({
getGridSnapping: function () { return false; },
getDrawing: function () {
return {
getNextId: function () { return '' + elemId++; }
};
}
});
}
function tearDown () {
while (svg.hasChildNodes()) {
svg.removeChild(svg.firstChild);
}
}
test('Test remapElement(translate) for rect', function () {
expect(4);
setUp();
var rect = document.createElementNS(svgedit.NS.SVG, 'rect');
rect.setAttribute('x', '200');
rect.setAttribute('y', '150');
rect.setAttribute('width', '250');
rect.setAttribute('height', '120');
svg.appendChild(rect);
var attrs = {
x: '200',
y: '150',
width: '125',
height: '75'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(rect, attrs, m);
equals(rect.getAttribute('x'), '300');
equals(rect.getAttribute('y'), '100');
equals(rect.getAttribute('width'), '125');
equals(rect.getAttribute('height'), '75');
tearDown();
});
test('Test remapElement(scale) for rect', function () {
expect(4);
setUp();
var rect = document.createElementNS(svgedit.NS.SVG, 'rect');
rect.setAttribute('width', '250');
rect.setAttribute('height', '120');
svg.appendChild(rect);
var attrs = {
x: '0',
y: '0',
width: '250',
height: '120'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 2; m.b = 0;
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
svgedit.coords.remapElement(rect, attrs, m);
equals(rect.getAttribute('x'), '0');
equals(rect.getAttribute('y'), '0');
equals(rect.getAttribute('width'), '500');
equals(rect.getAttribute('height'), '60');
tearDown();
});
test('Test remapElement(translate) for circle', function () {
expect(3);
setUp();
var circle = document.createElementNS(svgedit.NS.SVG, 'circle');
circle.setAttribute('cx', '200');
circle.setAttribute('cy', '150');
circle.setAttribute('r', '125');
svg.appendChild(circle);
var attrs = {
cx: '200',
cy: '150',
r: '125'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(circle, attrs, m);
equals(circle.getAttribute('cx'), '300');
equals(circle.getAttribute('cy'), '100');
equals(circle.getAttribute('r'), '125');
tearDown();
});
test('Test remapElement(scale) for circle', function () {
expect(3);
setUp();
var circle = document.createElementNS(svgedit.NS.SVG, 'circle');
circle.setAttribute('cx', '200');
circle.setAttribute('cy', '150');
circle.setAttribute('r', '250');
svg.appendChild(circle);
var attrs = {
cx: '200',
cy: '150',
r: '250'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 2; m.b = 0;
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
svgedit.coords.remapElement(circle, attrs, m);
equals(circle.getAttribute('cx'), '400');
equals(circle.getAttribute('cy'), '75');
// Radius is the minimum that fits in the new bounding box.
equals(circle.getAttribute('r'), '125');
tearDown();
});
test('Test remapElement(translate) for ellipse', function () {
expect(4);
setUp();
var ellipse = document.createElementNS(svgedit.NS.SVG, 'ellipse');
ellipse.setAttribute('cx', '200');
ellipse.setAttribute('cy', '150');
ellipse.setAttribute('rx', '125');
ellipse.setAttribute('ry', '75');
svg.appendChild(ellipse);
var attrs = {
cx: '200',
cy: '150',
rx: '125',
ry: '75'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(ellipse, attrs, m);
equals(ellipse.getAttribute('cx'), '300');
equals(ellipse.getAttribute('cy'), '100');
equals(ellipse.getAttribute('rx'), '125');
equals(ellipse.getAttribute('ry'), '75');
tearDown();
});
test('Test remapElement(scale) for ellipse', function () {
expect(4);
setUp();
var ellipse = document.createElementNS(svgedit.NS.SVG, 'ellipse');
ellipse.setAttribute('cx', '200');
ellipse.setAttribute('cy', '150');
ellipse.setAttribute('rx', '250');
ellipse.setAttribute('ry', '120');
svg.appendChild(ellipse);
var attrs = {
cx: '200',
cy: '150',
rx: '250',
ry: '120'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 2; m.b = 0;
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
svgedit.coords.remapElement(ellipse, attrs, m);
equals(ellipse.getAttribute('cx'), '400');
equals(ellipse.getAttribute('cy'), '75');
equals(ellipse.getAttribute('rx'), '500');
equals(ellipse.getAttribute('ry'), '60');
tearDown();
});
test('Test remapElement(translate) for line', function () {
expect(4);
setUp();
var line = document.createElementNS(svgedit.NS.SVG, 'line');
line.setAttribute('x1', '50');
line.setAttribute('y1', '100');
line.setAttribute('x2', '120');
line.setAttribute('y2', '200');
svg.appendChild(line);
var attrs = {
x1: '50',
y1: '100',
x2: '120',
y2: '200'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(line, attrs, m);
equals(line.getAttribute('x1'), '150');
equals(line.getAttribute('y1'), '50');
equals(line.getAttribute('x2'), '220');
equals(line.getAttribute('y2'), '150');
tearDown();
});
test('Test remapElement(scale) for line', function () {
expect(4);
setUp();
var line = document.createElementNS(svgedit.NS.SVG, 'line');
line.setAttribute('x1', '50');
line.setAttribute('y1', '100');
line.setAttribute('x2', '120');
line.setAttribute('y2', '200');
svg.appendChild(line);
var attrs = {
x1: '50',
y1: '100',
x2: '120',
y2: '200'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 2; m.b = 0;
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
svgedit.coords.remapElement(line, attrs, m);
equals(line.getAttribute('x1'), '100');
equals(line.getAttribute('y1'), '50');
equals(line.getAttribute('x2'), '240');
equals(line.getAttribute('y2'), '100');
tearDown();
});
test('Test remapElement(translate) for text', function () {
expect(2);
setUp();
var text = document.createElementNS(svgedit.NS.SVG, 'text');
text.setAttribute('x', '50');
text.setAttribute('y', '100');
svg.appendChild(text);
var attrs = {
x: '50',
y: '100'
};
// Create a translate.
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(text, attrs, m);
equals(text.getAttribute('x'), '150');
equals(text.getAttribute('y'), '50');
tearDown();
});
});

1402
test/draw_test.js
View File

File diff suppressed because it is too large Load Diff

986
test/history_test.js
View File

File diff suppressed because it is too large Load Diff

12
test/jquery-svg_test.js vendored
View File

@ -1,10 +1,10 @@
/* eslint-env qunit */
/* globals $ */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
});

196
test/math_test.js
View File

@ -2,121 +2,121 @@
/* globals $, svgedit, equals */
/* eslint-disable no-var */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
module('svgedit.math');
module('svgedit.math');
test('Test svgedit.math package', function () {
expect(7);
test('Test svgedit.math package', function () {
expect(7);
ok(svgedit.math);
ok(svgedit.math.transformPoint);
ok(svgedit.math.isIdentity);
ok(svgedit.math.matrixMultiply);
equals(typeof svgedit.math.transformPoint, typeof function () {});
equals(typeof svgedit.math.isIdentity, typeof function () {});
equals(typeof svgedit.math.matrixMultiply, typeof function () {});
});
ok(svgedit.math);
ok(svgedit.math.transformPoint);
ok(svgedit.math.isIdentity);
ok(svgedit.math.matrixMultiply);
equals(typeof svgedit.math.transformPoint, typeof function () {});
equals(typeof svgedit.math.isIdentity, typeof function () {});
equals(typeof svgedit.math.matrixMultiply, typeof function () {});
});
test('Test svgedit.math.transformPoint() function', function () {
expect(6);
var transformPoint = svgedit.math.transformPoint;
test('Test svgedit.math.transformPoint() function', function () {
expect(6);
var transformPoint = svgedit.math.transformPoint;
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 0; m.f = 0;
var pt = transformPoint(100, 200, m);
equals(pt.x, 100);
equals(pt.y, 200);
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 0; m.f = 0;
var pt = transformPoint(100, 200, m);
equals(pt.x, 100);
equals(pt.y, 200);
m.e = 300; m.f = 400;
pt = transformPoint(100, 200, m);
equals(pt.x, 400);
equals(pt.y, 600);
m.e = 300; m.f = 400;
pt = transformPoint(100, 200, m);
equals(pt.x, 400);
equals(pt.y, 600);
m.a = 0.5; m.b = 0.75;
m.c = 1.25; m.d = 2;
pt = transformPoint(100, 200, m);
equals(pt.x, 100 * m.a + 200 * m.c + m.e);
equals(pt.y, 100 * m.b + 200 * m.d + m.f);
});
m.a = 0.5; m.b = 0.75;
m.c = 1.25; m.d = 2;
pt = transformPoint(100, 200, m);
equals(pt.x, 100 * m.a + 200 * m.c + m.e);
equals(pt.y, 100 * m.b + 200 * m.d + m.f);
});
test('Test svgedit.math.isIdentity() function', function () {
expect(2);
test('Test svgedit.math.isIdentity() function', function () {
expect(2);
ok(svgedit.math.isIdentity(svg.createSVGMatrix()));
ok(svgedit.math.isIdentity(svg.createSVGMatrix()));
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 0; m.f = 0;
ok(svgedit.math.isIdentity(m));
});
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 0; m.f = 0;
ok(svgedit.math.isIdentity(m));
});
test('Test svgedit.math.matrixMultiply() function', function () {
expect(5);
var mult = svgedit.math.matrixMultiply;
var isIdentity = svgedit.math.isIdentity;
test('Test svgedit.math.matrixMultiply() function', function () {
expect(5);
var mult = svgedit.math.matrixMultiply;
var isIdentity = svgedit.math.isIdentity;
// translate there and back
var tr1 = svg.createSVGMatrix().translate(100, 50),
tr2 = svg.createSVGMatrix().translate(-90, 0),
tr3 = svg.createSVGMatrix().translate(-10, -50),
I = mult(tr1, tr2, tr3);
ok(isIdentity(I), 'Expected identity matrix when translating there and back');
// translate there and back
var tr1 = svg.createSVGMatrix().translate(100, 50),
tr2 = svg.createSVGMatrix().translate(-90, 0),
tr3 = svg.createSVGMatrix().translate(-10, -50),
I = mult(tr1, tr2, tr3);
ok(isIdentity(I), 'Expected identity matrix when translating there and back');
// rotate there and back
// TODO: currently Mozilla fails this when rotating back at -50 and then -40 degrees
// (b and c are *almost* zero, but not zero)
var rotThere = svg.createSVGMatrix().rotate(90),
rotBack = svg.createSVGMatrix().rotate(-90), // TODO: set this to -50
rotBackMore = svg.createSVGMatrix().rotate(0); // TODO: set this to -40
I = mult(rotThere, rotBack, rotBackMore);
ok(isIdentity(I), 'Expected identity matrix when rotating there and back');
// rotate there and back
// TODO: currently Mozilla fails this when rotating back at -50 and then -40 degrees
// (b and c are *almost* zero, but not zero)
var rotThere = svg.createSVGMatrix().rotate(90),
rotBack = svg.createSVGMatrix().rotate(-90), // TODO: set this to -50
rotBackMore = svg.createSVGMatrix().rotate(0); // TODO: set this to -40
I = mult(rotThere, rotBack, rotBackMore);
ok(isIdentity(I), 'Expected identity matrix when rotating there and back');
// scale up and down
var scaleUp = svg.createSVGMatrix().scale(4),
scaleDown = svg.createSVGMatrix().scaleNonUniform(0.25, 1),
scaleDownMore = svg.createSVGMatrix().scaleNonUniform(1, 0.25);
I = mult(scaleUp, scaleDown, scaleDownMore);
ok(isIdentity(I), 'Expected identity matrix when scaling up and down');
// scale up and down
var scaleUp = svg.createSVGMatrix().scale(4),
scaleDown = svg.createSVGMatrix().scaleNonUniform(0.25, 1),
scaleDownMore = svg.createSVGMatrix().scaleNonUniform(1, 0.25);
I = mult(scaleUp, scaleDown, scaleDownMore);
ok(isIdentity(I), 'Expected identity matrix when scaling up and down');
// test multiplication with its inverse
I = mult(rotThere, rotThere.inverse());
ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
I = mult(rotThere.inverse(), rotThere);
ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
});
// test multiplication with its inverse
I = mult(rotThere, rotThere.inverse());
ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
I = mult(rotThere.inverse(), rotThere);
ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
});
test('Test svgedit.math.transformBox() function', function () {
expect(12);
var transformBox = svgedit.math.transformBox;
test('Test svgedit.math.transformBox() function', function () {
expect(12);
var transformBox = svgedit.math.transformBox;
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 0; m.f = 0;
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 0; m.f = 0;
var r = transformBox(10, 10, 200, 300, m);
equals(r.tl.x, 10);
equals(r.tl.y, 10);
equals(r.tr.x, 210);
equals(r.tr.y, 10);
equals(r.bl.x, 10);
equals(r.bl.y, 310);
equals(r.br.x, 210);
equals(r.br.y, 310);
equals(r.aabox.x, 10);
equals(r.aabox.y, 10);
equals(r.aabox.width, 200);
equals(r.aabox.height, 300);
});
var r = transformBox(10, 10, 200, 300, m);
equals(r.tl.x, 10);
equals(r.tl.y, 10);
equals(r.tr.x, 210);
equals(r.tr.y, 10);
equals(r.bl.x, 10);
equals(r.bl.y, 310);
equals(r.br.x, 210);
equals(r.br.y, 310);
equals(r.aabox.x, 10);
equals(r.aabox.y, 10);
equals(r.aabox.width, 200);
equals(r.aabox.height, 300);
});
});

226
test/path_test.js
View File

@ -2,139 +2,139 @@
/* globals $, svgedit, equals */
/* eslint-disable no-var */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
test('Test svgedit.path.replacePathSeg', function () {
expect(6);
test('Test svgedit.path.replacePathSeg', function () {
expect(6);
var path = document.createElementNS(svgedit.NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
svgedit.path.init();
svgedit.path.Path(path);
var path = document.createElementNS(svgedit.NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
svgedit.path.init();
svgedit.path.Path(path);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
equals(path.pathSegList.getItem(1).x, 10);
equals(path.pathSegList.getItem(1).y, 11);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
equals(path.pathSegList.getItem(1).x, 10);
equals(path.pathSegList.getItem(1).y, 11);
svgedit.path.replacePathSeg(SVGPathSeg.PATHSEG_LINETO_REL, 1, [30, 31], path);
svgedit.path.replacePathSeg(SVGPathSeg.PATHSEG_LINETO_REL, 1, [30, 31], path);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l');
equals(path.pathSegList.getItem(1).x, 30);
equals(path.pathSegList.getItem(1).y, 31);
});
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l');
equals(path.pathSegList.getItem(1).x, 30);
equals(path.pathSegList.getItem(1).y, 31);
});
test('Test svgedit.path.Segment.setType simple', function () {
expect(9);
test('Test svgedit.path.Segment.setType simple', function () {
expect(9);
var path = document.createElementNS(svgedit.NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
svgedit.path.init();
svgedit.path.Path(path);
var path = document.createElementNS(svgedit.NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
svgedit.path.init();
svgedit.path.Path(path);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
equals(path.pathSegList.getItem(1).x, 10);
equals(path.pathSegList.getItem(1).y, 11);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
equals(path.pathSegList.getItem(1).x, 10);
equals(path.pathSegList.getItem(1).y, 11);
var segment = new svgedit.path.Segment(1, path.pathSegList.getItem(1));
segment.setType(SVGPathSeg.PATHSEG_LINETO_REL, [30, 31]);
equals(segment.item.pathSegTypeAsLetter, 'l');
equals(segment.item.x, 30);
equals(segment.item.y, 31);
var segment = new svgedit.path.Segment(1, path.pathSegList.getItem(1));
segment.setType(SVGPathSeg.PATHSEG_LINETO_REL, [30, 31]);
equals(segment.item.pathSegTypeAsLetter, 'l');
equals(segment.item.x, 30);
equals(segment.item.y, 31);
// Also verify that the actual path changed.
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l');
equals(path.pathSegList.getItem(1).x, 30);
equals(path.pathSegList.getItem(1).y, 31);
});
// Also verify that the actual path changed.
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l');
equals(path.pathSegList.getItem(1).x, 30);
equals(path.pathSegList.getItem(1).y, 31);
});
test('Test svgedit.path.Segment.setType with control points', function () {
expect(14);
test('Test svgedit.path.Segment.setType with control points', function () {
expect(14);
// Setup the dom for a mock control group.
var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
var path = document.createElementNS(svgedit.NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z');
svg.appendChild(path);
var selectorParentGroup = document.createElementNS(svgedit.NS.SVG, 'g');
selectorParentGroup.setAttribute('id', 'selectorParentGroup');
svg.appendChild(selectorParentGroup);
var mockContext = {
getDOMDocument: function () { return svg; },
getDOMContainer: function () { return svg; },
getSVGRoot: function () { return svg; },
getCurrentZoom: function () { return 1; }
};
svgedit.path.init(mockContext);
svgedit.utilities.init(mockContext);
var segment = new svgedit.path.Segment(1, path.pathSegList.getItem(1));
segment.path = new svgedit.path.Path(path);
// Setup the dom for a mock control group.
var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
var path = document.createElementNS(svgedit.NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z');
svg.appendChild(path);
var selectorParentGroup = document.createElementNS(svgedit.NS.SVG, 'g');
selectorParentGroup.setAttribute('id', 'selectorParentGroup');
svg.appendChild(selectorParentGroup);
var mockContext = {
getDOMDocument: function () { return svg; },
getDOMContainer: function () { return svg; },
getSVGRoot: function () { return svg; },
getCurrentZoom: function () { return 1; }
};
svgedit.path.init(mockContext);
svgedit.utilities.init(mockContext);
var segment = new svgedit.path.Segment(1, path.pathSegList.getItem(1));
segment.path = new svgedit.path.Path(path);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
equals(path.pathSegList.getItem(1).x1, 11);
equals(path.pathSegList.getItem(1).y1, 12);
equals(path.pathSegList.getItem(1).x2, 13);
equals(path.pathSegList.getItem(1).y2, 14);
equals(path.pathSegList.getItem(1).x, 15);
equals(path.pathSegList.getItem(1).y, 16);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
equals(path.pathSegList.getItem(1).x1, 11);
equals(path.pathSegList.getItem(1).y1, 12);
equals(path.pathSegList.getItem(1).x2, 13);
equals(path.pathSegList.getItem(1).y2, 14);
equals(path.pathSegList.getItem(1).x, 15);
equals(path.pathSegList.getItem(1).y, 16);
segment.setType(SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, [30, 31, 32, 33, 34, 35]);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'c');
equals(path.pathSegList.getItem(1).x1, 32);
equals(path.pathSegList.getItem(1).y1, 33);
equals(path.pathSegList.getItem(1).x2, 34);
equals(path.pathSegList.getItem(1).y2, 35);
equals(path.pathSegList.getItem(1).x, 30);
equals(path.pathSegList.getItem(1).y, 31);
});
segment.setType(SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, [30, 31, 32, 33, 34, 35]);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'c');
equals(path.pathSegList.getItem(1).x1, 32);
equals(path.pathSegList.getItem(1).y1, 33);
equals(path.pathSegList.getItem(1).x2, 34);
equals(path.pathSegList.getItem(1).y2, 35);
equals(path.pathSegList.getItem(1).x, 30);
equals(path.pathSegList.getItem(1).y, 31);
});
test('Test svgedit.path.Segment.move', function () {
expect(6);
test('Test svgedit.path.Segment.move', function () {
expect(6);
var path = document.createElementNS(svgedit.NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
svgedit.path.init();
svgedit.path.Path(path);
var path = document.createElementNS(svgedit.NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
svgedit.path.init();
svgedit.path.Path(path);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
equals(path.pathSegList.getItem(1).x, 10);
equals(path.pathSegList.getItem(1).y, 11);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
equals(path.pathSegList.getItem(1).x, 10);
equals(path.pathSegList.getItem(1).y, 11);
var segment = new svgedit.path.Segment(1, path.pathSegList.getItem(1));
segment.move(-3, 4);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
equals(path.pathSegList.getItem(1).x, 7);
equals(path.pathSegList.getItem(1).y, 15);
});
var segment = new svgedit.path.Segment(1, path.pathSegList.getItem(1));
segment.move(-3, 4);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
equals(path.pathSegList.getItem(1).x, 7);
equals(path.pathSegList.getItem(1).y, 15);
});
test('Test svgedit.path.Segment.moveCtrl', function () {
expect(14);
test('Test svgedit.path.Segment.moveCtrl', function () {
expect(14);
var path = document.createElementNS(svgedit.NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z');
svgedit.path.init();
svgedit.path.Path(path);
var path = document.createElementNS(svgedit.NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z');
svgedit.path.init();
svgedit.path.Path(path);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
equals(path.pathSegList.getItem(1).x1, 11);
equals(path.pathSegList.getItem(1).y1, 12);
equals(path.pathSegList.getItem(1).x2, 13);
equals(path.pathSegList.getItem(1).y2, 14);
equals(path.pathSegList.getItem(1).x, 15);
equals(path.pathSegList.getItem(1).y, 16);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
equals(path.pathSegList.getItem(1).x1, 11);
equals(path.pathSegList.getItem(1).y1, 12);
equals(path.pathSegList.getItem(1).x2, 13);
equals(path.pathSegList.getItem(1).y2, 14);
equals(path.pathSegList.getItem(1).x, 15);
equals(path.pathSegList.getItem(1).y, 16);
var segment = new svgedit.path.Segment(1, path.pathSegList.getItem(1));
segment.moveCtrl(1, 100, -200);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
equals(path.pathSegList.getItem(1).x1, 111);
equals(path.pathSegList.getItem(1).y1, -188);
equals(path.pathSegList.getItem(1).x2, 13);
equals(path.pathSegList.getItem(1).y2, 14);
equals(path.pathSegList.getItem(1).x, 15);
equals(path.pathSegList.getItem(1).y, 16);
});
var segment = new svgedit.path.Segment(1, path.pathSegList.getItem(1));
segment.moveCtrl(1, 100, -200);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
equals(path.pathSegList.getItem(1).x1, 111);
equals(path.pathSegList.getItem(1).y1, -188);
equals(path.pathSegList.getItem(1).x2, 13);
equals(path.pathSegList.getItem(1).y2, 14);
equals(path.pathSegList.getItem(1).x, 15);
equals(path.pathSegList.getItem(1).y, 16);
});
});

204
test/recalculate_test.js
View File

@ -2,129 +2,129 @@
/* globals $, svgedit */
/* eslint-disable no-var */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
var root = document.getElementById('root');
var svgroot = document.createElementNS(svgedit.NS.SVG, 'svg');
svgroot.id = 'svgroot';
root.appendChild(svgroot);
var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
svgroot.appendChild(svg);
var elemId = 1;
var elem;
var root = document.getElementById('root');
var svgroot = document.createElementNS(svgedit.NS.SVG, 'svg');
svgroot.id = 'svgroot';
root.appendChild(svgroot);
var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
svgroot.appendChild(svg);
var elemId = 1;
var elem;
function setUp () {
svgedit.utilities.init({
getSVGRoot: function () { return svg; },
getDOMDocument: function () { return null; },
getDOMContainer: function () { return null; }
});
svgedit.coords.init({
getGridSnapping: function () { return false; },
getDrawing: function () {
return {
getNextId: function () { return '' + elemId++; }
};
}
});
svgedit.recalculate.init({
getSVGRoot: function () { return svg; },
getStartTransform: function () { return ''; },
setStartTransform: function () {}
});
}
function setUp () {
svgedit.utilities.init({
getSVGRoot: function () { return svg; },
getDOMDocument: function () { return null; },
getDOMContainer: function () { return null; }
});
svgedit.coords.init({
getGridSnapping: function () { return false; },
getDrawing: function () {
return {
getNextId: function () { return '' + elemId++; }
};
}
});
svgedit.recalculate.init({
getSVGRoot: function () { return svg; },
getStartTransform: function () { return ''; },
setStartTransform: function () {}
});
}
function setUpRect () {
setUp();
elem = document.createElementNS(svgedit.NS.SVG, 'rect');
elem.setAttribute('x', '200');
elem.setAttribute('y', '150');
elem.setAttribute('width', '250');
elem.setAttribute('height', '120');
svg.appendChild(elem);
}
function setUpRect () {
setUp();
elem = document.createElementNS(svgedit.NS.SVG, 'rect');
elem.setAttribute('x', '200');
elem.setAttribute('y', '150');
elem.setAttribute('width', '250');
elem.setAttribute('height', '120');
svg.appendChild(elem);
}
function setUpTextWithTspan () {
setUp();
elem = document.createElementNS(svgedit.NS.SVG, 'text');
elem.setAttribute('x', '200');
elem.setAttribute('y', '150');
function setUpTextWithTspan () {
setUp();
elem = document.createElementNS(svgedit.NS.SVG, 'text');
elem.setAttribute('x', '200');
elem.setAttribute('y', '150');
var tspan = document.createElementNS(svgedit.NS.SVG, 'tspan');
tspan.setAttribute('x', '200');
tspan.setAttribute('y', '150');
var tspan = document.createElementNS(svgedit.NS.SVG, 'tspan');
tspan.setAttribute('x', '200');
tspan.setAttribute('y', '150');
var theText = document.createTextNode('Foo bar');
tspan.appendChild(theText);
elem.appendChild(tspan);
svg.appendChild(elem);
}
var theText = document.createTextNode('Foo bar');
tspan.appendChild(theText);
elem.appendChild(tspan);
svg.appendChild(elem);
}
function tearDown () {
while (svg.hasChildNodes()) {
svg.removeChild(svg.firstChild);
}
}
function tearDown () {
while (svg.hasChildNodes()) {
svg.removeChild(svg.firstChild);
}
}
test('Test recalculateDimensions() on rect with identity matrix', function () {
expect(1);
test('Test recalculateDimensions() on rect with identity matrix', function () {
expect(1);
setUpRect();
elem.setAttribute('transform', 'matrix(1,0,0,1,0,0)');
setUpRect();
elem.setAttribute('transform', 'matrix(1,0,0,1,0,0)');
svgedit.recalculate.recalculateDimensions(elem);
svgedit.recalculate.recalculateDimensions(elem);
// Ensure that the identity matrix is swallowed and the element has no
// transform on it.
equal(false, elem.hasAttribute('transform'));
// Ensure that the identity matrix is swallowed and the element has no
// transform on it.
equal(false, elem.hasAttribute('transform'));
tearDown();
});
tearDown();
});
test('Test recalculateDimensions() on rect with simple translate', function () {
expect(5);
test('Test recalculateDimensions() on rect with simple translate', function () {
expect(5);
setUpRect();
elem.setAttribute('transform', 'translate(100,50)');
setUpRect();
elem.setAttribute('transform', 'translate(100,50)');
svgedit.recalculate.recalculateDimensions(elem);
svgedit.recalculate.recalculateDimensions(elem);
equal(false, elem.hasAttribute('transform'));
equal('300', elem.getAttribute('x'));
equal('200', elem.getAttribute('y'));
equal('250', elem.getAttribute('width'));
equal('120', elem.getAttribute('height'));
tearDown();
});
equal(false, elem.hasAttribute('transform'));
equal('300', elem.getAttribute('x'));
equal('200', elem.getAttribute('y'));
equal('250', elem.getAttribute('width'));
equal('120', elem.getAttribute('height'));
tearDown();
});
test('Test recalculateDimensions() on text w/tspan with simple translate', function () {
expect(5);
test('Test recalculateDimensions() on text w/tspan with simple translate', function () {
expect(5);
setUpTextWithTspan();
elem.setAttribute('transform', 'translate(100,50)');
setUpTextWithTspan();
elem.setAttribute('transform', 'translate(100,50)');
svgedit.recalculate.recalculateDimensions(elem);
svgedit.recalculate.recalculateDimensions(elem);
// Ensure that the identity matrix is swallowed and the element has no
// transform on it.
equal(false, elem.hasAttribute('transform'));
equal('300', elem.getAttribute('x'));
equal('200', elem.getAttribute('y'));
// Ensure that the identity matrix is swallowed and the element has no
// transform on it.
equal(false, elem.hasAttribute('transform'));
equal('300', elem.getAttribute('x'));
equal('200', elem.getAttribute('y'));
var tspan = elem.firstElementChild;
equal('300', tspan.getAttribute('x'));
equal('200', tspan.getAttribute('y'));
var tspan = elem.firstElementChild;
equal('300', tspan.getAttribute('x'));
equal('200', tspan.getAttribute('y'));
tearDown();
});
tearDown();
});
// TODO: Since recalculateDimensions() and surrounding code is
// probably the largest, most complicated and strange piece of
// code in SVG-edit, we need to write a whole lot of unit tests
// for it here.
// TODO: Since recalculateDimensions() and surrounding code is
// probably the largest, most complicated and strange piece of
// code in SVG-edit, we need to write a whole lot of unit tests
// for it here.
});

34
test/sanitize_test.js
View File

@ -2,25 +2,25 @@
/* globals $, svgedit, equals */
/* eslint-disable no-var */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
test('Test sanitizeSvg() strips ws from style attr', function () {
expect(2);
test('Test sanitizeSvg() strips ws from style attr', function () {
expect(2);
var rect = document.createElementNS(svgedit.NS.SVG, 'rect');
rect.setAttribute('style', 'stroke: blue ; stroke-width : 40;');
// sanitizeSvg() requires the node to have a parent and a document.
svg.appendChild(rect);
svgedit.sanitize.sanitizeSvg(rect);
var rect = document.createElementNS(svgedit.NS.SVG, 'rect');
rect.setAttribute('style', 'stroke: blue ; stroke-width : 40;');
// sanitizeSvg() requires the node to have a parent and a document.
svg.appendChild(rect);
svgedit.sanitize.sanitizeSvg(rect);
equals(rect.getAttribute('stroke'), 'blue');
equals(rect.getAttribute('stroke-width'), '40');
});
equals(rect.getAttribute('stroke'), 'blue');
equals(rect.getAttribute('stroke-width'), '40');
});
});

218
test/select_test.js
View File

@ -2,131 +2,131 @@
/* globals $, svgedit, equals */
/* eslint-disable no-var */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
module('svgedit.select');
module('svgedit.select');
var sandbox = document.getElementById('sandbox');
var svgroot;
var svgcontent;
var mockConfig = {
dimensions: [640, 480]
};
var mockFactory = {
createSVGElement: function (jsonMap) {
var elem = document.createElementNS(svgedit.NS.SVG, jsonMap['element']);
for (var attr in jsonMap['attr']) {
elem.setAttribute(attr, jsonMap['attr'][attr]);
}
return elem;
},
svgRoot: function () { return svgroot; },
svgContent: function () { return svgcontent; }
};
var sandbox = document.getElementById('sandbox');
var svgroot;
var svgcontent;
var mockConfig = {
dimensions: [640, 480]
};
var mockFactory = {
createSVGElement: function (jsonMap) {
var elem = document.createElementNS(svgedit.NS.SVG, jsonMap['element']);
for (var attr in jsonMap['attr']) {
elem.setAttribute(attr, jsonMap['attr'][attr]);
}
return elem;
},
svgRoot: function () { return svgroot; },
svgContent: function () { return svgcontent; }
};
function setUp () {
svgroot = mockFactory.createSVGElement({
'element': 'svg',
'attr': {'id': 'svgroot'}
});
svgcontent = svgroot.appendChild(
mockFactory.createSVGElement({
'element': 'svg',
'attr': {'id': 'svgcontent'}
})
);
/* var rect = */ svgcontent.appendChild(
mockFactory.createSVGElement({
'element': 'rect',
'attr': {
'id': 'rect',
'x': '50',
'y': '75',
'width': '200',
'height': '100'
}
})
);
sandbox.appendChild(svgroot);
}
function setUp () {
svgroot = mockFactory.createSVGElement({
'element': 'svg',
'attr': {'id': 'svgroot'}
});
svgcontent = svgroot.appendChild(
mockFactory.createSVGElement({
'element': 'svg',
'attr': {'id': 'svgcontent'}
})
);
/* var rect = */ svgcontent.appendChild(
mockFactory.createSVGElement({
'element': 'rect',
'attr': {
'id': 'rect',
'x': '50',
'y': '75',
'width': '200',
'height': '100'
}
})
);
sandbox.appendChild(svgroot);
}
/*
function setUpWithInit () {
setUp();
svgedit.select.init(mockConfig, mockFactory);
}
*/
/*
function setUpWithInit () {
setUp();
svgedit.select.init(mockConfig, mockFactory);
}
*/
function tearDown () {
while (sandbox.hasChildNodes()) {
sandbox.removeChild(sandbox.firstChild);
}
}
function tearDown () {
while (sandbox.hasChildNodes()) {
sandbox.removeChild(sandbox.firstChild);
}
}
test('Test svgedit.select package', function () {
expect(10);
test('Test svgedit.select package', function () {
expect(10);
ok(svgedit.select);
ok(svgedit.select.Selector);
ok(svgedit.select.SelectorManager);
ok(svgedit.select.init);
ok(svgedit.select.getSelectorManager);
equals(typeof svgedit.select, typeof {});
equals(typeof svgedit.select.Selector, typeof function () {});
equals(typeof svgedit.select.SelectorManager, typeof function () {});
equals(typeof svgedit.select.init, typeof function () {});
equals(typeof svgedit.select.getSelectorManager, typeof function () {});
});
ok(svgedit.select);
ok(svgedit.select.Selector);
ok(svgedit.select.SelectorManager);
ok(svgedit.select.init);
ok(svgedit.select.getSelectorManager);
equals(typeof svgedit.select, typeof {});
equals(typeof svgedit.select.Selector, typeof function () {});
equals(typeof svgedit.select.SelectorManager, typeof function () {});
equals(typeof svgedit.select.init, typeof function () {});
equals(typeof svgedit.select.getSelectorManager, typeof function () {});
});
test('Test Selector DOM structure', function () {
expect(24);
test('Test Selector DOM structure', function () {
expect(24);
setUp();
setUp();
ok(svgroot);
ok(svgroot.hasChildNodes());
ok(svgroot);
ok(svgroot.hasChildNodes());
// Verify non-existence of Selector DOM nodes
equals(svgroot.childNodes.length, 1);
equals(svgroot.childNodes.item(0), svgcontent);
ok(!svgroot.querySelector('#selectorParentGroup'));
// Verify non-existence of Selector DOM nodes
equals(svgroot.childNodes.length, 1);
equals(svgroot.childNodes.item(0), svgcontent);
ok(!svgroot.querySelector('#selectorParentGroup'));
svgedit.select.init(mockConfig, mockFactory);
svgedit.select.init(mockConfig, mockFactory);
equals(svgroot.childNodes.length, 3);
equals(svgroot.childNodes.length, 3);
// Verify existence of canvas background.
var cb = svgroot.childNodes.item(0);
ok(cb);
equals(cb.id, 'canvasBackground');
// Verify existence of canvas background.
var cb = svgroot.childNodes.item(0);
ok(cb);
equals(cb.id, 'canvasBackground');
ok(svgroot.childNodes.item(1));
equals(svgroot.childNodes.item(1), svgcontent);
ok(svgroot.childNodes.item(1));
equals(svgroot.childNodes.item(1), svgcontent);
// Verify existence of selectorParentGroup.
var spg = svgroot.childNodes.item(2);
ok(spg);
equals(svgroot.querySelector('#selectorParentGroup'), spg);
equals(spg.id, 'selectorParentGroup');
equals(spg.tagName, 'g');
// Verify existence of selectorParentGroup.
var spg = svgroot.childNodes.item(2);
ok(spg);
equals(svgroot.querySelector('#selectorParentGroup'), spg);
equals(spg.id, 'selectorParentGroup');
equals(spg.tagName, 'g');
// Verify existence of all grip elements.
ok(spg.querySelector('#selectorGrip_resize_nw'));
ok(spg.querySelector('#selectorGrip_resize_n'));
ok(spg.querySelector('#selectorGrip_resize_ne'));
ok(spg.querySelector('#selectorGrip_resize_e'));
ok(spg.querySelector('#selectorGrip_resize_se'));
ok(spg.querySelector('#selectorGrip_resize_s'));
ok(spg.querySelector('#selectorGrip_resize_sw'));
ok(spg.querySelector('#selectorGrip_resize_w'));
ok(spg.querySelector('#selectorGrip_rotateconnector'));
ok(spg.querySelector('#selectorGrip_rotate'));
// Verify existence of all grip elements.
ok(spg.querySelector('#selectorGrip_resize_nw'));
ok(spg.querySelector('#selectorGrip_resize_n'));
ok(spg.querySelector('#selectorGrip_resize_ne'));
ok(spg.querySelector('#selectorGrip_resize_e'));
ok(spg.querySelector('#selectorGrip_resize_se'));
ok(spg.querySelector('#selectorGrip_resize_s'));
ok(spg.querySelector('#selectorGrip_resize_sw'));
ok(spg.querySelector('#selectorGrip_resize_w'));
ok(spg.querySelector('#selectorGrip_rotateconnector'));
ok(spg.querySelector('#selectorGrip_rotate'));
tearDown();
});
tearDown();
});
});

770
test/svgtransformlist_test.js
View File

@ -2,390 +2,390 @@
/* globals $, svgedit, equals */
/* eslint-disable no-var */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
var NS = svgedit.NS;
var svgroot = document.getElementById('svgroot');
var svgcontent, rect, circle;
var NEAR_ZERO = 5e-6; // 0.000005, Firefox fails at higher levels of precision.
function almostEquals (a, b, msg) {
msg = msg || (a + ' did not equal ' + b);
ok(Math.abs(a - b) < NEAR_ZERO, msg);
}
function checkOutOfBoundsException (obj, fn, arg1) {
var caughtException = false;
try {
obj[fn](arg1);
} catch (e) {
if (e.code === 1) {
caughtException = true;
}
}
ok(caughtException, 'Caugh an INDEX_SIZE_ERR exception');
}
function setUp () {
svgcontent = svgroot.appendChild(document.createElementNS(NS.SVG, 'svg'));
rect = svgcontent.appendChild(document.createElementNS(NS.SVG, 'rect'));
rect.id = 'r';
circle = svgcontent.appendChild(document.createElementNS(NS.SVG, 'circle'));
circle.id = 'c';
}
function tearDown () {
svgedit.transformlist.resetListMap();
while (svgroot.hasChildNodes()) {
svgroot.removeChild(svgroot.firstChild);
}
}
module('svgedit.svgtransformlist');
test('Test svgedit.transformlist package', function () {
expect(2);
ok(svgedit.transformlist);
ok(svgedit.transformlist.getTransformList);
});
test('Test svgedit.transformlist.getTransformList() function', function () {
expect(4);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
var cxform = svgedit.transformlist.getTransformList(circle);
ok(rxform);
ok(cxform);
equals(typeof rxform, typeof {});
equals(typeof cxform, typeof {});
tearDown();
});
test('Test SVGTransformList.numberOfItems property', function () {
expect(2);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
equals(typeof rxform.numberOfItems, typeof 0);
equals(rxform.numberOfItems, 0);
tearDown();
});
test('Test SVGTransformList.initialize()', function () {
expect(6);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
var cxform = svgedit.transformlist.getTransformList(circle);
var t = svgcontent.createSVGTransform();
ok(t);
ok(rxform.initialize);
equals(typeof rxform.initialize, typeof function () {});
rxform.initialize(t);
equals(rxform.numberOfItems, 1);
equals(cxform.numberOfItems, 0);
// If a transform was already in a transform list, this should
// remove it from its old list and add it to this list.
cxform.initialize(t);
// This also fails in Firefox native.
// equals(rxform.numberOfItems, 0, 'Did not remove transform from list before initializing another transformlist');
equals(cxform.numberOfItems, 1);
tearDown();
});
test('Test SVGTransformList.appendItem() and getItem()', function () {
expect(12);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
var cxform = svgedit.transformlist.getTransformList(circle);
var t1 = svgcontent.createSVGTransform(),
t2 = svgcontent.createSVGTransform(),
t3 = svgcontent.createSVGTransform();
ok(rxform.appendItem);
ok(rxform.getItem);
equals(typeof rxform.appendItem, typeof function () {});
equals(typeof rxform.getItem, typeof function () {});
rxform.appendItem(t1);
rxform.appendItem(t2);
rxform.appendItem(t3);
equals(rxform.numberOfItems, 3);
var rxf = rxform.getItem(0);
equals(rxf, t1);
equals(rxform.getItem(1), t2);
equals(rxform.getItem(2), t3);
checkOutOfBoundsException(rxform, 'getItem', -1);
checkOutOfBoundsException(rxform, 'getItem', 3);
cxform.appendItem(t1);
// These also fail in Firefox native.
// equals(rxform.numberOfItems, 2, 'Did not remove a transform from a list before appending it to a new transformlist');
// equals(rxform.getItem(0), t2, 'Found the wrong transform in a transformlist');
// equals(rxform.getItem(1), t3, 'Found the wrong transform in a transformlist');
equals(cxform.numberOfItems, 1);
equals(cxform.getItem(0), t1);
tearDown();
});
test('Test SVGTransformList.removeItem()', function () {
expect(7);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
var t1 = svgcontent.createSVGTransform(),
t2 = svgcontent.createSVGTransform();
ok(rxform.removeItem);
equals(typeof rxform.removeItem, typeof function () {});
rxform.appendItem(t1);
rxform.appendItem(t2);
var removedTransform = rxform.removeItem(0);
equals(rxform.numberOfItems, 1);
equals(removedTransform, t1);
equals(rxform.getItem(0), t2);
checkOutOfBoundsException(rxform, 'removeItem', -1);
checkOutOfBoundsException(rxform, 'removeItem', 1);
tearDown();
});
test('Test SVGTransformList.replaceItem()', function () {
expect(8);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
var cxform = svgedit.transformlist.getTransformList(circle);
ok(rxform.replaceItem);
equals(typeof rxform.replaceItem, typeof function () {});
var t1 = svgcontent.createSVGTransform(),
t2 = svgcontent.createSVGTransform(),
t3 = svgcontent.createSVGTransform();
rxform.appendItem(t1);
rxform.appendItem(t2);
cxform.appendItem(t3);
var newItem = rxform.replaceItem(t3, 0);
equals(rxform.numberOfItems, 2);
equals(newItem, t3);
equals(rxform.getItem(0), t3);
equals(rxform.getItem(1), t2);
// Fails in Firefox native
// equals(cxform.numberOfItems, 0);
// test replaceItem within a list
rxform.appendItem(t1);
rxform.replaceItem(t1, 0);
// Fails in Firefox native
// equals(rxform.numberOfItems, 2);
equals(rxform.getItem(0), t1);
equals(rxform.getItem(1), t2);
tearDown();
});
test('Test SVGTransformList.insertItemBefore()', function () {
expect(10);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
var cxform = svgedit.transformlist.getTransformList(circle);
ok(rxform.insertItemBefore);
equals(typeof rxform.insertItemBefore, typeof function () {});
var t1 = svgcontent.createSVGTransform(),
t2 = svgcontent.createSVGTransform(),
t3 = svgcontent.createSVGTransform();
rxform.appendItem(t1);
rxform.appendItem(t2);
cxform.appendItem(t3);
var newItem = rxform.insertItemBefore(t3, 0);
equals(rxform.numberOfItems, 3);
equals(newItem, t3);
equals(rxform.getItem(0), t3);
equals(rxform.getItem(1), t1);
equals(rxform.getItem(2), t2);
// Fails in Firefox native
// equals(cxform.numberOfItems, 0);
rxform.insertItemBefore(t2, 1);
// Fails in Firefox native (they make copies of the transforms)
// equals(rxform.numberOfItems, 3);
equals(rxform.getItem(0), t3);
equals(rxform.getItem(1), t2);
equals(rxform.getItem(2), t1);
tearDown();
});
test('Test SVGTransformList.init() for translate(200,100)', function () {
expect(8);
setUp();
rect.setAttribute('transform', 'translate(200,100)');
var rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
var translate = rxform.getItem(0);
equals(translate.type, 2);
var m = translate.matrix;
equals(m.a, 1);
equals(m.b, 0);
equals(m.c, 0);
equals(m.d, 1);
equals(m.e, 200);
equals(m.f, 100);
tearDown();
});
test('Test SVGTransformList.init() for scale(4)', function () {
expect(8);
setUp();
rect.setAttribute('transform', 'scale(4)');
var rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
var scale = rxform.getItem(0);
equals(3, scale.type);
var m = scale.matrix;
equals(m.a, 4);
equals(m.b, 0);
equals(m.c, 0);
equals(m.d, 4);
equals(m.e, 0);
equals(m.f, 0);
tearDown();
});
test('Test SVGTransformList.init() for scale(4,3)', function () {
expect(8);
setUp();
rect.setAttribute('transform', 'scale(4,3)');
var rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
var scale = rxform.getItem(0);
equals(3, scale.type);
var m = scale.matrix;
equals(m.a, 4);
equals(m.b, 0);
equals(m.c, 0);
equals(m.d, 3);
equals(m.e, 0);
equals(m.f, 0);
tearDown();
});
test('Test SVGTransformList.init() for rotate(45)', function () {
expect(9);
setUp();
rect.setAttribute('transform', 'rotate(45)');
var rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
var rotate = rxform.getItem(0);
equals(4, rotate.type);
equals(45, rotate.angle);
var m = rotate.matrix;
almostEquals(m.a, 1 / Math.sqrt(2));
almostEquals(m.b, 1 / Math.sqrt(2));
almostEquals(m.c, -1 / Math.sqrt(2));
almostEquals(m.d, 1 / Math.sqrt(2));
equals(m.e, 0);
equals(m.f, 0);
tearDown();
});
test('Test SVGTransformList.init() for rotate(45, 100, 200)', function () {
expect(9);
setUp();
rect.setAttribute('transform', 'rotate(45, 100, 200)');
var rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
var rotate = rxform.getItem(0);
equals(4, rotate.type);
equals(45, rotate.angle);
var m = rotate.matrix;
almostEquals(m.a, 1 / Math.sqrt(2));
almostEquals(m.b, 1 / Math.sqrt(2));
almostEquals(m.c, -1 / Math.sqrt(2));
almostEquals(m.d, 1 / Math.sqrt(2));
var r = svgcontent.createSVGMatrix();
r.a = 1 / Math.sqrt(2); r.b = 1 / Math.sqrt(2);
r.c = -1 / Math.sqrt(2); r.d = 1 / Math.sqrt(2);
var t = svgcontent.createSVGMatrix();
t.e = -100; t.f = -200;
var t_ = svgcontent.createSVGMatrix();
t_.e = 100; t_.f = 200;
var result = t_.multiply(r).multiply(t);
almostEquals(m.e, result.e);
almostEquals(m.f, result.f);
tearDown();
});
test('Test SVGTransformList.init() for matrix(1, 2, 3, 4, 5, 6)', function () {
expect(8);
setUp();
rect.setAttribute('transform', 'matrix(1,2,3,4,5,6)');
var rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
var mt = rxform.getItem(0);
equals(1, mt.type);
var m = mt.matrix;
equals(m.a, 1);
equals(m.b, 2);
equals(m.c, 3);
equals(m.d, 4);
equals(m.e, 5);
equals(m.f, 6);
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
var NS = svgedit.NS;
var svgroot = document.getElementById('svgroot');
var svgcontent, rect, circle;
var NEAR_ZERO = 5e-6; // 0.000005, Firefox fails at higher levels of precision.
function almostEquals (a, b, msg) {
msg = msg || (a + ' did not equal ' + b);
ok(Math.abs(a - b) < NEAR_ZERO, msg);
}
function checkOutOfBoundsException (obj, fn, arg1) {
var caughtException = false;
try {
obj[fn](arg1);
} catch (e) {
if (e.code === 1) {
caughtException = true;
}
}
ok(caughtException, 'Caugh an INDEX_SIZE_ERR exception');
}
function setUp () {
svgcontent = svgroot.appendChild(document.createElementNS(NS.SVG, 'svg'));
rect = svgcontent.appendChild(document.createElementNS(NS.SVG, 'rect'));
rect.id = 'r';
circle = svgcontent.appendChild(document.createElementNS(NS.SVG, 'circle'));
circle.id = 'c';
}
function tearDown () {
svgedit.transformlist.resetListMap();
while (svgroot.hasChildNodes()) {
svgroot.removeChild(svgroot.firstChild);
}
}
module('svgedit.svgtransformlist');
test('Test svgedit.transformlist package', function () {
expect(2);
ok(svgedit.transformlist);
ok(svgedit.transformlist.getTransformList);
});
test('Test svgedit.transformlist.getTransformList() function', function () {
expect(4);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
var cxform = svgedit.transformlist.getTransformList(circle);
ok(rxform);
ok(cxform);
equals(typeof rxform, typeof {});
equals(typeof cxform, typeof {});
tearDown();
});
test('Test SVGTransformList.numberOfItems property', function () {
expect(2);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
equals(typeof rxform.numberOfItems, typeof 0);
equals(rxform.numberOfItems, 0);
tearDown();
});
test('Test SVGTransformList.initialize()', function () {
expect(6);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
var cxform = svgedit.transformlist.getTransformList(circle);
var t = svgcontent.createSVGTransform();
ok(t);
ok(rxform.initialize);
equals(typeof rxform.initialize, typeof function () {});
rxform.initialize(t);
equals(rxform.numberOfItems, 1);
equals(cxform.numberOfItems, 0);
// If a transform was already in a transform list, this should
// remove it from its old list and add it to this list.
cxform.initialize(t);
// This also fails in Firefox native.
// equals(rxform.numberOfItems, 0, 'Did not remove transform from list before initializing another transformlist');
equals(cxform.numberOfItems, 1);
tearDown();
});
test('Test SVGTransformList.appendItem() and getItem()', function () {
expect(12);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
var cxform = svgedit.transformlist.getTransformList(circle);
var t1 = svgcontent.createSVGTransform(),
t2 = svgcontent.createSVGTransform(),
t3 = svgcontent.createSVGTransform();
ok(rxform.appendItem);
ok(rxform.getItem);
equals(typeof rxform.appendItem, typeof function () {});
equals(typeof rxform.getItem, typeof function () {});
rxform.appendItem(t1);
rxform.appendItem(t2);
rxform.appendItem(t3);
equals(rxform.numberOfItems, 3);
var rxf = rxform.getItem(0);
equals(rxf, t1);
equals(rxform.getItem(1), t2);
equals(rxform.getItem(2), t3);
checkOutOfBoundsException(rxform, 'getItem', -1);
checkOutOfBoundsException(rxform, 'getItem', 3);
cxform.appendItem(t1);
// These also fail in Firefox native.
// equals(rxform.numberOfItems, 2, 'Did not remove a transform from a list before appending it to a new transformlist');
// equals(rxform.getItem(0), t2, 'Found the wrong transform in a transformlist');
// equals(rxform.getItem(1), t3, 'Found the wrong transform in a transformlist');
equals(cxform.numberOfItems, 1);
equals(cxform.getItem(0), t1);
tearDown();
});
test('Test SVGTransformList.removeItem()', function () {
expect(7);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
var t1 = svgcontent.createSVGTransform(),
t2 = svgcontent.createSVGTransform();
ok(rxform.removeItem);
equals(typeof rxform.removeItem, typeof function () {});
rxform.appendItem(t1);
rxform.appendItem(t2);
var removedTransform = rxform.removeItem(0);
equals(rxform.numberOfItems, 1);
equals(removedTransform, t1);
equals(rxform.getItem(0), t2);
checkOutOfBoundsException(rxform, 'removeItem', -1);
checkOutOfBoundsException(rxform, 'removeItem', 1);
tearDown();
});
test('Test SVGTransformList.replaceItem()', function () {
expect(8);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
var cxform = svgedit.transformlist.getTransformList(circle);
ok(rxform.replaceItem);
equals(typeof rxform.replaceItem, typeof function () {});
var t1 = svgcontent.createSVGTransform(),
t2 = svgcontent.createSVGTransform(),
t3 = svgcontent.createSVGTransform();
rxform.appendItem(t1);
rxform.appendItem(t2);
cxform.appendItem(t3);
var newItem = rxform.replaceItem(t3, 0);
equals(rxform.numberOfItems, 2);
equals(newItem, t3);
equals(rxform.getItem(0), t3);
equals(rxform.getItem(1), t2);
// Fails in Firefox native
// equals(cxform.numberOfItems, 0);
// test replaceItem within a list
rxform.appendItem(t1);
rxform.replaceItem(t1, 0);
// Fails in Firefox native
// equals(rxform.numberOfItems, 2);
equals(rxform.getItem(0), t1);
equals(rxform.getItem(1), t2);
tearDown();
});
test('Test SVGTransformList.insertItemBefore()', function () {
expect(10);
setUp();
var rxform = svgedit.transformlist.getTransformList(rect);
var cxform = svgedit.transformlist.getTransformList(circle);
ok(rxform.insertItemBefore);
equals(typeof rxform.insertItemBefore, typeof function () {});
var t1 = svgcontent.createSVGTransform(),
t2 = svgcontent.createSVGTransform(),
t3 = svgcontent.createSVGTransform();
rxform.appendItem(t1);
rxform.appendItem(t2);
cxform.appendItem(t3);
var newItem = rxform.insertItemBefore(t3, 0);
equals(rxform.numberOfItems, 3);
equals(newItem, t3);
equals(rxform.getItem(0), t3);
equals(rxform.getItem(1), t1);
equals(rxform.getItem(2), t2);
// Fails in Firefox native
// equals(cxform.numberOfItems, 0);
rxform.insertItemBefore(t2, 1);
// Fails in Firefox native (they make copies of the transforms)
// equals(rxform.numberOfItems, 3);
equals(rxform.getItem(0), t3);
equals(rxform.getItem(1), t2);
equals(rxform.getItem(2), t1);
tearDown();
});
test('Test SVGTransformList.init() for translate(200,100)', function () {
expect(8);
setUp();
rect.setAttribute('transform', 'translate(200,100)');
var rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
var translate = rxform.getItem(0);
equals(translate.type, 2);
var m = translate.matrix;
equals(m.a, 1);
equals(m.b, 0);
equals(m.c, 0);
equals(m.d, 1);
equals(m.e, 200);
equals(m.f, 100);
tearDown();
});
test('Test SVGTransformList.init() for scale(4)', function () {
expect(8);
setUp();
rect.setAttribute('transform', 'scale(4)');
var rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
var scale = rxform.getItem(0);
equals(3, scale.type);
var m = scale.matrix;
equals(m.a, 4);
equals(m.b, 0);
equals(m.c, 0);
equals(m.d, 4);
equals(m.e, 0);
equals(m.f, 0);
tearDown();
});
test('Test SVGTransformList.init() for scale(4,3)', function () {
expect(8);
setUp();
rect.setAttribute('transform', 'scale(4,3)');
var rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
var scale = rxform.getItem(0);
equals(3, scale.type);
var m = scale.matrix;
equals(m.a, 4);
equals(m.b, 0);
equals(m.c, 0);
equals(m.d, 3);
equals(m.e, 0);
equals(m.f, 0);
tearDown();
});
test('Test SVGTransformList.init() for rotate(45)', function () {
expect(9);
setUp();
rect.setAttribute('transform', 'rotate(45)');
var rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
var rotate = rxform.getItem(0);
equals(4, rotate.type);
equals(45, rotate.angle);
var m = rotate.matrix;
almostEquals(m.a, 1 / Math.sqrt(2));
almostEquals(m.b, 1 / Math.sqrt(2));
almostEquals(m.c, -1 / Math.sqrt(2));
almostEquals(m.d, 1 / Math.sqrt(2));
equals(m.e, 0);
equals(m.f, 0);
tearDown();
});
test('Test SVGTransformList.init() for rotate(45, 100, 200)', function () {
expect(9);
setUp();
rect.setAttribute('transform', 'rotate(45, 100, 200)');
var rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
var rotate = rxform.getItem(0);
equals(4, rotate.type);
equals(45, rotate.angle);
var m = rotate.matrix;
almostEquals(m.a, 1 / Math.sqrt(2));
almostEquals(m.b, 1 / Math.sqrt(2));
almostEquals(m.c, -1 / Math.sqrt(2));
almostEquals(m.d, 1 / Math.sqrt(2));
var r = svgcontent.createSVGMatrix();
r.a = 1 / Math.sqrt(2); r.b = 1 / Math.sqrt(2);
r.c = -1 / Math.sqrt(2); r.d = 1 / Math.sqrt(2);
var t = svgcontent.createSVGMatrix();
t.e = -100; t.f = -200;
var t_ = svgcontent.createSVGMatrix();
t_.e = 100; t_.f = 200;
var result = t_.multiply(r).multiply(t);
almostEquals(m.e, result.e);
almostEquals(m.f, result.f);
tearDown();
});
test('Test SVGTransformList.init() for matrix(1, 2, 3, 4, 5, 6)', function () {
expect(8);
setUp();
rect.setAttribute('transform', 'matrix(1,2,3,4,5,6)');
var rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
var mt = rxform.getItem(0);
equals(1, mt.type);
var m = mt.matrix;
equals(m.a, 1);
equals(m.b, 2);
equals(m.c, 3);
equals(m.d, 4);
equals(m.e, 5);
equals(m.f, 6);
tearDown();
});
tearDown();
});
});

864
test/svgutils_bbox_test.js
View File

@ -2,477 +2,477 @@
/* globals $, svgedit */
/* eslint-disable no-var */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
function mockCreateSVGElement (jsonMap) {
var elem = document.createElementNS(svgedit.NS.SVG, jsonMap['element']);
for (var attr in jsonMap['attr']) {
elem.setAttribute(attr, jsonMap['attr'][attr]);
}
return elem;
}
var mockAddSvgElementFromJsonCallCount = 0;
function mockAddSvgElementFromJson (json) {
var elem = mockCreateSVGElement(json);
svgroot.appendChild(elem);
mockAddSvgElementFromJsonCallCount++;
return elem;
}
var mockPathActions = {
resetOrientation: function (path) {
if (path == null || path.nodeName !== 'path') { return false; }
var tlist = svgedit.transformlist.getTransformList(path);
var m = svgedit.math.transformListToTransform(tlist).matrix;
tlist.clear();
path.removeAttribute('transform');
var segList = path.pathSegList;
function mockCreateSVGElement (jsonMap) {
var elem = document.createElementNS(svgedit.NS.SVG, jsonMap['element']);
for (var attr in jsonMap['attr']) {
elem.setAttribute(attr, jsonMap['attr'][attr]);
}
return elem;
}
var mockAddSvgElementFromJsonCallCount = 0;
function mockAddSvgElementFromJson (json) {
var elem = mockCreateSVGElement(json);
svgroot.appendChild(elem);
mockAddSvgElementFromJsonCallCount++;
return elem;
}
var mockPathActions = {
resetOrientation: function (path) {
if (path == null || path.nodeName !== 'path') { return false; }
var tlist = svgedit.transformlist.getTransformList(path);
var m = svgedit.math.transformListToTransform(tlist).matrix;
tlist.clear();
path.removeAttribute('transform');
var segList = path.pathSegList;
var len = segList.numberOfItems;
var i; // , lastX, lastY;
var len = segList.numberOfItems;
var i; // , lastX, lastY;
for (i = 0; i < len; ++i) {
var seg = segList.getItem(i);
var type = seg.pathSegType;
if (type === 1) { continue; }
var pts = [];
$.each(['', 1, 2], function (j, n) {
var x = seg['x' + n], y = seg['y' + n];
if (x !== undefined && y !== undefined) {
var pt = svgedit.math.transformPoint(x, y, m);
pts.splice(pts.length, 0, pt.x, pt.y);
}
});
svgedit.path.replacePathSeg(type, i, pts, path);
}
// svgedit.utilities.reorientGrads(path, m);
}
};
for (i = 0; i < len; ++i) {
var seg = segList.getItem(i);
var type = seg.pathSegType;
if (type === 1) { continue; }
var pts = [];
$.each(['', 1, 2], function (j, n) {
var x = seg['x' + n], y = seg['y' + n];
if (x !== undefined && y !== undefined) {
var pt = svgedit.math.transformPoint(x, y, m);
pts.splice(pts.length, 0, pt.x, pt.y);
}
});
svgedit.path.replacePathSeg(type, i, pts, path);
}
// svgedit.utilities.reorientGrads(path, m);
}
};
var EPSILON = 0.001;
// var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
var sandbox = document.getElementById('sandbox');
var svgroot = mockCreateSVGElement({
'element': 'svg',
'attr': {'id': 'svgroot'}
});
sandbox.appendChild(svgroot);
var EPSILON = 0.001;
// var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
var sandbox = document.getElementById('sandbox');
var svgroot = mockCreateSVGElement({
'element': 'svg',
'attr': {'id': 'svgroot'}
});
sandbox.appendChild(svgroot);
module('svgedit.utilities_bbox', {
setup: function () {
// We're reusing ID's so we need to do this for transforms.
svgedit.transformlist.resetListMap();
svgedit.path.init(null);
mockAddSvgElementFromJsonCallCount = 0;
},
teardown: function () {
}
});
module('svgedit.utilities_bbox', {
setup: function () {
// We're reusing ID's so we need to do this for transforms.
svgedit.transformlist.resetListMap();
svgedit.path.init(null);
mockAddSvgElementFromJsonCallCount = 0;
},
teardown: function () {
}
});
test('Test svgedit.utilities package', function () {
ok(svgedit.utilities);
ok(svgedit.utilities.getBBoxWithTransform);
ok(svgedit.utilities.getStrokedBBox);
ok(svgedit.utilities.getRotationAngleFromTransformList);
ok(svgedit.utilities.getRotationAngle);
});
test('Test svgedit.utilities package', function () {
ok(svgedit.utilities);
ok(svgedit.utilities.getBBoxWithTransform);
ok(svgedit.utilities.getStrokedBBox);
ok(svgedit.utilities.getRotationAngleFromTransformList);
ok(svgedit.utilities.getRotationAngle);
});
test('Test getBBoxWithTransform and no transform', function () {
var getBBoxWithTransform = svgedit.utilities.getBBoxWithTransform;
test('Test getBBoxWithTransform and no transform', function () {
var getBBoxWithTransform = svgedit.utilities.getBBoxWithTransform;
var bbox;
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 L2,3'}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
var bbox;
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 L2,3'}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, 'height': 5});
equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, 'height': 5});
equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
var g = mockCreateSVGElement({
'element': 'g',
'attr': {}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(g);
});
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
var g = mockCreateSVGElement({
'element': 'g',
'attr': {}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(g);
});
test('Test getBBoxWithTransform and a rotation transform', function () {
var getBBoxWithTransform = svgedit.utilities.getBBoxWithTransform;
test('Test getBBoxWithTransform and a rotation transform', function () {
var getBBoxWithTransform = svgedit.utilities.getBBoxWithTransform;
var bbox;
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M10,10 L20,20', 'transform': 'rotate(45 10,10)'}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, 10, EPSILON);
close(bbox.y, 10, EPSILON);
close(bbox.width, 0, EPSILON);
close(bbox.height, Math.sqrt(100 + 100), EPSILON);
svgroot.removeChild(elem);
var bbox;
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M10,10 L20,20', 'transform': 'rotate(45 10,10)'}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, 10, EPSILON);
close(bbox.y, 10, EPSILON);
close(bbox.width, 0, EPSILON);
close(bbox.height, Math.sqrt(100 + 100), EPSILON);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '10', 'y': '10', 'width': '10', 'height': '20', 'transform': 'rotate(90 15,20)'}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, 5, EPSILON);
close(bbox.y, 15, EPSILON);
close(bbox.width, 20, EPSILON);
close(bbox.height, 10, EPSILON);
equal(mockAddSvgElementFromJsonCallCount, 1);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '10', 'y': '10', 'width': '10', 'height': '20', 'transform': 'rotate(90 15,20)'}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, 5, EPSILON);
close(bbox.y, 15, EPSILON);
close(bbox.width, 20, EPSILON);
close(bbox.height, 10, EPSILON);
equal(mockAddSvgElementFromJsonCallCount, 1);
svgroot.removeChild(elem);
var rect = {x: 10, y: 10, width: 10, height: 20};
var angle = 45;
var origin = {x: 15, y: 20};
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect2', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height, 'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'}
});
svgroot.appendChild(elem);
mockAddSvgElementFromJsonCallCount = 0;
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
var r2 = rotateRect(rect, angle, origin);
close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
var rect = {x: 10, y: 10, width: 10, height: 20};
var angle = 45;
var origin = {x: 15, y: 20};
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect2', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height, 'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'}
});
svgroot.appendChild(elem);
mockAddSvgElementFromJsonCallCount = 0;
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
var r2 = rotateRect(rect, angle, origin);
close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
// Same as previous but wrapped with g and the transform is with the g.
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect3', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height}
});
var g = mockCreateSVGElement({
'element': 'g',
'attr': {'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'}
});
g.appendChild(elem);
svgroot.appendChild(g);
mockAddSvgElementFromJsonCallCount = 0;
bbox = getBBoxWithTransform(g, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(g);
// Same as previous but wrapped with g and the transform is with the g.
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect3', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height}
});
var g = mockCreateSVGElement({
'element': 'g',
'attr': {'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'}
});
g.appendChild(elem);
svgroot.appendChild(g);
mockAddSvgElementFromJsonCallCount = 0;
bbox = getBBoxWithTransform(g, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(g);
elem = mockCreateSVGElement({
'element': 'ellipse',
'attr': {'id': 'ellipse1', 'cx': '100', 'cy': '100', 'rx': '50', 'ry': '50', 'transform': 'rotate(45 100,100)'}
});
svgroot.appendChild(elem);
mockAddSvgElementFromJsonCallCount = 0;
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
// TODO: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100.
ok(bbox.x > 45 && bbox.x <= 50);
ok(bbox.y > 45 && bbox.y <= 50);
ok(bbox.width >= 100 && bbox.width < 110);
ok(bbox.height >= 100 && bbox.height < 110);
equal(mockAddSvgElementFromJsonCallCount, 1);
svgroot.removeChild(elem);
});
elem = mockCreateSVGElement({
'element': 'ellipse',
'attr': {'id': 'ellipse1', 'cx': '100', 'cy': '100', 'rx': '50', 'ry': '50', 'transform': 'rotate(45 100,100)'}
});
svgroot.appendChild(elem);
mockAddSvgElementFromJsonCallCount = 0;
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
// TODO: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100.
ok(bbox.x > 45 && bbox.x <= 50);
ok(bbox.y > 45 && bbox.y <= 50);
ok(bbox.width >= 100 && bbox.width < 110);
ok(bbox.height >= 100 && bbox.height < 110);
equal(mockAddSvgElementFromJsonCallCount, 1);
svgroot.removeChild(elem);
});
test('Test getBBoxWithTransform with rotation and matrix transforms', function () {
var getBBoxWithTransform = svgedit.utilities.getBBoxWithTransform;
test('Test getBBoxWithTransform with rotation and matrix transforms', function () {
var getBBoxWithTransform = svgedit.utilities.getBBoxWithTransform;
var bbox;
var tx = 10; // tx right
var ty = 10; // tx down
var txInRotatedSpace = Math.sqrt(tx * tx + ty * ty); // translate in rotated 45 space.
var tyInRotatedSpace = 0;
var matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M10,10 L20,20', 'transform': 'rotate(45 10,10) ' + matrix}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, 10 + tx, EPSILON);
close(bbox.y, 10 + ty, EPSILON);
close(bbox.width, 0, EPSILON);
close(bbox.height, Math.sqrt(100 + 100), EPSILON);
svgroot.removeChild(elem);
var bbox;
var tx = 10; // tx right
var ty = 10; // tx down
var txInRotatedSpace = Math.sqrt(tx * tx + ty * ty); // translate in rotated 45 space.
var tyInRotatedSpace = 0;
var matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M10,10 L20,20', 'transform': 'rotate(45 10,10) ' + matrix}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, 10 + tx, EPSILON);
close(bbox.y, 10 + ty, EPSILON);
close(bbox.width, 0, EPSILON);
close(bbox.height, Math.sqrt(100 + 100), EPSILON);
svgroot.removeChild(elem);
txInRotatedSpace = tx; // translate in rotated 90 space.
tyInRotatedSpace = -ty;
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '10', 'y': '10', 'width': '10', 'height': '20', 'transform': 'rotate(90 15,20) ' + matrix}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, 5 + tx, EPSILON);
close(bbox.y, 15 + ty, EPSILON);
close(bbox.width, 20, EPSILON);
close(bbox.height, 10, EPSILON);
svgroot.removeChild(elem);
txInRotatedSpace = tx; // translate in rotated 90 space.
tyInRotatedSpace = -ty;
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '10', 'y': '10', 'width': '10', 'height': '20', 'transform': 'rotate(90 15,20) ' + matrix}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, 5 + tx, EPSILON);
close(bbox.y, 15 + ty, EPSILON);
close(bbox.width, 20, EPSILON);
close(bbox.height, 10, EPSILON);
svgroot.removeChild(elem);
var rect = {x: 10, y: 10, width: 10, height: 20};
var angle = 45;
var origin = {x: 15, y: 20};
tx = 10; // tx right
ty = 10; // tx down
txInRotatedSpace = Math.sqrt(tx * tx + ty * ty); // translate in rotated 45 space.
tyInRotatedSpace = 0;
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect2', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height, 'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
var r2 = rotateRect(rect, angle, origin);
close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
svgroot.removeChild(elem);
var rect = {x: 10, y: 10, width: 10, height: 20};
var angle = 45;
var origin = {x: 15, y: 20};
tx = 10; // tx right
ty = 10; // tx down
txInRotatedSpace = Math.sqrt(tx * tx + ty * ty); // translate in rotated 45 space.
tyInRotatedSpace = 0;
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect2', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height, 'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
var r2 = rotateRect(rect, angle, origin);
close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
svgroot.removeChild(elem);
// Same as previous but wrapped with g and the transform is with the g.
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect3', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height}
});
var g = mockCreateSVGElement({
'element': 'g',
'attr': {'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getBBoxWithTransform(g, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
svgroot.removeChild(g);
// Same as previous but wrapped with g and the transform is with the g.
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect3', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height}
});
var g = mockCreateSVGElement({
'element': 'g',
'attr': {'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getBBoxWithTransform(g, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
svgroot.removeChild(g);
elem = mockCreateSVGElement({
'element': 'ellipse',
'attr': {'id': 'ellipse1', 'cx': '100', 'cy': '100', 'rx': '50', 'ry': '50', 'transform': 'rotate(45 100,100) ' + matrix}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
// TODO: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100.
ok(bbox.x > 45 + tx && bbox.x <= 50 + tx);
ok(bbox.y > 45 + ty && bbox.y <= 50 + ty);
ok(bbox.width >= 100 && bbox.width < 110);
ok(bbox.height >= 100 && bbox.height < 110);
svgroot.removeChild(elem);
});
elem = mockCreateSVGElement({
'element': 'ellipse',
'attr': {'id': 'ellipse1', 'cx': '100', 'cy': '100', 'rx': '50', 'ry': '50', 'transform': 'rotate(45 100,100) ' + matrix}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
// TODO: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100.
ok(bbox.x > 45 + tx && bbox.x <= 50 + tx);
ok(bbox.y > 45 + ty && bbox.y <= 50 + ty);
ok(bbox.width >= 100 && bbox.width < 110);
ok(bbox.height >= 100 && bbox.height < 110);
svgroot.removeChild(elem);
});
test('Test getStrokedBBox with stroke-width 10', function () {
var getStrokedBBox = svgedit.utilities.getStrokedBBox;
test('Test getStrokedBBox with stroke-width 10', function () {
var getStrokedBBox = svgedit.utilities.getStrokedBBox;
var bbox;
var strokeWidth = 10;
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 L2,3', 'stroke-width': strokeWidth}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth});
svgroot.removeChild(elem);
var bbox;
var strokeWidth = 10;
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 L2,3', 'stroke-width': strokeWidth}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': strokeWidth}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': strokeWidth}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6', 'stroke-width': strokeWidth}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6', 'stroke-width': strokeWidth}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': strokeWidth}
});
var g = mockCreateSVGElement({
'element': 'g',
'attr': {}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth});
svgroot.removeChild(g);
});
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': strokeWidth}
});
var g = mockCreateSVGElement({
'element': 'g',
'attr': {}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth});
svgroot.removeChild(g);
});
test("Test getStrokedBBox with stroke-width 'none'", function () {
var getStrokedBBox = svgedit.utilities.getStrokedBBox;
test("Test getStrokedBBox with stroke-width 'none'", function () {
var getStrokedBBox = svgedit.utilities.getStrokedBBox;
var bbox;
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 L2,3', 'stroke-width': 'none'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
svgroot.removeChild(elem);
var bbox;
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 L2,3', 'stroke-width': 'none'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': 'none'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': 'none'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6', 'stroke-width': 'none'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6', 'stroke-width': 'none'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': 'none'}
});
var g = mockCreateSVGElement({
'element': 'g',
'attr': {}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(g);
});
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': 'none'}
});
var g = mockCreateSVGElement({
'element': 'g',
'attr': {}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(g);
});
test('Test getStrokedBBox with no stroke-width attribute', function () {
var getStrokedBBox = svgedit.utilities.getStrokedBBox;
test('Test getStrokedBBox with no stroke-width attribute', function () {
var getStrokedBBox = svgedit.utilities.getStrokedBBox;
var bbox;
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 L2,3'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
svgroot.removeChild(elem);
var bbox;
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 L2,3'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
var g = mockCreateSVGElement({
'element': 'g',
'attr': {}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(g);
});
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
var g = mockCreateSVGElement({
'element': 'g',
'attr': {}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(g);
});
function radians (degrees) {
return degrees * Math.PI / 180;
}
function rotatePoint (point, angle, origin) {
if (!origin) {
origin = {x: 0, y: 0};
}
var x = point.x - origin.x;
var y = point.y - origin.y;
var theta = radians(angle);
return {
x: x * Math.cos(theta) + y * Math.sin(theta) + origin.x,
y: x * Math.sin(theta) + y * Math.cos(theta) + origin.y
};
}
function rotateRect (rect, angle, origin) {
var tl = rotatePoint({x: rect.x, y: rect.y}, angle, origin);
var tr = rotatePoint({x: rect.x + rect.width, y: rect.y}, angle, origin);
var br = rotatePoint({x: rect.x + rect.width, y: rect.y + rect.height}, angle, origin);
var bl = rotatePoint({x: rect.x, y: rect.y + rect.height}, angle, origin);
function radians (degrees) {
return degrees * Math.PI / 180;
}
function rotatePoint (point, angle, origin) {
if (!origin) {
origin = {x: 0, y: 0};
}
var x = point.x - origin.x;
var y = point.y - origin.y;
var theta = radians(angle);
return {
x: x * Math.cos(theta) + y * Math.sin(theta) + origin.x,
y: x * Math.sin(theta) + y * Math.cos(theta) + origin.y
};
}
function rotateRect (rect, angle, origin) {
var tl = rotatePoint({x: rect.x, y: rect.y}, angle, origin);
var tr = rotatePoint({x: rect.x + rect.width, y: rect.y}, angle, origin);
var br = rotatePoint({x: rect.x + rect.width, y: rect.y + rect.height}, angle, origin);
var bl = rotatePoint({x: rect.x, y: rect.y + rect.height}, angle, origin);
var minx = Math.min(tl.x, tr.x, bl.x, br.x);
var maxx = Math.max(tl.x, tr.x, bl.x, br.x);
var miny = Math.min(tl.y, tr.y, bl.y, br.y);
var maxy = Math.max(tl.y, tr.y, bl.y, br.y);
var minx = Math.min(tl.x, tr.x, bl.x, br.x);
var maxx = Math.max(tl.x, tr.x, bl.x, br.x);
var miny = Math.min(tl.y, tr.y, bl.y, br.y);
var maxy = Math.max(tl.y, tr.y, bl.y, br.y);
return {
x: minx,
y: miny,
width: (maxx - minx),
height: (maxy - miny)
};
}
return {
x: minx,
y: miny,
width: (maxx - minx),
height: (maxy - miny)
};
}
});

276
test/svgutils_performance_test.js
View File

@ -2,163 +2,163 @@
/* globals $, svgedit */
/* eslint-disable no-var */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
var currentLayer = document.getElementById('layer1');
var currentLayer = document.getElementById('layer1');
function mockCreateSVGElement (jsonMap) {
var elem = document.createElementNS(svgedit.NS.SVG, jsonMap['element']);
for (var attr in jsonMap['attr']) {
elem.setAttribute(attr, jsonMap['attr'][attr]);
}
return elem;
}
function mockAddSvgElementFromJson (json) {
var elem = mockCreateSVGElement(json);
currentLayer.appendChild(elem);
return elem;
}
function mockCreateSVGElement (jsonMap) {
var elem = document.createElementNS(svgedit.NS.SVG, jsonMap['element']);
for (var attr in jsonMap['attr']) {
elem.setAttribute(attr, jsonMap['attr'][attr]);
}
return elem;
}
function mockAddSvgElementFromJson (json) {
var elem = mockCreateSVGElement(json);
currentLayer.appendChild(elem);
return elem;
}
// var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
var groupWithMatrixTransform = document.getElementById('svg_group_with_matrix_transform');
var textWithMatrixTransform = document.getElementById('svg_text_with_matrix_transform');
// var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
var groupWithMatrixTransform = document.getElementById('svg_group_with_matrix_transform');
var textWithMatrixTransform = document.getElementById('svg_text_with_matrix_transform');
function fillDocumentByCloningElement (elem, count) {
var elemId = elem.getAttribute('id') + '-';
for (var index = 0; index < count; index++) {
var clone = elem.cloneNode(true); // t: deep clone
// Make sure you set a unique ID like a real document.
clone.setAttribute('id', elemId + index);
var parent = elem.parentNode;
parent.appendChild(clone);
}
}
function fillDocumentByCloningElement (elem, count) {
var elemId = elem.getAttribute('id') + '-';
for (var index = 0; index < count; index++) {
var clone = elem.cloneNode(true); // t: deep clone
// Make sure you set a unique ID like a real document.
clone.setAttribute('id', elemId + index);
var parent = elem.parentNode;
parent.appendChild(clone);
}
}
module('svgedit.utilities_performance', {
setup: function () {
},
teardown: function () {
}
});
module('svgedit.utilities_performance', {
setup: function () {
},
teardown: function () {
}
});
var mockPathActions = {
resetOrientation: function (path) {
if (path == null || path.nodeName !== 'path') { return false; }
var tlist = svgedit.transformlist.getTransformList(path);
var m = svgedit.math.transformListToTransform(tlist).matrix;
tlist.clear();
path.removeAttribute('transform');
var segList = path.pathSegList;
var mockPathActions = {
resetOrientation: function (path) {
if (path == null || path.nodeName !== 'path') { return false; }
var tlist = svgedit.transformlist.getTransformList(path);
var m = svgedit.math.transformListToTransform(tlist).matrix;
tlist.clear();
path.removeAttribute('transform');
var segList = path.pathSegList;
var len = segList.numberOfItems;
var i; // , lastX, lastY;
var len = segList.numberOfItems;
var i; // , lastX, lastY;
for (i = 0; i < len; ++i) {
var seg = segList.getItem(i);
var type = seg.pathSegType;
if (type === 1) { continue; }
var pts = [];
$.each(['', 1, 2], function (j, n) {
var x = seg['x' + n], y = seg['y' + n];
if (x !== undefined && y !== undefined) {
var pt = svgedit.math.transformPoint(x, y, m);
pts.splice(pts.length, 0, pt.x, pt.y);
}
});
// svgedit.path.replacePathSeg(type, i, pts, path);
}
for (i = 0; i < len; ++i) {
var seg = segList.getItem(i);
var type = seg.pathSegType;
if (type === 1) { continue; }
var pts = [];
$.each(['', 1, 2], function (j, n) {
var x = seg['x' + n], y = seg['y' + n];
if (x !== undefined && y !== undefined) {
var pt = svgedit.math.transformPoint(x, y, m);
pts.splice(pts.length, 0, pt.x, pt.y);
}
});
// svgedit.path.replacePathSeg(type, i, pts, path);
}
// svgedit.utilities.reorientGrads(path, m);
}
};
// svgedit.utilities.reorientGrads(path, m);
}
};
// //////////////////////////////////////////////////////////
// Performance times with various browsers on Macbook 2011 8MB RAM OS X El Capitan 10.11.4
//
// To see 'Before Optimization' performance, making the following two edits.
// 1. svgedit.utilities.getStrokedBBox - change if( elems.length === 1) to if( false && elems.length === 1)
// 2. svgedit.utilities.getBBoxWithTransform - uncomment 'Old technique that was very slow'
// //////////////////////////////////////////////////////////
// Performance times with various browsers on Macbook 2011 8MB RAM OS X El Capitan 10.11.4
//
// To see 'Before Optimization' performance, making the following two edits.
// 1. svgedit.utilities.getStrokedBBox - change if( elems.length === 1) to if( false && elems.length === 1)
// 2. svgedit.utilities.getBBoxWithTransform - uncomment 'Old technique that was very slow'
// Chrome
// Before Optimization
// Pass1 svgCanvas.getStrokedBBox total ms 4,218, ave ms 41.0, min/max 37 51
// Pass2 svgCanvas.getStrokedBBox total ms 4,458, ave ms 43.3, min/max 32 63
// Optimized Code
// Pass1 svgCanvas.getStrokedBBox total ms 1,112, ave ms 10.8, min/max 9 20
// Pass2 svgCanvas.getStrokedBBox total ms 34, ave ms 0.3, min/max 0 20
// Chrome
// Before Optimization
// Pass1 svgCanvas.getStrokedBBox total ms 4,218, ave ms 41.0, min/max 37 51
// Pass2 svgCanvas.getStrokedBBox total ms 4,458, ave ms 43.3, min/max 32 63
// Optimized Code
// Pass1 svgCanvas.getStrokedBBox total ms 1,112, ave ms 10.8, min/max 9 20
// Pass2 svgCanvas.getStrokedBBox total ms 34, ave ms 0.3, min/max 0 20
// Firefox
// Before Optimization
// Pass1 svgCanvas.getStrokedBBox total ms 3,794, ave ms 36.8, min/max 33 48
// Pass2 svgCanvas.getStrokedBBox total ms 4,049, ave ms 39.3, min/max 28 53
// Optimized Code
// Pass1 svgCanvas.getStrokedBBox total ms 104, ave ms 1.0, min/max 0 23
// Pass2 svgCanvas.getStrokedBBox total ms 71, ave ms 0.7, min/max 0 23
// Firefox
// Before Optimization
// Pass1 svgCanvas.getStrokedBBox total ms 3,794, ave ms 36.8, min/max 33 48
// Pass2 svgCanvas.getStrokedBBox total ms 4,049, ave ms 39.3, min/max 28 53
// Optimized Code
// Pass1 svgCanvas.getStrokedBBox total ms 104, ave ms 1.0, min/max 0 23
// Pass2 svgCanvas.getStrokedBBox total ms 71, ave ms 0.7, min/max 0 23
// Safari
// Before Optimization
// Pass1 svgCanvas.getStrokedBBox total ms 4,840, ave ms 47.0, min/max 45 62
// Pass2 svgCanvas.getStrokedBBox total ms 4,849, ave ms 47.1, min/max 34 62
// Optimized Code
// Pass1 svgCanvas.getStrokedBBox total ms 42, ave ms 0.4, min/max 0 23
// Pass2 svgCanvas.getStrokedBBox total ms 17, ave ms 0.2, min/max 0 23
// Safari
// Before Optimization
// Pass1 svgCanvas.getStrokedBBox total ms 4,840, ave ms 47.0, min/max 45 62
// Pass2 svgCanvas.getStrokedBBox total ms 4,849, ave ms 47.1, min/max 34 62
// Optimized Code
// Pass1 svgCanvas.getStrokedBBox total ms 42, ave ms 0.4, min/max 0 23
// Pass2 svgCanvas.getStrokedBBox total ms 17, ave ms 0.2, min/max 0 23
asyncTest('Test svgCanvas.getStrokedBBox() performance with matrix transforms', function () {
expect(2);
var getStrokedBBox = svgedit.utilities.getStrokedBBox;
var children = currentLayer.children;
asyncTest('Test svgCanvas.getStrokedBBox() performance with matrix transforms', function () {
expect(2);
var getStrokedBBox = svgedit.utilities.getStrokedBBox;
var children = currentLayer.children;
var index, count, child, start, delta, lastTime, now, ave,
min = Number.MAX_VALUE,
max = 0,
total = 0;
var index, count, child, start, delta, lastTime, now, ave,
min = Number.MAX_VALUE,
max = 0,
total = 0;
fillDocumentByCloningElement(groupWithMatrixTransform, 50);
fillDocumentByCloningElement(textWithMatrixTransform, 50);
fillDocumentByCloningElement(groupWithMatrixTransform, 50);
fillDocumentByCloningElement(textWithMatrixTransform, 50);
// The first pass through all elements is slower.
count = children.length;
start = lastTime = now = Date.now();
// Skip the first child which is the title.
for (index = 1; index < count; index++) {
child = children[index];
/* var obj = */ getStrokedBBox([child], mockAddSvgElementFromJson, mockPathActions);
now = Date.now(); delta = now - lastTime; lastTime = now;
total += delta;
min = Math.min(min, delta);
max = Math.max(max, delta);
}
total = lastTime - start;
ave = total / count;
ok(ave < 20, 'svgedit.utilities.getStrokedBBox average execution time is less than 20 ms');
console.log('Pass1 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + ave.toFixed(1) + ', min/max ' + min + ' ' + max);
// The first pass through all elements is slower.
count = children.length;
start = lastTime = now = Date.now();
// Skip the first child which is the title.
for (index = 1; index < count; index++) {
child = children[index];
/* var obj = */ getStrokedBBox([child], mockAddSvgElementFromJson, mockPathActions);
now = Date.now(); delta = now - lastTime; lastTime = now;
total += delta;
min = Math.min(min, delta);
max = Math.max(max, delta);
}
total = lastTime - start;
ave = total / count;
ok(ave < 20, 'svgedit.utilities.getStrokedBBox average execution time is less than 20 ms');
console.log('Pass1 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + ave.toFixed(1) + ', min/max ' + min + ' ' + max);
// The second pass is two to ten times faster.
setTimeout(function () {
count = children.length;
// The second pass is two to ten times faster.
setTimeout(function () {
count = children.length;
start = lastTime = now = Date.now();
// Skip the first child which is the title.
for (index = 1; index < count; index++) {
child = children[index];
/* var obj = */ getStrokedBBox([child], mockAddSvgElementFromJson, mockPathActions);
now = Date.now(); delta = now - lastTime; lastTime = now;
total += delta;
min = Math.min(min, delta);
max = Math.max(max, delta);
}
start = lastTime = now = Date.now();
// Skip the first child which is the title.
for (index = 1; index < count; index++) {
child = children[index];
/* var obj = */ getStrokedBBox([child], mockAddSvgElementFromJson, mockPathActions);
now = Date.now(); delta = now - lastTime; lastTime = now;
total += delta;
min = Math.min(min, delta);
max = Math.max(max, delta);
}
total = lastTime - start;
ave = total / count;
ok(ave < 2, 'svgedit.utilities.getStrokedBBox average execution time is less than 1 ms');
console.log('Pass2 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + ave.toFixed(1) + ', min/max ' + min + ' ' + max);
total = lastTime - start;
ave = total / count;
ok(ave < 2, 'svgedit.utilities.getStrokedBBox average execution time is less than 1 ms');
console.log('Pass2 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + ave.toFixed(1) + ', min/max ' + min + ' ' + max);
QUnit.start();
});
});
QUnit.start();
});
});
});

580
test/svgutils_test.js
View File

@ -2,336 +2,336 @@
/* globals $, svgedit, equals */
/* eslint-disable no-var */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
function mockCreateSVGElement (jsonMap) {
var elem = document.createElementNS(svgedit.NS.SVG, jsonMap['element']);
for (var attr in jsonMap['attr']) {
elem.setAttribute(attr, jsonMap['attr'][attr]);
}
return elem;
}
function mockAddSvgElementFromJson (json) {
var elem = mockCreateSVGElement(json);
svgroot.appendChild(elem);
return elem;
}
var mockPathActions = {resetOrientation: function () {}};
var mockHistorySubCommands = [];
var mockHistory = {
BatchCommand: function () {
return {
addSubCommand: function (cmd) { mockHistorySubCommands.push(cmd); }
};
},
RemoveElementCommand: function (elem, nextSibling, parent) {
this.elem = elem;
this.nextSibling = nextSibling;
this.parent = parent;
},
InsertElementCommand: function (path) {
this.path = path;
}
};
var mockCount = {
clearSelection: 0,
addToSelection: 0,
addCommandToHistory: 0
};
function mockClearSelection () { mockCount.clearSelection++; }
function mockAddToSelection () { mockCount.addToSelection++; }
function mockAddCommandToHistory () { mockCount.addCommandToHistory++; }
function mockCreateSVGElement (jsonMap) {
var elem = document.createElementNS(svgedit.NS.SVG, jsonMap['element']);
for (var attr in jsonMap['attr']) {
elem.setAttribute(attr, jsonMap['attr'][attr]);
}
return elem;
}
function mockAddSvgElementFromJson (json) {
var elem = mockCreateSVGElement(json);
svgroot.appendChild(elem);
return elem;
}
var mockPathActions = {resetOrientation: function () {}};
var mockHistorySubCommands = [];
var mockHistory = {
BatchCommand: function () {
return {
addSubCommand: function (cmd) { mockHistorySubCommands.push(cmd); }
};
},
RemoveElementCommand: function (elem, nextSibling, parent) {
this.elem = elem;
this.nextSibling = nextSibling;
this.parent = parent;
},
InsertElementCommand: function (path) {
this.path = path;
}
};
var mockCount = {
clearSelection: 0,
addToSelection: 0,
addCommandToHistory: 0
};
function mockClearSelection () { mockCount.clearSelection++; }
function mockAddToSelection () { mockCount.addToSelection++; }
function mockAddCommandToHistory () { mockCount.addCommandToHistory++; }
var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
var sandbox = document.getElementById('sandbox');
var svgroot = mockCreateSVGElement({
'element': 'svg',
'attr': {'id': 'svgroot'}
});
sandbox.appendChild(svgroot);
var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
var sandbox = document.getElementById('sandbox');
var svgroot = mockCreateSVGElement({
'element': 'svg',
'attr': {'id': 'svgroot'}
});
sandbox.appendChild(svgroot);
module('svgedit.utilities', {
setup: function () {
mockHistorySubCommands = [];
mockCount.clearSelection = 0;
mockCount.addToSelection = 0;
mockCount.addCommandToHistory = 0;
},
teardown: function () {
}
});
module('svgedit.utilities', {
setup: function () {
mockHistorySubCommands = [];
mockCount.clearSelection = 0;
mockCount.addToSelection = 0;
mockCount.addCommandToHistory = 0;
},
teardown: function () {
}
});
test('Test svgedit.utilities package', function () {
expect(3);
test('Test svgedit.utilities package', function () {
expect(3);
ok(svgedit.utilities);
ok(svgedit.utilities.toXml);
equals(typeof svgedit.utilities.toXml, typeof function () {});
});
ok(svgedit.utilities);
ok(svgedit.utilities.toXml);
equals(typeof svgedit.utilities.toXml, typeof function () {});
});
test('Test svgedit.utilities.toXml() function', function () {
expect(6);
var toXml = svgedit.utilities.toXml;
test('Test svgedit.utilities.toXml() function', function () {
expect(6);
var toXml = svgedit.utilities.toXml;
equals(toXml('a'), 'a');
equals(toXml('ABC_'), 'ABC_');
equals(toXml('PB&J'), 'PB&amp;J');
equals(toXml('2 < 5'), '2 &lt; 5');
equals(toXml('5 > 2'), '5 &gt; 2');
equals(toXml('\'<&>"'), '&#x27;&lt;&amp;&gt;&quot;');
});
equals(toXml('a'), 'a');
equals(toXml('ABC_'), 'ABC_');
equals(toXml('PB&J'), 'PB&amp;J');
equals(toXml('2 < 5'), '2 &lt; 5');
equals(toXml('5 > 2'), '5 &gt; 2');
equals(toXml('\'<&>"'), '&#x27;&lt;&amp;&gt;&quot;');
});
test('Test svgedit.utilities.fromXml() function', function () {
expect(6);
var fromXml = svgedit.utilities.fromXml;
test('Test svgedit.utilities.fromXml() function', function () {
expect(6);
var fromXml = svgedit.utilities.fromXml;
equals(fromXml('a'), 'a');
equals(fromXml('ABC_'), 'ABC_');
equals(fromXml('PB&amp;J'), 'PB&J');
equals(fromXml('2 &lt; 5'), '2 < 5');
equals(fromXml('5 &gt; 2'), '5 > 2');
equals(fromXml('&lt;&amp;&gt;'), '<&>');
});
equals(fromXml('a'), 'a');
equals(fromXml('ABC_'), 'ABC_');
equals(fromXml('PB&amp;J'), 'PB&J');
equals(fromXml('2 &lt; 5'), '2 < 5');
equals(fromXml('5 &gt; 2'), '5 > 2');
equals(fromXml('&lt;&amp;&gt;'), '<&>');
});
test('Test svgedit.utilities.encode64() function', function () {
expect(4);
var encode64 = svgedit.utilities.encode64;
test('Test svgedit.utilities.encode64() function', function () {
expect(4);
var encode64 = svgedit.utilities.encode64;
equals(encode64('abcdef'), 'YWJjZGVm');
equals(encode64('12345'), 'MTIzNDU=');
equals(encode64(' '), 'IA==');
equals(encode64('`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?'), 'YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8=');
});
equals(encode64('abcdef'), 'YWJjZGVm');
equals(encode64('12345'), 'MTIzNDU=');
equals(encode64(' '), 'IA==');
equals(encode64('`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?'), 'YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8=');
});
test('Test svgedit.utilities.decode64() function', function () {
expect(4);
var decode64 = svgedit.utilities.decode64;
test('Test svgedit.utilities.decode64() function', function () {
expect(4);
var decode64 = svgedit.utilities.decode64;
equals(decode64('YWJjZGVm'), 'abcdef');
equals(decode64('MTIzNDU='), '12345');
equals(decode64('IA=='), ' ');
equals(decode64('YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8='), '`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?');
});
equals(decode64('YWJjZGVm'), 'abcdef');
equals(decode64('MTIzNDU='), '12345');
equals(decode64('IA=='), ' ');
equals(decode64('YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8='), '`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?');
});
test('Test svgedit.utilities.convertToXMLReferences() function', function () {
expect(1);
test('Test svgedit.utilities.convertToXMLReferences() function', function () {
expect(1);
var convert = svgedit.utilities.convertToXMLReferences;
equals(convert('ABC'), 'ABC');
// equals(convert('<27>BC'), '&#192;BC');
});
var convert = svgedit.utilities.convertToXMLReferences;
equals(convert('ABC'), 'ABC');
// equals(convert('<27>BC'), '&#192;BC');
});
test('Test svgedit.utilities.bboxToObj() function', function () {
expect(5);
var bboxToObj = svgedit.utilities.bboxToObj;
test('Test svgedit.utilities.bboxToObj() function', function () {
expect(5);
var bboxToObj = svgedit.utilities.bboxToObj;
var rect = svg.createSVGRect();
rect.x = 1;
rect.y = 2;
rect.width = 3;
rect.height = 4;
var rect = svg.createSVGRect();
rect.x = 1;
rect.y = 2;
rect.width = 3;
rect.height = 4;
var obj = bboxToObj(rect);
equals(typeof obj, typeof {});
equals(obj.x, 1);
equals(obj.y, 2);
equals(obj.width, 3);
equals(obj.height, 4);
});
var obj = bboxToObj(rect);
equals(typeof obj, typeof {});
equals(obj.x, 1);
equals(obj.y, 2);
equals(obj.width, 3);
equals(obj.height, 4);
});
test('Test getUrlFromAttr', function () {
expect(4);
test('Test getUrlFromAttr', function () {
expect(4);
equal(svgedit.utilities.getUrlFromAttr('url(#foo)'), '#foo');
equal(svgedit.utilities.getUrlFromAttr('url(somefile.svg#foo)'), 'somefile.svg#foo');
equal(svgedit.utilities.getUrlFromAttr('url("#foo")'), '#foo');
equal(svgedit.utilities.getUrlFromAttr('url("#foo")'), '#foo');
});
equal(svgedit.utilities.getUrlFromAttr('url(#foo)'), '#foo');
equal(svgedit.utilities.getUrlFromAttr('url(somefile.svg#foo)'), 'somefile.svg#foo');
equal(svgedit.utilities.getUrlFromAttr('url("#foo")'), '#foo');
equal(svgedit.utilities.getUrlFromAttr('url("#foo")'), '#foo');
});
test('Test getPathBBox', function () {
if (svgedit.browser.supportsPathBBox()) return;
var doc = svgedit.utilities.text2xml('<svg></svg>');
var path = doc.createElementNS(svgedit.NS.SVG, 'path');
path.setAttributeNS(null, 'd', 'm0,0l5,0l0,5l-5,0l0,-5z');
var bb = svgedit.utilities.getPathBBox(path);
equals(typeof bb, 'object', 'BBox returned object');
ok(bb.x && !isNaN(bb.x));
ok(bb.y && !isNaN(bb.y));
});
test('Test getPathBBox', function () {
if (svgedit.browser.supportsPathBBox()) return;
var doc = svgedit.utilities.text2xml('<svg></svg>');
var path = doc.createElementNS(svgedit.NS.SVG, 'path');
path.setAttributeNS(null, 'd', 'm0,0l5,0l0,5l-5,0l0,-5z');
var bb = svgedit.utilities.getPathBBox(path);
equals(typeof bb, 'object', 'BBox returned object');
ok(bb.x && !isNaN(bb.x));
ok(bb.y && !isNaN(bb.y));
});
test('Test getPathDFromSegments', function () {
var d;
var getPathDFromSegments = svgedit.utilities.getPathDFromSegments;
test('Test getPathDFromSegments', function () {
var d;
var getPathDFromSegments = svgedit.utilities.getPathDFromSegments;
var doc = svgedit.utilities.text2xml('<svg></svg>');
var path = doc.createElementNS(svgedit.NS.SVG, 'path');
path.setAttributeNS(null, 'd', 'm0,0l5,0l0,5l-5,0l0,-5z');
d = getPathDFromSegments([
['M', [1, 2]],
['Z', []]
]);
equal(d, 'M1,2 Z');
var doc = svgedit.utilities.text2xml('<svg></svg>');
var path = doc.createElementNS(svgedit.NS.SVG, 'path');
path.setAttributeNS(null, 'd', 'm0,0l5,0l0,5l-5,0l0,-5z');
d = getPathDFromSegments([
['M', [1, 2]],
['Z', []]
]);
equal(d, 'M1,2 Z');
d = getPathDFromSegments([
['M', [1, 2]],
['M', [3, 4]],
['Z', []]
]);
equal(d, 'M1,2 M3,4 Z');
d = getPathDFromSegments([
['M', [1, 2]],
['M', [3, 4]],
['Z', []]
]);
equal(d, 'M1,2 M3,4 Z');
d = getPathDFromSegments([
['M', [1, 2]],
['C', [3, 4, 5, 6]],
['Z', []]
]);
equal(d, 'M1,2 C3,4 5,6 Z');
});
d = getPathDFromSegments([
['M', [1, 2]],
['C', [3, 4, 5, 6]],
['Z', []]
]);
equal(d, 'M1,2 C3,4 5,6 Z');
});
test('Test getPathDFromElement', function () {
var getPathDFromElement = svgedit.utilities.getPathDFromElement;
test('Test getPathDFromElement', function () {
var getPathDFromElement = svgedit.utilities.getPathDFromElement;
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 Z'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M0,1 Z');
svgroot.removeChild(elem);
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 Z'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M0,1 Z');
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'roundrect', 'x': '0', 'y': '1', 'rx': '2', 'ry': '3', 'width': '10', 'height': '11'}
});
svgroot.appendChild(elem);
var closeEnough = new RegExp('M0,4 C0,2.3[0-9]* 0.9[0-9]*,1 2,1 L8,1 C9.0[0-9]*,1 10,2.3[0-9]* 10,4 L10,9 C10,10.6[0-9]* 9.08675799086758,12 8,12 L2,12 C0.9[0-9]*,12 0,10.6[0-9]* 0,9 L0,4 Z');
equal(closeEnough.test(getPathDFromElement(elem)), true);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'roundrect', 'x': '0', 'y': '1', 'rx': '2', 'ry': '3', 'width': '10', 'height': '11'}
});
svgroot.appendChild(elem);
var closeEnough = new RegExp('M0,4 C0,2.3[0-9]* 0.9[0-9]*,1 2,1 L8,1 C9.0[0-9]*,1 10,2.3[0-9]* 10,4 L10,9 C10,10.6[0-9]* 9.08675799086758,12 8,12 L2,12 C0.9[0-9]*,12 0,10.6[0-9]* 0,9 L0,4 Z');
equal(closeEnough.test(getPathDFromElement(elem)), true);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M0,1L5,6');
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M0,1L5,6');
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'circle',
'attr': {'id': 'circle', 'cx': '10', 'cy': '11', 'rx': '5', 'ry': '10'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 Z');
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'circle',
'attr': {'id': 'circle', 'cx': '10', 'cy': '11', 'rx': '5', 'ry': '10'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 Z');
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'polyline',
'attr': {'id': 'polyline', 'points': '0,1 5,1 5,11 0,11'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M0,1 5,1 5,11 0,11');
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'polyline',
'attr': {'id': 'polyline', 'points': '0,1 5,1 5,11 0,11'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M0,1 5,1 5,11 0,11');
svgroot.removeChild(elem);
equal(getPathDFromElement({tagName: 'something unknown'}), undefined);
});
equal(getPathDFromElement({tagName: 'something unknown'}), undefined);
});
test('Test getBBoxOfElementAsPath', function () {
function getBBoxOfElementAsPath (elem, addSvgElementFromJson, pathActions) {
var bbox = svgedit.utilities.getBBoxOfElementAsPath(elem, addSvgElementFromJson, pathActions);
return svgedit.utilities.bboxToObj(bbox); // need this for QUnit equal() to work.
}
test('Test getBBoxOfElementAsPath', function () {
function getBBoxOfElementAsPath (elem, addSvgElementFromJson, pathActions) {
var bbox = svgedit.utilities.getBBoxOfElementAsPath(elem, addSvgElementFromJson, pathActions);
return svgedit.utilities.bboxToObj(bbox); // need this for QUnit equal() to work.
}
var bbox;
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 Z'}
});
svgroot.appendChild(elem);
bbox = getBBoxOfElementAsPath(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 0, height: 0});
svgroot.removeChild(elem);
var bbox;
var elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 Z'}
});
svgroot.appendChild(elem);
bbox = getBBoxOfElementAsPath(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 0, height: 0});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
svgroot.appendChild(elem);
bbox = getBBoxOfElementAsPath(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
svgroot.appendChild(elem);
bbox = getBBoxOfElementAsPath(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
});
svgroot.appendChild(elem);
bbox = getBBoxOfElementAsPath(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
});
svgroot.appendChild(elem);
bbox = getBBoxOfElementAsPath(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
svgroot.removeChild(elem);
// TODO: test element with transform. Need resetOrientation above to be working or mock it.
});
// TODO: test element with transform. Need resetOrientation above to be working or mock it.
});
test('Test convertToPath rect', function () {
var convertToPath = svgedit.utilities.convertToPath;
var attrs = {
'fill': 'red',
'stroke': 'white',
'stroke-width': '1',
'visibility': 'hidden'
};
test('Test convertToPath rect', function () {
var convertToPath = svgedit.utilities.convertToPath;
var attrs = {
'fill': 'red',
'stroke': 'white',
'stroke-width': '1',
'visibility': 'hidden'
};
var elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
svgroot.appendChild(elem);
var path = convertToPath(elem, attrs, mockAddSvgElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory);
equal(path.getAttribute('d'), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
equal(path.getAttribute('visibilituy'), null);
equal(path.id, 'rect');
equal(path.parentNode, svgroot);
equal(elem.parentNode, null);
equal(mockHistorySubCommands.length, 2);
equal(mockCount.clearSelection, 1);
equal(mockCount.addToSelection, 1);
equal(mockCount.addCommandToHistory, 1);
svgroot.removeChild(path);
});
var elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
});
svgroot.appendChild(elem);
var path = convertToPath(elem, attrs, mockAddSvgElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory);
equal(path.getAttribute('d'), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
equal(path.getAttribute('visibilituy'), null);
equal(path.id, 'rect');
equal(path.parentNode, svgroot);
equal(elem.parentNode, null);
equal(mockHistorySubCommands.length, 2);
equal(mockCount.clearSelection, 1);
equal(mockCount.addToSelection, 1);
equal(mockCount.addCommandToHistory, 1);
svgroot.removeChild(path);
});
test('Test convertToPath unknown element', function () {
var convertToPath = svgedit.utilities.convertToPath;
var attrs = {
'fill': 'red',
'stroke': 'white',
'stroke-width': '1',
'visibility': 'hidden'
};
test('Test convertToPath unknown element', function () {
var convertToPath = svgedit.utilities.convertToPath;
var attrs = {
'fill': 'red',
'stroke': 'white',
'stroke-width': '1',
'visibility': 'hidden'
};
var elem = {
tagName: 'something unknown',
id: 'something-unknown',
getAttribute: function (attr) { return ''; },
parentNode: svgroot
};
var path = convertToPath(elem, attrs, mockAddSvgElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory);
equal(path, null);
equal(elem.parentNode, svgroot);
equal(mockHistorySubCommands.length, 0);
equal(mockCount.clearSelection, 0);
equal(mockCount.addToSelection, 0);
equal(mockCount.addCommandToHistory, 0);
});
var elem = {
tagName: 'something unknown',
id: 'something-unknown',
getAttribute: function (attr) { return ''; },
parentNode: svgroot
};
var path = convertToPath(elem, attrs, mockAddSvgElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory);
equal(path, null);
equal(elem.parentNode, svgroot);
equal(mockHistorySubCommands.length, 0);
equal(mockCount.clearSelection, 0);
equal(mockCount.addToSelection, 0);
equal(mockCount.addCommandToHistory, 0);
});
});

450
test/test1.js
View File

@ -2,266 +2,266 @@
/* globals $ */
/* eslint-disable no-var */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
// helper functions
/*
var isIdentity = function (m) {
return (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0);
};
var matrixString = function (m) {
return [m.a, m.b, m.c, m.d, m.e, m.f].join(',');
};
*/
// helper functions
/*
var isIdentity = function (m) {
return (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0);
};
var matrixString = function (m) {
return [m.a, m.b, m.c, m.d, m.e, m.f].join(',');
};
*/
var svgCanvas = new $.SvgCanvas(
document.getElementById('svgcanvas'), {
canvas_expansion: 3,
dimensions: [640, 480],
initFill: {
color: 'FF0000', // solid red
opacity: 1
},
initStroke: {
width: 5,
color: '000000', // solid black
opacity: 1
},
initOpacity: 1,
imgPath: 'images/',
langPath: 'locale/',
extPath: 'extensions/',
extensions: ['ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js'],
initTool: 'select',
wireframe: false
});
var
// svgroot = document.getElementById('svgroot'),
// svgdoc = svgroot.documentElement,
svgns = 'http://www.w3.org/2000/svg',
xlinkns = 'http://www.w3.org/1999/xlink';
var svgCanvas = new $.SvgCanvas(
document.getElementById('svgcanvas'), {
canvas_expansion: 3,
dimensions: [640, 480],
initFill: {
color: 'FF0000', // solid red
opacity: 1
},
initStroke: {
width: 5,
color: '000000', // solid black
opacity: 1
},
initOpacity: 1,
imgPath: 'images/',
langPath: 'locale/',
extPath: 'extensions/',
extensions: ['ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js'],
initTool: 'select',
wireframe: false
});
var
// svgroot = document.getElementById('svgroot'),
// svgdoc = svgroot.documentElement,
svgns = 'http://www.w3.org/2000/svg',
xlinkns = 'http://www.w3.org/1999/xlink';
module('Basic Module');
module('Basic Module');
test('Test existence of SvgCanvas object', function () {
expect(1);
equal(typeof {}, typeof svgCanvas);
});
test('Test existence of SvgCanvas object', function () {
expect(1);
equal(typeof {}, typeof svgCanvas);
});
module('Path Module');
module('Path Module');
test('Test path conversion from absolute to relative', function () {
expect(6);
var convert = svgCanvas.pathActions.convertPath;
test('Test path conversion from absolute to relative', function () {
expect(6);
var convert = svgCanvas.pathActions.convertPath;
// TODO: Test these paths:
// "m400.00491,625.01379a1.78688,1.78688 0 1 1-3.57373,0a1.78688,1.78688 0 1 13.57373,0z"
// "m36.812,15.8566c-28.03099,0 -26.28099,12.15601 -26.28099,12.15601l0.03099,12.59399h26.75v3.781h-37.37399c0,0 -17.938,-2.034 -133.00001,26.25c115.06201,28.284 130.71801,27.281 130.71801,27.281h9.34399v-13.125c0,0 -0.504,-15.656 15.40601,-15.656h26.532c0,0 14.90599,0.241 14.90599,-14.406v-24.219c0,0 2.263,-14.65601 -27.032,-14.65601zm-14.75,8.4684c2.662,0 4.813,2.151 4.813,4.813c0,2.661 -2.151,4.812 -4.813,4.812c-2.661,0 -4.812,-2.151 -4.812,-4.812c0,-2.662 2.151,-4.813 4.812,-4.813z"
// "m 0,0 l 200,0 l 0,100 L 0,100"
// TODO: Test these paths:
// "m400.00491,625.01379a1.78688,1.78688 0 1 1-3.57373,0a1.78688,1.78688 0 1 13.57373,0z"
// "m36.812,15.8566c-28.03099,0 -26.28099,12.15601 -26.28099,12.15601l0.03099,12.59399h26.75v3.781h-37.37399c0,0 -17.938,-2.034 -133.00001,26.25c115.06201,28.284 130.71801,27.281 130.71801,27.281h9.34399v-13.125c0,0 -0.504,-15.656 15.40601,-15.656h26.532c0,0 14.90599,0.241 14.90599,-14.406v-24.219c0,0 2.263,-14.65601 -27.032,-14.65601zm-14.75,8.4684c2.662,0 4.813,2.151 4.813,4.813c0,2.661 -2.151,4.812 -4.813,4.812c-2.661,0 -4.812,-2.151 -4.812,-4.812c0,-2.662 2.151,-4.813 4.812,-4.813z"
// "m 0,0 l 200,0 l 0,100 L 0,100"
svgCanvas.setSvgString(
"<svg xmlns='http://www.w3.org/2000/svg' width='400' x='300'>" +
"<path id='p1' d='M100,100 L200,100 L100,100Z'/>" +
"<path id='p2' d='m 0,0 l 200,0 l 0,100 L 0,100'/>" +
'</svg>'
);
svgCanvas.setSvgString(
"<svg xmlns='http://www.w3.org/2000/svg' width='400' x='300'>" +
"<path id='p1' d='M100,100 L200,100 L100,100Z'/>" +
"<path id='p2' d='m 0,0 l 200,0 l 0,100 L 0,100'/>" +
'</svg>'
);
var p1 = document.getElementById('p1'),
p2 = document.getElementById('p2'),
dAbs = p1.getAttribute('d'),
seglist = p1.pathSegList,
curseg = null;
var p1 = document.getElementById('p1'),
p2 = document.getElementById('p2'),
dAbs = p1.getAttribute('d'),
seglist = p1.pathSegList,
curseg = null;
equal(p1.nodeName, 'path', "Expected 'path', got");
equal(p1.nodeName, 'path', "Expected 'path', got");
equal(seglist.numberOfItems, 4, 'Number of segments before conversion');
equal(seglist.numberOfItems, 4, 'Number of segments before conversion');
// verify segments before conversion
curseg = seglist.getItem(0);
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'M', 'Before conversion, segment #1 type');
curseg = seglist.getItem(1);
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'L', 'Before conversion, segment #2 type');
curseg = seglist.getItem(3);
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'Z', 'Before conversion, segment #3 type' + dAbs);
// verify segments before conversion
curseg = seglist.getItem(0);
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'M', 'Before conversion, segment #1 type');
curseg = seglist.getItem(1);
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'L', 'Before conversion, segment #2 type');
curseg = seglist.getItem(3);
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'Z', 'Before conversion, segment #3 type' + dAbs);
// convert and verify segments
var d = convert(p1, true);
equal(d, 'm100,100l100,0l-100,0z', 'Converted path to relative string');
// convert and verify segments
var d = convert(p1, true);
equal(d, 'm100,100l100,0l-100,0z', 'Converted path to relative string');
// TODO: see why this isn't working in SVG-edit
d = convert(p2, true);
QUnit.log({result: d});
d = convert(p2, false);
QUnit.log({result: d});
});
// TODO: see why this isn't working in SVG-edit
d = convert(p2, true);
QUnit.log({result: d});
d = convert(p2, false);
QUnit.log({result: d});
});
module('Import Module');
module('Import Module');
test('Test import use', function () {
expect(3);
test('Test import use', function () {
expect(3);
svgCanvas.setSvgString(
"<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='400' x='300'>" +
"<rect id='the-rect' width='200' height='200'/>" +
"<use id='the-use' xlink:href='#the-rect'/>" +
"<use id='foreign-use' xlink:href='somefile.svg#the-rect'/>" +
"<use id='no-use'/>" +
'</svg>'
);
svgCanvas.setSvgString(
"<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='400' x='300'>" +
"<rect id='the-rect' width='200' height='200'/>" +
"<use id='the-use' xlink:href='#the-rect'/>" +
"<use id='foreign-use' xlink:href='somefile.svg#the-rect'/>" +
"<use id='no-use'/>" +
'</svg>'
);
var u = document.getElementById('the-use'),
fu = document.getElementById('foreign-use'),
nfu = document.getElementById('no-use');
var u = document.getElementById('the-use'),
fu = document.getElementById('foreign-use'),
nfu = document.getElementById('no-use');
equal((u && u.nodeName === 'use'), true, 'Did not import <use> element');
equal(fu, null, 'Removed <use> element that had a foreign href');
equal(nfu, null, 'Removed <use> element that had no href');
});
equal((u && u.nodeName === 'use'), true, 'Did not import <use> element');
equal(fu, null, 'Removed <use> element that had a foreign href');
equal(nfu, null, 'Removed <use> element that had no href');
});
// This test shows that an element with an invalid attribute is still parsed in properly
// and only the attribute is not imported
test('Test invalid attribute', function () {
expect(2);
// This test shows that an element with an invalid attribute is still parsed in properly
// and only the attribute is not imported
test('Test invalid attribute', function () {
expect(2);
svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">' +
'<text x="182.75" y="173.5" id="the-text" fill="#008000" font-size="150" font-family="serif" text-anchor="middle" d="M116,222 L110,108">words</text>' +
'</svg>'
);
svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">' +
'<text x="182.75" y="173.5" id="the-text" fill="#008000" font-size="150" font-family="serif" text-anchor="middle" d="M116,222 L110,108">words</text>' +
'</svg>'
);
var t = document.getElementById('the-text');
var t = document.getElementById('the-text');
equal(true, (t && t.nodeName === 'text'), 'Did not import <text> element');
equal(null, t.getAttribute('d'), 'Imported a <text> with a d attribute');
});
equal(true, (t && t.nodeName === 'text'), 'Did not import <text> element');
equal(null, t.getAttribute('d'), 'Imported a <text> with a d attribute');
});
// This test makes sure import/export properly handles namespaced attributes
test('Test importing/exporting namespaced attributes', function () {
expect(5);
/* var setStr = */ svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com" xmlns:foo="http://example.com">' +
'<image xlink:href="../editor/images/logo.png"/>' +
'<polyline id="se_test_elem" se:foo="bar" foo:bar="baz"/>' +
'</svg>'
);
var attrVal = document.getElementById('se_test_elem').getAttributeNS('http://svg-edit.googlecode.com', 'foo');
// This test makes sure import/export properly handles namespaced attributes
test('Test importing/exporting namespaced attributes', function () {
expect(5);
/* var setStr = */ svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com" xmlns:foo="http://example.com">' +
'<image xlink:href="../editor/images/logo.png"/>' +
'<polyline id="se_test_elem" se:foo="bar" foo:bar="baz"/>' +
'</svg>'
);
var attrVal = document.getElementById('se_test_elem').getAttributeNS('http://svg-edit.googlecode.com', 'foo');
equal(attrVal === 'bar', true, 'Preserved namespaced attribute on import');
//
// console.log('getSvgString' in svgCanvas)
equal(attrVal === 'bar', true, 'Preserved namespaced attribute on import');
//
// console.log('getSvgString' in svgCanvas)
var output = svgCanvas.getSvgString();
// } catch(e) {console.log(e)}
// console.log('output',output);
var hasXlink = output.indexOf('xmlns:xlink="http://www.w3.org/1999/xlink"') !== -1;
var hasSe = output.indexOf('xmlns:se=') !== -1;
var hasFoo = output.indexOf('xmlns:foo=') !== -1;
var hasAttr = output.indexOf('se:foo="bar"') !== -1;
var output = svgCanvas.getSvgString();
// } catch(e) {console.log(e)}
// console.log('output',output);
var hasXlink = output.indexOf('xmlns:xlink="http://www.w3.org/1999/xlink"') !== -1;
var hasSe = output.indexOf('xmlns:se=') !== -1;
var hasFoo = output.indexOf('xmlns:foo=') !== -1;
var hasAttr = output.indexOf('se:foo="bar"') !== -1;
equal(hasAttr, true, 'Preserved namespaced attribute on export');
equal(hasXlink, true, 'Included xlink: xmlns');
equal(hasSe, true, 'Included se: xmlns');
equal(hasFoo, false, 'Did not include foo: xmlns');
});
equal(hasAttr, true, 'Preserved namespaced attribute on export');
equal(hasXlink, true, 'Included xlink: xmlns');
equal(hasSe, true, 'Included se: xmlns');
equal(hasFoo, false, 'Did not include foo: xmlns');
});
test('Test import math elements inside a foreignObject', function () {
expect(4);
/* var set = */ svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<foreignObject id="fo" width="24" height="26" font-size="24"><math id="m" display="inline" xmlns="http://www.w3.org/1998/Math/MathML">' +
'<msub>' +
'<mi>A</mi>' +
'<mn>0</mn>' +
'</msub>' +
'</math>' +
'</foreignObject>' +
'</svg>'
);
var fo = document.getElementById('fo');
// we cannot use getElementById('math') because not all browsers understand MathML and do not know to use the @id attribute
// see Bug https://bugs.webkit.org/show_bug.cgi?id=35042
var math = fo.firstChild;
test('Test import math elements inside a foreignObject', function () {
expect(4);
/* var set = */ svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<foreignObject id="fo" width="24" height="26" font-size="24"><math id="m" display="inline" xmlns="http://www.w3.org/1998/Math/MathML">' +
'<msub>' +
'<mi>A</mi>' +
'<mn>0</mn>' +
'</msub>' +
'</math>' +
'</foreignObject>' +
'</svg>'
);
var fo = document.getElementById('fo');
// we cannot use getElementById('math') because not all browsers understand MathML and do not know to use the @id attribute
// see Bug https://bugs.webkit.org/show_bug.cgi?id=35042
var math = fo.firstChild;
equal(!!math, true, 'Math element exists');
equal(math.nodeName, 'math', 'Math element has the proper nodeName');
equal(math.getAttribute('id'), 'm', 'Math element has an id');
equal(math.namespaceURI, 'http://www.w3.org/1998/Math/MathML', 'Preserved MathML namespace');
});
equal(!!math, true, 'Math element exists');
equal(math.nodeName, 'math', 'Math element has the proper nodeName');
equal(math.getAttribute('id'), 'm', 'Math element has an id');
equal(math.namespaceURI, 'http://www.w3.org/1998/Math/MathML', 'Preserved MathML namespace');
});
test('Test importing SVG into existing drawing', function () {
expect(3);
test('Test importing SVG into existing drawing', function () {
expect(3);
/* var doc = */ svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">' +
'<g><title>Layer 1</title>' +
'<circle cx="200" cy="200" r="50" fill="blue"/>' +
'<ellipse cx="300" cy="100" rx="40" ry="30" fill="green"/>' +
'</g>' +
'</svg>'
);
/* var doc = */ svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">' +
'<g><title>Layer 1</title>' +
'<circle cx="200" cy="200" r="50" fill="blue"/>' +
'<ellipse cx="300" cy="100" rx="40" ry="30" fill="green"/>' +
'</g>' +
'</svg>'
);
svgCanvas.importSvgString(
'<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">' +
'<circle cx="50" cy="50" r="40" fill="yellow"/>' +
'<rect width="20" height="20" fill="blue"/>' +
'</svg>'
);
svgCanvas.importSvgString(
'<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">' +
'<circle cx="50" cy="50" r="40" fill="yellow"/>' +
'<rect width="20" height="20" fill="blue"/>' +
'</svg>'
);
var svgcontent = document.getElementById('svgcontent'),
circles = svgcontent.getElementsByTagNameNS(svgns, 'circle'),
rects = svgcontent.getElementsByTagNameNS(svgns, 'rect'),
ellipses = svgcontent.getElementsByTagNameNS(svgns, 'ellipse');
equal(circles.length, 2, 'Found two circles upon importing');
equal(rects.length, 1, 'Found one rectangle upon importing');
equal(ellipses.length, 1, 'Found one ellipse upon importing');
});
var svgcontent = document.getElementById('svgcontent'),
circles = svgcontent.getElementsByTagNameNS(svgns, 'circle'),
rects = svgcontent.getElementsByTagNameNS(svgns, 'rect'),
ellipses = svgcontent.getElementsByTagNameNS(svgns, 'ellipse');
equal(circles.length, 2, 'Found two circles upon importing');
equal(rects.length, 1, 'Found one rectangle upon importing');
equal(ellipses.length, 1, 'Found one ellipse upon importing');
});
test('Test importing SVG remaps IDs', function () {
expect(6);
test('Test importing SVG remaps IDs', function () {
expect(6);
/* var doc = */ svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">' +
'<g><title>Layer 1</title>' +
'<ellipse id="svg_1" cx="200" cy="200" rx="50" ry="20" fill="blue"/>' +
'<ellipse id="svg_2" cx="300" cy="100" rx="40" ry="30" fill="green"/>' +
'<ellipse id="svg_3" cx="300" cy="100" rx="40" ry="30" fill="green"/>' +
'</g>' +
'</svg>');
/* var doc = */ svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">' +
'<g><title>Layer 1</title>' +
'<ellipse id="svg_1" cx="200" cy="200" rx="50" ry="20" fill="blue"/>' +
'<ellipse id="svg_2" cx="300" cy="100" rx="40" ry="30" fill="green"/>' +
'<ellipse id="svg_3" cx="300" cy="100" rx="40" ry="30" fill="green"/>' +
'</g>' +
'</svg>');
svgCanvas.importSvgString(
'<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink">' +
'<defs>' +
'<linearGradient id="svg_2">' +
'<stop stop-color="red" offset="0"/>' +
'<stop stop-color="green" offset="1"/>' +
'</linearGradient>' +
'<rect id="svg_3" width="20" height="20" fill="blue" stroke="url(#svg_2)"/>' +
'</defs>' +
'<circle id="svg_1" cx="50" cy="50" r="40" fill="url(#svg_2)"/>' +
'<use id="svg_4" width="30" height="30" xl:href="#svg_3"/>' +
'</svg>'
);
svgCanvas.importSvgString(
'<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink">' +
'<defs>' +
'<linearGradient id="svg_2">' +
'<stop stop-color="red" offset="0"/>' +
'<stop stop-color="green" offset="1"/>' +
'</linearGradient>' +
'<rect id="svg_3" width="20" height="20" fill="blue" stroke="url(#svg_2)"/>' +
'</defs>' +
'<circle id="svg_1" cx="50" cy="50" r="40" fill="url(#svg_2)"/>' +
'<use id="svg_4" width="30" height="30" xl:href="#svg_3"/>' +
'</svg>'
);
var svgcontent = document.getElementById('svgcontent'),
circles = svgcontent.getElementsByTagNameNS(svgns, 'circle'),
rects = svgcontent.getElementsByTagNameNS(svgns, 'rect'),
// ellipses = svgcontent.getElementsByTagNameNS(svgns, 'ellipse'),
defs = svgcontent.getElementsByTagNameNS(svgns, 'defs'),
// grads = svgcontent.getElementsByTagNameNS(svgns, 'linearGradient'),
uses = svgcontent.getElementsByTagNameNS(svgns, 'use');
notEqual(circles.item(0).id, 'svg_1', 'Circle not re-identified');
notEqual(rects.item(0).id, 'svg_3', 'Rectangle not re-identified');
// TODO: determine why this test fails in WebKit browsers
// equal(grads.length, 1, 'Linear gradient imported');
var grad = defs.item(0).firstChild;
notEqual(grad.id, 'svg_2', 'Linear gradient not re-identified');
notEqual(circles.item(0).getAttribute('fill'), 'url(#svg_2)', 'Circle fill value not remapped');
notEqual(rects.item(0).getAttribute('stroke'), 'url(#svg_2)', 'Rectangle stroke value not remapped');
notEqual(uses.item(0).getAttributeNS(xlinkns, 'href'), '#svg_3');
});
var svgcontent = document.getElementById('svgcontent'),
circles = svgcontent.getElementsByTagNameNS(svgns, 'circle'),
rects = svgcontent.getElementsByTagNameNS(svgns, 'rect'),
// ellipses = svgcontent.getElementsByTagNameNS(svgns, 'ellipse'),
defs = svgcontent.getElementsByTagNameNS(svgns, 'defs'),
// grads = svgcontent.getElementsByTagNameNS(svgns, 'linearGradient'),
uses = svgcontent.getElementsByTagNameNS(svgns, 'use');
notEqual(circles.item(0).id, 'svg_1', 'Circle not re-identified');
notEqual(rects.item(0).id, 'svg_3', 'Rectangle not re-identified');
// TODO: determine why this test fails in WebKit browsers
// equal(grads.length, 1, 'Linear gradient imported');
var grad = defs.item(0).firstChild;
notEqual(grad.id, 'svg_2', 'Linear gradient not re-identified');
notEqual(circles.item(0).getAttribute('fill'), 'url(#svg_2)', 'Circle fill value not remapped');
notEqual(rects.item(0).getAttribute('stroke'), 'url(#svg_2)', 'Rectangle stroke value not remapped');
notEqual(uses.item(0).getAttributeNS(xlinkns, 'href'), '#svg_3');
});
});

128
test/units_test.js
View File

@ -2,82 +2,82 @@
/* globals $, svgedit, equals */
/* eslint-disable no-var */
$(function () {
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
// log function
QUnit.log = function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
function setUp () {
svgedit.units.init({
getBaseUnit: function () { return 'cm'; },
getHeight: function () { return 600; },
getWidth: function () { return 800; },
getRoundDigits: function () { return 4; },
getElement: function (elementId) { return document.getElementById(elementId); }
});
}
function setUp () {
svgedit.units.init({
getBaseUnit: function () { return 'cm'; },
getHeight: function () { return 600; },
getWidth: function () { return 800; },
getRoundDigits: function () { return 4; },
getElement: function (elementId) { return document.getElementById(elementId); }
});
}
test('Test svgedit.units package', function () {
expect(2);
ok(svgedit.units);
equals(typeof svgedit.units, typeof {});
});
test('Test svgedit.units package', function () {
expect(2);
ok(svgedit.units);
equals(typeof svgedit.units, typeof {});
});
test('Test svgedit.units.shortFloat()', function () {
expect(7);
test('Test svgedit.units.shortFloat()', function () {
expect(7);
setUp();
setUp();
ok(svgedit.units.shortFloat);
equals(typeof svgedit.units.shortFloat, typeof function () {});
ok(svgedit.units.shortFloat);
equals(typeof svgedit.units.shortFloat, typeof function () {});
var shortFloat = svgedit.units.shortFloat;
equals(shortFloat(0.00000001), 0);
equals(shortFloat(1), 1);
equals(shortFloat(3.45678), 3.4568);
equals(shortFloat(1.23443), 1.2344);
equals(shortFloat(1.23455), 1.2346);
});
var shortFloat = svgedit.units.shortFloat;
equals(shortFloat(0.00000001), 0);
equals(shortFloat(1), 1);
equals(shortFloat(3.45678), 3.4568);
equals(shortFloat(1.23443), 1.2344);
equals(shortFloat(1.23455), 1.2346);
});
test('Test svgedit.units.isValidUnit()', function () {
expect(18);
test('Test svgedit.units.isValidUnit()', function () {
expect(18);
setUp();
setUp();
ok(svgedit.units.isValidUnit);
equals(typeof svgedit.units.isValidUnit, typeof function () {});
ok(svgedit.units.isValidUnit);
equals(typeof svgedit.units.isValidUnit, typeof function () {});
var isValidUnit = svgedit.units.isValidUnit;
ok(isValidUnit('0'));
ok(isValidUnit('1'));
ok(isValidUnit('1.1'));
ok(isValidUnit('-1.1'));
ok(isValidUnit('.6mm'));
ok(isValidUnit('-.6cm'));
ok(isValidUnit('6000in'));
ok(isValidUnit('6px'));
ok(isValidUnit('6.3pc'));
ok(isValidUnit('-0.4em'));
ok(isValidUnit('-0.ex'));
ok(isValidUnit('40.123%'));
var isValidUnit = svgedit.units.isValidUnit;
ok(isValidUnit('0'));
ok(isValidUnit('1'));
ok(isValidUnit('1.1'));
ok(isValidUnit('-1.1'));
ok(isValidUnit('.6mm'));
ok(isValidUnit('-.6cm'));
ok(isValidUnit('6000in'));
ok(isValidUnit('6px'));
ok(isValidUnit('6.3pc'));
ok(isValidUnit('-0.4em'));
ok(isValidUnit('-0.ex'));
ok(isValidUnit('40.123%'));
equals(isValidUnit('id', 'uniqueId', document.getElementById('uniqueId')), true);
equals(isValidUnit('id', 'newId', document.getElementById('uniqueId')), true);
equals(isValidUnit('id', 'uniqueId'), false);
equals(isValidUnit('id', 'uniqueId', document.getElementById('nonUniqueId')), false);
});
equals(isValidUnit('id', 'uniqueId', document.getElementById('uniqueId')), true);
equals(isValidUnit('id', 'newId', document.getElementById('uniqueId')), true);
equals(isValidUnit('id', 'uniqueId'), false);
equals(isValidUnit('id', 'uniqueId', document.getElementById('nonUniqueId')), false);
});
test('Test svgedit.units.convertUnit()', function () {
expect(4);
test('Test svgedit.units.convertUnit()', function () {
expect(4);
setUp();
setUp();
ok(svgedit.units.convertUnit);
equals(typeof svgedit.units.convertUnit, typeof function () {});
// cm in default setup
equals(svgedit.units.convertUnit(42), 1.1113);
equals(svgedit.units.convertUnit(42, 'px'), 42);
});
ok(svgedit.units.convertUnit);
equals(typeof svgedit.units.convertUnit, typeof function () {});
// cm in default setup
equals(svgedit.units.convertUnit(42), 1.1113);
equals(svgedit.units.convertUnit(42, 'px'), 42);
});
});