(function() { var REFERENCE_RECT = { 'version': fabric.version, 'type': 'rect', 'originX': 'left', 'originY': 'top', 'left': 0, 'top': 0, 'width': 0, 'height': 0, 'fill': 'rgb(0,0,0)', 'stroke': null, 'strokeWidth': 1, 'strokeDashArray': null, 'strokeLineCap': 'butt', 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, 'scaleY': 1, 'angle': 0, 'flipX': false, 'flipY': false, 'opacity': 1, 'shadow': null, 'visible': true, 'backgroundColor': '', 'clipTo': null, 'fillRule': 'nonzero', 'paintFirst': 'fill', 'globalCompositeOperation': 'source-over', 'transformMatrix': null, 'rx': 0, 'ry': 0, 'skewX': 0, 'skewY': 0 }; QUnit.module('fabric.Rect'); QUnit.test('constructor', function(assert) { assert.ok(fabric.Rect); var rect = new fabric.Rect(); assert.ok(rect instanceof fabric.Rect); assert.ok(rect instanceof fabric.Object); assert.deepEqual(rect.get('type'), 'rect'); }); QUnit.test('complexity', function(assert) { var rect = new fabric.Rect(); assert.ok(typeof rect.complexity === 'function'); }); QUnit.test('cache properties', function(assert) { var rect = new fabric.Rect(); assert.ok(rect.cacheProperties.indexOf('rx') > -1, 'rx is in cacheProperties array'); assert.ok(rect.cacheProperties.indexOf('ry') > -1, 'ry is in cacheProperties array'); }); QUnit.test('toObject', function(assert) { var rect = new fabric.Rect(); assert.ok(typeof rect.toObject === 'function'); var object = rect.toObject(); assert.deepEqual(object, REFERENCE_RECT); }); QUnit.test('fabric.Rect.fromObject', function(assert) { var done = assert.async(); assert.ok(typeof fabric.Rect.fromObject === 'function'); fabric.Rect.fromObject(REFERENCE_RECT, function(rect) { assert.ok(rect instanceof fabric.Rect); assert.deepEqual(rect.toObject(), REFERENCE_RECT); var expectedObject = fabric.util.object.extend({ }, REFERENCE_RECT); expectedObject.fill = {'type': 'linear','coords': {'x1': 0,'y1': 0,'x2': 200,'y2': 0},'colorStops': [{'offset': '0','color': 'rgb(255,0,0)','opacity': 1},{'offset': '1','color': 'rgb(0,0,255)','opacity': 1}],'offsetX': 0,'offsetY': 0}; expectedObject.stroke = {'type': 'linear','coords': {'x1': 0,'y1': 0,'x2': 200,'y2': 0},'colorStops': [{'offset': '0','color': 'rgb(255,0,0)','opacity': 1},{'offset': '1','color': 'rgb(0,0,255)','opacity': 1}],'offsetX': 0,'offsetY': 0}; fabric.Rect.fromObject(expectedObject, function(rect2) { assert.ok(rect2.fill instanceof fabric.Gradient); assert.ok(rect2.stroke instanceof fabric.Gradient); done(); }); }); }); QUnit.test('fabric.Rect.fromObject with pattern fill', function(assert) { var done = assert.async(); var fillObj = { type: 'pattern', source: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==' }; fabric.Rect.fromObject({ fill: fillObj }, function(rect) { assert.ok(rect.fill instanceof fabric.Pattern); done(); }); }); QUnit.test('fabric.Rect.fromElement', function(assert) { assert.ok(typeof fabric.Rect.fromElement === 'function'); var elRect = fabric.document.createElement('rect'); fabric.Rect.fromElement(elRect, function(rect) { var expectedObject = fabric.util.object.extend({ }, REFERENCE_RECT); expectedObject.visible = false; assert.ok(rect instanceof fabric.Rect); assert.deepEqual(rect.toObject(), expectedObject); }); }); QUnit.test('fabric.Rect.fromElement with custom attributes', function(assert) { var elRectWithAttrs = fabric.document.createElement('rect'); elRectWithAttrs.setAttribute('x', 10); elRectWithAttrs.setAttribute('y', 20); elRectWithAttrs.setAttribute('width', 222); elRectWithAttrs.setAttribute('height', 333); elRectWithAttrs.setAttribute('rx', 11); elRectWithAttrs.setAttribute('ry', 12); elRectWithAttrs.setAttribute('fill', 'rgb(255,255,255)'); elRectWithAttrs.setAttribute('opacity', 0.45); elRectWithAttrs.setAttribute('stroke', 'blue'); elRectWithAttrs.setAttribute('stroke-width', 3); elRectWithAttrs.setAttribute('stroke-dasharray', '5, 2'); elRectWithAttrs.setAttribute('stroke-linecap', 'round'); elRectWithAttrs.setAttribute('stroke-linejoin', 'bevil'); elRectWithAttrs.setAttribute('stroke-miterlimit', 5); //elRectWithAttrs.setAttribute('transform', 'translate(-10,-20) scale(2) rotate(45) translate(5,10)'); fabric.Rect.fromElement(elRectWithAttrs, function(rectWithAttrs) { assert.ok(rectWithAttrs instanceof fabric.Rect); var expectedObject = fabric.util.object.extend(REFERENCE_RECT, { left: 10, top: 20, width: 222, height: 333, fill: 'rgb(255,255,255)', opacity: 0.45, stroke: 'blue', strokeWidth: 3, strokeDashArray: [5, 2], strokeLineCap: 'round', strokeLineJoin: 'bevil', strokeMiterLimit: 5, rx: 11, ry: 12 }); assert.deepEqual(rectWithAttrs.toObject(), expectedObject); }); }); QUnit.test('empty fromElement', function(assert) { fabric.Rect.fromElement(null, function(rect) { assert.equal(rect, null); }); }); QUnit.test('clone with rounded corners', function(assert) { var rect = new fabric.Rect({ width: 100, height: 100, rx: 20, ry: 30 }); rect.clone(function(clone) { assert.equal(clone.get('rx'), rect.get('rx')); assert.equal(clone.get('ry'), rect.get('ry')); }); }); QUnit.test('toSVG with rounded corners', function(assert) { var rect = new fabric.Rect({ width: 100, height: 100, rx: 20, ry: 30, strokeWidth: 0 }); var svg = rect.toSVG(); assert.equal(svg, '\n\n\n'); }); QUnit.test('toSVG with alpha colors fill', function(assert) { var rect = new fabric.Rect({ width: 100, height: 100, strokeWidth: 0, fill: 'rgba(255, 0, 0, 0.5)' }); var svg = rect.toSVG(); assert.equal(svg, '\n\n\n'); }); QUnit.test('toSVG with id', function(assert) { var rect = new fabric.Rect({id: 'myRect', width: 100, height: 100, strokeWidth: 0, fill: 'rgba(255, 0, 0, 0.5)' }); var svg = rect.toSVG(); assert.equal(svg, '\n\n\n'); }); QUnit.test('toSVG with alpha colors stroke', function(assert) { var rect = new fabric.Rect({ width: 100, height: 100, strokeWidth: 0, fill: '', stroke: 'rgba(255, 0, 0, 0.5)' }); var svg = rect.toSVG(); assert.equal(svg, '\n\n\n'); }); QUnit.test('toSVG with paintFirst set to stroke', function(assert) { var rect = new fabric.Rect({ width: 100, height: 100, paintFirst: 'stroke' }); var svg = rect.toSVG(); assert.equal(svg, '\n\n\n'); }); QUnit.test('toObject without default values', function(assert) { var options = { type: 'rect', width: 69, height: 50, left: 10, top: 20, version: fabric.version, }; var rect = new fabric.Rect(options); rect.includeDefaultValues = false; assert.deepEqual(rect.toObject(), options); }); QUnit.test('paintFirst life cycle', function(assert) { var done = assert.async(); var svg = ''; fabric.loadSVGFromString(svg, function(envlivedObjects) { var rect = envlivedObjects[0]; var rectObject = rect.toObject(); var rectSvg = rect.toSVG(); assert.equal(rect.paintFirst, 'stroke'); assert.equal(rectObject.paintFirst, 'stroke'); assert.ok(rectSvg.indexOf('paint-order="stroke"') > -1); done(); }); }); })();