7e3f9e037d
The SVGPathSeg API is being removed from the spec [1] and is being removed in Chromium 47 [2]. I implemented a drop-in polyfill[3] so svg-edit users are not broken as browsers migrate away from the path seg api. This patch simply imports the upstream pathseg.js and updates all dependencies. With this change all tests pass in Chrome 46 (with the path seg api), Chrome 47 (without the path seg api), and there are no changes to tests in Safari 9.01 or Firefox 43. I also manually tested svg-edit while developing the polyfill and could not find any broken features. [1] https://lists.w3.org/Archives/Public/www-svg/2015Jun/0044.html [2] https://groups.google.com/a/chromium.org/d/msg/blink-dev/EDC3cBg9mCU/OvElJgOWCgAJ [3] https://github.com/progers/pathseg
362 lines
9.1 KiB
HTML
362 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Unit Tests for coords.js</title>
|
|
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
|
|
<script src='../editor/jquery.js'></script>
|
|
<script src='../editor/svgedit.js'></script>
|
|
<script src='../editor/math.js'></script>
|
|
<script src='../editor/pathseg.js'></script>
|
|
<script src='../editor/browser.js'></script>
|
|
<script src='../editor/svgutils.js'></script>
|
|
<script src='../editor/units.js'></script>
|
|
<script src='../editor/svgtransformlist.js'></script>
|
|
<script src='../editor/coords.js'></script>
|
|
|
|
<script src='qunit/qunit.js'></script>
|
|
<script>
|
|
$(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();
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1 id='qunit-header'>Unit Tests for svgedit.coords</h1>
|
|
<h2 id='qunit-banner'></h2>
|
|
<h2 id='qunit-userAgent'></h2>
|
|
<ol id='qunit-tests'></ol>
|
|
<div id='root' style='visibility:hidden'></div>
|
|
</body>
|
|
</html>
|