(function() {
var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/greyfloral.png') : '../fixtures/greyfloral.png';
function setSrc(img, src, callback) {
img.onload = callback;
img.src = src;
}
QUnit.module('fabric.Pattern');
var img = fabric.document.createElement('img');
setSrc(img, IMG_SRC);
function createPattern(callback) {
return new fabric.Pattern({
source: img
}, callback);
}
QUnit.test('constructor', function(assert) {
assert.ok(fabric.Pattern);
var pattern = createPattern();
assert.ok(pattern instanceof fabric.Pattern, 'should inherit from fabric.Pattern');
});
QUnit.test('constructor with source string and with callback', function(assert) {
var done = assert.async();
function callback(pattern) {
assert.equal(pattern.source.complete, true, 'pattern source has been loaded');
done();
}
new fabric.Pattern({
source: IMG_SRC
}, callback);
});
QUnit.test('properties', function(assert) {
var pattern = createPattern();
assert.equal(pattern.source, img);
assert.equal(pattern.repeat, 'repeat');
assert.equal(pattern.offsetX, 0);
assert.equal(pattern.offsetY, 0);
assert.equal(pattern.crossOrigin, '');
});
QUnit.test('toObject', function(assert) {
var pattern = createPattern();
assert.ok(typeof pattern.toObject === 'function');
var object = pattern.toObject();
assert.ok(object.source.indexOf('fixtures/greyfloral.png') > -1);
assert.equal(object.repeat, 'repeat');
assert.equal(object.offsetX, 0);
assert.equal(object.offsetY, 0);
assert.equal(object.patternTransform, null);
var patternWithGetSource = new fabric.Pattern({
source: function () {return fabric.document.createElement('canvas');}
});
var object2 = patternWithGetSource.toObject();
assert.equal(object2.source, 'function () {return fabric.document.createElement(\'canvas\');}');
assert.equal(object2.repeat, 'repeat');
});
QUnit.test('toObject with custom props', function(assert) {
var pattern = createPattern();
pattern.patternTransform = [1, 0, 0, 2, 0, 0];
pattern.id = 'myId';
var object = pattern.toObject(['id']);
assert.equal(object.id, 'myId');
assert.deepEqual(object.patternTransform, pattern.patternTransform);
});
QUnit.test('toObject with custom props', function(assert) {
var pattern = createPattern();
pattern.patternTransform = [1, 0, 0, 2, 0, 0];
pattern.id = 'myId';
var object = pattern.toObject(['id']);
assert.equal(object.id, 'myId');
assert.deepEqual(object.patternTransform, pattern.patternTransform);
});
QUnit.test('toObject with crossOrigin', function(assert) {
var pattern = new fabric.Pattern({
source: IMG_SRC,
crossOrigin: 'anonymous'
});
var object = pattern.toObject();
assert.equal(object.crossOrigin, 'anonymous');
});
QUnit.test('fromObject with crossOrigin', function(assert) {
var pattern = new fabric.Pattern({
source: IMG_SRC,
crossOrigin: 'anonymous'
});
var object = pattern.toObject();
var pattern2 = new fabric.Pattern(object);
assert.equal(pattern2.crossOrigin, 'anonymous');
});
QUnit.test('toLive', function(assert) {
var pattern = createPattern();
var canvas = new fabric.StaticCanvas(null, {enableRetinaScaling: false});
assert.ok(typeof pattern.toLive === 'function');
var created = pattern.toLive(canvas.contextContainer);
assert.equal(created.toString(), '[object CanvasPattern]', 'is a gradient for canvas radial');
});
QUnit.test('pattern serialization / deserialization (function)', function(assert) {
var patternSourceCanvas, padding;
var pattern = new fabric.Pattern({
source: function() {
patternSourceCanvas.setDimensions({
width: img.width + padding,
height: img.height + padding
});
return patternSourceCanvas.getElement();
},
repeat: 'repeat'
});
var obj = pattern.toObject();
var patternDeserialized = new fabric.Pattern(obj);
assert.equal(typeof patternDeserialized.source, 'function');
assert.equal(patternDeserialized.repeat, 'repeat');
});
QUnit.test('pattern serialization / deserialization (image source)', function(assert) {
var pattern = createPattern();
var obj = pattern.toObject();
// node-canvas doesn't give
"src"
var patternDeserialized = new fabric.Pattern(obj);
assert.equal(typeof patternDeserialized.source, 'object');
assert.equal(patternDeserialized.repeat, 'repeat');
});
QUnit.test('toSVG', function(assert) {
fabric.Object.__uid = 0;
var pattern = createPattern();
var rect = new fabric.Rect({ width: 500, height: 500 });
var expectedSVG = '\n\n\n';
assert.ok(typeof pattern.toSVG === 'function');
assert.equal(pattern.toSVG(rect), expectedSVG, 'SVG match');
});
QUnit.test('toSVG repeat-y', function(assert) {
fabric.Object.__uid = 0;
var pattern = createPattern();
pattern.repeat = 'repeat-y';
var rect = new fabric.Rect({ width: 500, height: 500 });
var expectedSVG = '\n\n\n';
assert.ok(typeof pattern.toSVG === 'function');
assert.equal(pattern.toSVG(rect), expectedSVG, 'SVG match repeat-y');
});
QUnit.test('toSVG repeat-x', function(assert) {
fabric.Object.__uid = 0;
var pattern = createPattern();
pattern.repeat = 'repeat-x';
var rect = new fabric.Rect({ width: 500, height: 500 });
var expectedSVG = '\n\n\n';
assert.ok(typeof pattern.toSVG === 'function');
assert.equal(pattern.toSVG(rect), expectedSVG, 'SVG match repeat-x');
});
QUnit.test('toSVG no-repeat', function(assert) {
fabric.Object.__uid = 0;
var pattern = createPattern();
pattern.repeat = 'no-repeat';
var rect = new fabric.Rect({ width: 500, height: 500 });
var expectedSVG = '\n\n\n';
assert.ok(typeof pattern.toSVG === 'function');
assert.equal(pattern.toSVG(rect), expectedSVG, 'SVG match no-repeat');
});
QUnit.test('toSVG no-repeat offsetX and offsetY', function(assert) {
fabric.Object.__uid = 0;
var pattern = createPattern();
pattern.repeat = 'no-repeat';
pattern.offsetX = 50;
pattern.offsetY = -50;
var rect = new fabric.Rect({ width: 500, height: 500 });
var expectedSVG = '\n\n\n';
assert.ok(typeof pattern.toSVG === 'function');
assert.equal(pattern.toSVG(rect), expectedSVG, 'SVG match no-repat offsetX and offsetY');
});
QUnit.test('initPattern from object', function(assert) {
var fillObj = {
type: 'pattern',
source: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg=='
};
var obj = new fabric.Object({ fill: fillObj });
assert.ok(obj.fill instanceof fabric.Pattern, 'the pattern is enlived');
});
})();