diff --git a/test/svgutils_bbox_test.js b/test/svgutils_bbox_test.js index 0f1886a5..95b9874c 100644 --- a/test/svgutils_bbox_test.js +++ b/test/svgutils_bbox_test.js @@ -33,15 +33,15 @@ $(function () { var segList = path.pathSegList; var len = segList.numberOfItems; - var i, last_x, last_y; + var i; // , lastX, lastY; for (i = 0; i < len; ++i) { var seg = segList.getItem(i); var type = seg.pathSegType; - if (type == 1) {continue;} + if (type === 1) { continue; } var pts = []; - $.each(['',1,2], function(j, n) { - var x = seg['x'+n], y = seg['y'+n]; + $.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); @@ -49,13 +49,12 @@ $(function () { }); svgedit.path.replacePathSeg(type, i, pts, path); } - - //svgedit.utilities.reorientGrads(path, m); + // svgedit.utilities.reorientGrads(path, m); } - } + }; - var EPSILON = 0.001 - var svg = document.createElementNS(svgedit.NS.SVG, 'svg'); + var EPSILON = 0.001; + // var svg = document.createElementNS(svgedit.NS.SVG, 'svg'); var sandbox = document.getElementById('sandbox'); var svgroot = mockCreateSVGElement({ 'element': 'svg', @@ -63,20 +62,18 @@ $(function () { }); sandbox.appendChild(svgroot); - module('svgedit.utilities_bbox', { - setup: function() { + 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() { + teardown: function () { } }); - - test('Test svgedit.utilities package', function() { + test('Test svgedit.utilities package', function () { ok(svgedit.utilities); ok(svgedit.utilities.getBBoxWithTransform); ok(svgedit.utilities.getStrokedBBox); @@ -84,14 +81,13 @@ $(function () { 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'} + 'attr': {'id': 'path', 'd': 'M0,1 L2,3'} }); svgroot.appendChild(elem); bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions); @@ -104,8 +100,8 @@ $(function () { '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}); + bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions); + deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); equal(mockAddSvgElementFromJsonCallCount, 0); svgroot.removeChild(elem); @@ -114,374 +110,358 @@ $(function () { '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); + 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'} + '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); - + 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)'} + 'attr': {'id': 'path', 'd': 'M10,10 L20,20', 'transform': 'rotate(45 10,10)'} }); - svgroot.appendChild( elem) + 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); + 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)'} + '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); + 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}; + 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 + ')'} + '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); + 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); - + 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} + '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); + 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); - + 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)'} + 'attr': {'id': 'ellipse1', 'cx': '100', 'cy': '100', 'rx': '50', 'ry': '50', 'transform': 'rotate(45 100,100)'} }); - svgroot.appendChild( elem); + svgroot.appendChild(elem); mockAddSvgElementFromJsonCallCount = 0; - bbox = getBBoxWithTransform( elem, mockAddSvgElementFromJson, mockPathActions); + 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); - + 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 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 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} + '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); + 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 + ')' + 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} + '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); + 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} + 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. + txInRotatedSpace = Math.sqrt(tx * tx + ty * ty); // translate in rotated 45 space. tyInRotatedSpace = 0; - matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')' + 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} + '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); - + 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} + '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); - + 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} + '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) + 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); - + 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 strokeWidth = 10; var elem = mockCreateSVGElement({ 'element': 'path', - 'attr': { 'id': 'path', 'd': 'M0,1 L2,3', 'stroke-width': strokeWidth} + '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); + 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} + '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); + 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} + '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); + 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} + '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); - + 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'} + '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); + 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'} + '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); + 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'} + '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); + 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'} + '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); - + 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'} + '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); + 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'} + '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); + 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'} + '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); + 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'} + '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); - + 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) { + function radians (degrees) { return degrees * Math.PI / 180; } - function rotatePoint( point, angle, origin) { - if( !origin) + 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); + 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 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); @@ -495,5 +475,4 @@ $(function () { height: (maxy - miny) }; } - }); diff --git a/test/test1.js b/test/test1.js index d3e02c0c..97301b0a 100644 --- a/test/test1.js +++ b/test/test1.js @@ -10,17 +10,19 @@ $(function () { }; // 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], + dimensions: [640, 480], initFill: { color: 'FF0000', // solid red opacity: 1 @@ -37,211 +39,229 @@ $(function () { extensions: ['ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js'], initTool: 'select', wireframe: false - }), - svgroot = document.getElementById("svgroot"), - svgdoc = svgroot.documentElement, - svgns = "http://www.w3.org/2000/svg", - xlinkns = "http://www.w3.org/1999/xlink"; + }); + 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("" + - "" + - "" + - ""); + svgCanvas.setSvgString( + "" + + "" + + "" + + '' + ); - var p1 = document.getElementById("p1"), - p2 = document.getElementById("p2"), - d_abs = 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' + d_abs); + // 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("" + - "" + - "" + - "" + - "" + - ""); + svgCanvas.setSvgString( + "" + + "" + + "" + + "" + + "" + + '' + ); - 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 element'); - equal(fu, null, 'Removed element that had a foreign href'); - equal(nfu, null, 'Removed element that had no href'); -}); + equal((u && u.nodeName === 'use'), true, 'Did not import element'); + equal(fu, null, 'Removed element that had a foreign href'); + equal(nfu, null, 'Removed 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(''+ - 'words' + - ''); + svgCanvas.setSvgString( + '' + + 'words' + + '' + ); - var t = document.getElementById('the-text'); + var t = document.getElementById('the-text'); - equal(true, (t && t.nodeName === 'text'), 'Did not import element'); - equal(null, t.getAttribute("d"), "Imported a with a d attribute"); -}); + equal(true, (t && t.nodeName === 'text'), 'Did not import element'); + equal(null, t.getAttribute('d'), 'Imported a 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(''+ - '' + - '' + - ''); - 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( + '' + + '' + + '' + + '' + ); + 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 has_xlink = output.indexOf('xmlns:xlink="http://www.w3.org/1999/xlink"') !== -1; - var has_se = output.indexOf('xmlns:se=') !== -1; - var has_foo = output.indexOf('xmlns:foo=') !== -1; - var has_attr = 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(has_attr, true, "Preserved namespaced attribute on export"); - equal(has_xlink, true, "Included xlink: xmlns"); - equal(has_se, true, "Included se: xmlns"); - equal(has_foo, 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(''+ - ''+ - ''+ - 'A'+ - '0'+ - ''+ - ''+ - ''+ + test('Test import math elements inside a foreignObject', function () { + expect(4); + /* var set = */ svgCanvas.setSvgString( + '' + + '' + + '' + + 'A' + + '0' + + '' + + '' + + '' + + '' + ); + 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'); + }); + + test('Test importing SVG into existing drawing', function () { + expect(3); + + /* var doc = */ svgCanvas.setSvgString( + '' + + 'Layer 1' + + '' + + '' + + '' + + '' + ); + + svgCanvas.importSvgString( + '' + + '' + + '' + + '' + ); + + 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); + + /* var doc = */ svgCanvas.setSvgString( + '' + + 'Layer 1' + + '' + + '' + + '' + + '' + ''); - 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"); -}); - -test("Test importing SVG into existing drawing", function() { - expect(3); - - var doc = svgCanvas.setSvgString(''+ - 'Layer 1'+ - ''+ - ''+ - ''+ - ''); - - svgCanvas.importSvgString(''+ - ''+ - ''+ - ''); - - 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); - - var doc = svgCanvas.setSvgString(''+ - 'Layer 1'+ - ''+ - ''+ - ''+ - ''+ - ''); - - svgCanvas.importSvgString(''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''); - - 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"); -}); + svgCanvas.importSvgString( + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + ); + + 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'); + }); });