(function() { var REFERENCE_PATH_OBJECT = { 'type': 'path', 'left': 100, 'top': 100, 'width': 200, 'height': 200, 'fill': 'red', 'overlayFill': null, 'stroke': 'blue', 'strokeWidth': 1, 'scaleX': 1, 'scaleY': 1, 'angle': 0, 'flipX': false, 'flipY': false, 'opacity': 1, 'path': [['M', 100, 100], ['L', 300, 100], ['L', 200, 300], ['z']], 'selectable': true }; function getPathElement(path) { var el = document.createElement('path'); el.setAttribute('d', path); el.setAttribute('fill', 'red'); el.setAttribute('stroke', 'blue'); el.setAttribute('troke-width', 3); return el; } function getPathObject(path) { return fabric.Path.fromElement(getPathElement(path)); } function makePathObject() { return getPathObject("M 100 100 L 300 100 L 200 300 z"); } module('fabric.Path'); test('constructor', function() { ok(fabric.Path); var path = makePathObject(); ok(path instanceof fabric.Path); ok(path instanceof fabric.Object); equals(path.get('type'), 'path'); var error; try { new fabric.Path(); } catch(err) { error = err; } ok(error, 'should throw error'); }); test('toString', function() { var path = makePathObject(); ok(typeof path.toString == 'function'); console.log(path.toString()); equals('#', path.toString()); }); test('toObject', function() { var path = makePathObject(); ok(typeof path.toObject == 'function'); same(REFERENCE_PATH_OBJECT, path.toObject()); }); test('toDatalessObject', function() { var path = makePathObject(); ok(typeof path.toDatalessObject == 'function'); same(REFERENCE_PATH_OBJECT, path.toDatalessObject()); var src = 'http://example.com/'; path.setSourcePath(src); same(fabric.util.object.extend(fabric.util.object.clone(REFERENCE_PATH_OBJECT), { path: src }), path.toDatalessObject()); }); test('complexity', function() { var path = makePathObject(); ok(typeof path.complexity == 'function'); }); test('fromObject', function() { ok(typeof fabric.Path.fromObject == 'function'); var path = fabric.Path.fromObject(REFERENCE_PATH_OBJECT); ok(path instanceof fabric.Path); same(REFERENCE_PATH_OBJECT, path.toObject()); }); test('fromElement', function() { ok(typeof fabric.Path.fromElement == 'function'); var elPath = document.createElement('path'); elPath.setAttribute('d', 'M 100 100 L 300 100 L 200 300 z'); elPath.setAttribute('fill', 'red'); elPath.setAttribute('fill-opacity', '1'); elPath.setAttribute('stroke', 'blue'); elPath.setAttribute('stroke-width', '1'); // TODO (kangax): to support multiple transformation keywords, we need to do proper matrix multiplication // elPath.setAttribute('transform', 'scale(2) translate(10, -20)'); elPath.setAttribute('transform', 'scale(2)'); var path = fabric.Path.fromElement(elPath); ok(path instanceof fabric.Path); same(fabric.util.object.extend(REFERENCE_PATH_OBJECT, { transformMatrix: [2, 0, 0, 2, 0, 0] }), path.toObject()); var ANGLE = 90; elPath.setAttribute('transform', 'rotate(' + ANGLE + ')'); path = fabric.Path.fromElement(elPath); same( [ Math.cos(ANGLE), Math.sin(ANGLE), -Math.sin(ANGLE), Math.cos(ANGLE), 0, 0 ], path.get('transformMatrix') ); }); test('multiple sequences in path commands', function() { var el = getPathElement('M100 100 l 200 200 300 300 400 -50 z'); var obj = fabric.Path.fromElement(el); same(['M', 100, 100], obj.path[0]); same(['l', 200, 200], obj.path[1]); same(['l', 300, 300], obj.path[2]); same(['l', 400, -50], obj.path[3]); el = getPathElement('c 0,-53.25604 43.17254,-96.42858 96.42857,-96.42857 53.25603,0 96.42857,43.17254 96.42857,96.42857'); obj = fabric.Path.fromElement(el); same(['c', 0, -53.25604, 43.17254, -96.42858, 96.42857, -96.42857], obj.path[0]); same(['c', 53.25603, 0, 96.42857, 43.17254, 96.42857, 96.42857], obj.path[1]); }); })();