mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-05-24 21:23:44 +00:00
Extend test coverage (#3999)
* extended test coverage * new file * fixed lint
This commit is contained in:
Andrea Bogazzi
GitHub
parent
57cc67300f
commit
553669c938
8 changed files with 731 additions and 132 deletions
2
test.js
2
test.js
|
|
@ -3,6 +3,7 @@ var testrunner = require('qunit');
|
|||
testrunner.options.log.summary = true;
|
||||
testrunner.options.log.tests = false;
|
||||
testrunner.options.log.assertions = false;
|
||||
testrunner.options.log.coverage = true;
|
||||
|
||||
testrunner.options.coverage = true;
|
||||
testrunner.options.maxBlockDuration = 120000;
|
||||
|
|
@ -11,6 +12,7 @@ testrunner.run({
|
|||
deps: "./test/fixtures/test_script.js",
|
||||
code: "./dist/fabric.js",
|
||||
tests: [
|
||||
'./test/unit/animation.js',
|
||||
'./test/unit/rect.js',
|
||||
'./test/unit/ellipse.js',
|
||||
'./test/unit/color.js',
|
||||
|
|
|
|||
571
test/unit/animation.js
Normal file
571
test/unit/animation.js
Normal file
|
|
@ -0,0 +1,571 @@
|
|||
(function() {
|
||||
QUnit.module('fabric.util.animate');
|
||||
|
||||
asyncTest('animateColor', function() {
|
||||
function testing(val) {
|
||||
notEqual(val, 'rgba(0,0,255,1)', 'color is not blue');
|
||||
}
|
||||
ok(typeof fabric.util.animateColor === 'function', 'animateColor is a function');
|
||||
fabric.util.animateColor('red', 'blue', 16, {
|
||||
onComplete: function() {
|
||||
// animate color need some fixing
|
||||
// equal(val, 'rgba(0,0,255,1)', 'color is blue')
|
||||
start();
|
||||
},
|
||||
onChange: testing,
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('animate', function() {
|
||||
var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 43 });
|
||||
|
||||
ok(typeof object.animate == 'function');
|
||||
|
||||
object.animate('left', 40);
|
||||
ok(true, 'animate without options does not crash');
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
equal(40, Math.round(object.getLeft()), 'left has been animated to 40');
|
||||
start();
|
||||
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
asyncTest('animate with increment', function() {
|
||||
var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 43 });
|
||||
|
||||
object.animate('left', '+=40');
|
||||
ok(true, 'animate without options does not crash');
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
equal(Math.round(object.getLeft()), 60, 'left has been increased by 40');
|
||||
start();
|
||||
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
asyncTest('animate with keypath', function() {
|
||||
var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 43, shadow: { offsetX: 20 } });
|
||||
|
||||
object.animate('shadow.offsetX', 100);
|
||||
ok(true, 'animate without options does not crash');
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
equal(Math.round(object.shadow.offsetX), 100, 'property has been animated');
|
||||
start();
|
||||
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
asyncTest('animate with decrement', function() {
|
||||
var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 43 });
|
||||
|
||||
object.animate('left', '-=40');
|
||||
ok(true, 'animate without options does not crash');
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
equal(Math.round(object.getLeft()), -20, 'left has been decreased by 40');
|
||||
start();
|
||||
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
asyncTest('animate with object', function() {
|
||||
var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 43 });
|
||||
|
||||
ok(typeof object.animate == 'function');
|
||||
|
||||
object.animate({ left: 40});
|
||||
ok(true, 'animate without options does not crash');
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
equal(40, Math.round(object.getLeft()));
|
||||
start();
|
||||
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
asyncTest('animate multiple properties', function() {
|
||||
var object = new fabric.Object({ left: 123, top: 124 });
|
||||
|
||||
object.animate({ left: 223, top: 224 });
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
equal(223, Math.round(object.get('left')));
|
||||
equal(224, Math.round(object.get('top')));
|
||||
|
||||
start();
|
||||
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
asyncTest('animate multiple properties with callback', function() {
|
||||
|
||||
var object = new fabric.Object({ left: 0, top: 0 });
|
||||
|
||||
var changedInvocations = 0;
|
||||
var completeInvocations = 0;
|
||||
|
||||
object.animate({ left: 1, top: 1 }, {
|
||||
duration: 1,
|
||||
onChange: function() {
|
||||
changedInvocations++;
|
||||
},
|
||||
onComplete: function() {
|
||||
completeInvocations++;
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
equal(Math.round(object.get('left')), 1);
|
||||
equal(Math.round(object.get('top')), 1);
|
||||
|
||||
//equal(changedInvocations, 2);
|
||||
equal(completeInvocations, 1);
|
||||
|
||||
start();
|
||||
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
asyncTest('animate with abort', function() {
|
||||
var object = new fabric.Object({ left: 123, top: 124 });
|
||||
|
||||
var context;
|
||||
object.animate({ left: 223, top: 224 }, {
|
||||
abort: function() {
|
||||
context = this;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
equal(123, Math.round(object.get('left')));
|
||||
equal(124, Math.round(object.get('top')));
|
||||
|
||||
equal(context, object, 'abort should be called in context of an object');
|
||||
|
||||
start();
|
||||
|
||||
}, 100);
|
||||
});
|
||||
|
||||
asyncTest('animate easing easeInQuad', function() {
|
||||
ok(typeof fabric.util.ease.easeInQuad === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInQuad
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('animate easing easeOutQuad', function() {
|
||||
ok(typeof fabric.util.ease.easeOutQuad === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeOutQuad
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('animate easing easeInOutQuad', function() {
|
||||
ok(typeof fabric.util.ease.easeInOutQuad === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInOutQuad
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('animate easing easeInCubic', function() {
|
||||
ok(typeof fabric.util.ease.easeInCubic === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInCubic
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('animate easing easeOutCubic', function() {
|
||||
ok(typeof fabric.util.ease.easeOutCubic === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeOutCubic
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('animate easing easeInOutCubic', function() {
|
||||
ok(typeof fabric.util.ease.easeInOutCubic === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInOutCubic
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('animate easing easeInQuart', function() {
|
||||
ok(typeof fabric.util.ease.easeInQuart === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInQuart
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('animate easing easeOutQuart', function() {
|
||||
ok(typeof fabric.util.ease.easeOutQuart === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeOutQuart
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('animate easing easeInOutQuart', function() {
|
||||
ok(typeof fabric.util.ease.easeInOutQuart === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInOutQuart
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('animate easing easeInQuint', function() {
|
||||
ok(typeof fabric.util.ease.easeInQuint === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInQuint
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('animate easing easeOutQuint', function() {
|
||||
ok(typeof fabric.util.ease.easeOutQuint === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeOutQuint
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// easeInOutQuint: easeInOutQuint,
|
||||
asyncTest('animate easing easeInOutQuint', function() {
|
||||
ok(typeof fabric.util.ease.easeInOutQuint === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInOutQuint
|
||||
});
|
||||
});
|
||||
|
||||
// easeInSine: easeInSine,
|
||||
asyncTest('animate easing easeInSine', function() {
|
||||
ok(typeof fabric.util.ease.easeInSine === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInSine
|
||||
});
|
||||
});
|
||||
|
||||
// easeOutSine: easeOutSine,
|
||||
asyncTest('animate easing easeOutSine', function() {
|
||||
ok(typeof fabric.util.ease.easeOutSine === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeOutSine
|
||||
});
|
||||
});
|
||||
|
||||
// easeInOutSine: easeInOutSine,
|
||||
asyncTest('animate easing easeInOutSine', function() {
|
||||
ok(typeof fabric.util.ease.easeInOutSine === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInOutSine
|
||||
});
|
||||
});
|
||||
|
||||
// easeInExpo: easeInExpo,
|
||||
asyncTest('animate easing easeInExpo', function() {
|
||||
ok(typeof fabric.util.ease.easeInExpo === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInExpo
|
||||
});
|
||||
});
|
||||
|
||||
// easeOutExpo: easeOutExpo,
|
||||
asyncTest('animate easing easeOutExpo', function() {
|
||||
ok(typeof fabric.util.ease.easeOutExpo === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeOutExpo
|
||||
});
|
||||
});
|
||||
|
||||
// easeInOutExpo: easeInOutExpo,
|
||||
asyncTest('animate easing easeInOutExpo', function() {
|
||||
ok(typeof fabric.util.ease.easeInOutExpo === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInOutExpo
|
||||
});
|
||||
});
|
||||
|
||||
// easeInCirc: easeInCirc,
|
||||
asyncTest('animate easing easeInCirc', function() {
|
||||
ok(typeof fabric.util.ease.easeInCirc === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInCirc
|
||||
});
|
||||
});
|
||||
|
||||
// easeOutCirc: easeOutCirc,
|
||||
asyncTest('animate easing easeOutCirc', function() {
|
||||
ok(typeof fabric.util.ease.easeOutCirc === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeOutCirc
|
||||
});
|
||||
});
|
||||
|
||||
// easeInOutCirc: easeInOutCirc,
|
||||
asyncTest('animate easing easeInOutCirc', function() {
|
||||
ok(typeof fabric.util.ease.easeInOutCirc === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInOutCirc
|
||||
});
|
||||
});
|
||||
|
||||
// easeInElastic: easeInElastic,
|
||||
asyncTest('animate easing easeInElastic', function() {
|
||||
ok(typeof fabric.util.ease.easeInElastic === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInElastic
|
||||
});
|
||||
});
|
||||
|
||||
// easeOutElastic: easeOutElastic,
|
||||
asyncTest('animate easing easeOutElastic', function() {
|
||||
ok(typeof fabric.util.ease.easeOutElastic === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeOutElastic
|
||||
});
|
||||
});
|
||||
|
||||
// easeInOutElastic: easeInOutElastic,
|
||||
asyncTest('animate easing easeInOutElastic', function() {
|
||||
ok(typeof fabric.util.ease.easeInOutElastic === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInOutElastic
|
||||
});
|
||||
});
|
||||
|
||||
// easeInBack: easeInBack,
|
||||
asyncTest('animate easing easeInBack', function() {
|
||||
ok(typeof fabric.util.ease.easeInBack === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInBack
|
||||
});
|
||||
});
|
||||
|
||||
// easeOutBack: easeOutBack,
|
||||
asyncTest('animate easing easeOutBack', function() {
|
||||
ok(typeof fabric.util.ease.easeOutBack === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeOutBack
|
||||
});
|
||||
});
|
||||
|
||||
// easeInOutBack: easeInOutBack,
|
||||
asyncTest('animate easing easeInOutBack', function() {
|
||||
ok(typeof fabric.util.ease.easeInOutBack === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInOutBack
|
||||
});
|
||||
});
|
||||
|
||||
// easeInBounce: easeInBounce,
|
||||
asyncTest('animate easing easeInBounce', function() {
|
||||
ok(typeof fabric.util.ease.easeInBounce === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInBounce
|
||||
});
|
||||
});
|
||||
|
||||
// easeOutBounce: easeOutBounce,
|
||||
asyncTest('animate easing easeOutBounce', function() {
|
||||
ok(typeof fabric.util.ease.easeOutBounce === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeOutBounce
|
||||
});
|
||||
});
|
||||
|
||||
// easeInOutBounce: easeInOutBounce
|
||||
asyncTest('animate easing easeInOutBounce', function() {
|
||||
ok(typeof fabric.util.ease.easeInOutBounce === 'function');
|
||||
var object = new fabric.Object({ left: 0 });
|
||||
object.animate({ left: 100 }, {
|
||||
onComplete: function() {
|
||||
equal(Math.round(object.left), 100, 'animation ended correctly');
|
||||
start();
|
||||
},
|
||||
duration: 160,
|
||||
easing: fabric.util.ease.easeInOutBounce
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
@ -1486,6 +1486,44 @@
|
|||
deepEqual(canvas.vptCoords.br, new fabric.Point(30 + canvas.getWidth() / 2, canvas.getHeight() / 2 - 30), 'tl is 0,0');
|
||||
});
|
||||
|
||||
test('_isRetinaScaling', function() {
|
||||
canvas.enableRetinaScaling = true;
|
||||
fabric.devicePixelRatio = 2;
|
||||
var isScaling = canvas._isRetinaScaling();
|
||||
equal(isScaling, true, 'retina > 1 and enabled');
|
||||
|
||||
canvas.enableRetinaScaling = false;
|
||||
fabric.devicePixelRatio = 2;
|
||||
var isScaling = canvas._isRetinaScaling();
|
||||
equal(isScaling, false, 'retina > 1 and disabled');
|
||||
|
||||
canvas.enableRetinaScaling = false;
|
||||
fabric.devicePixelRatio = 1;
|
||||
var isScaling = canvas._isRetinaScaling();
|
||||
equal(isScaling, false, 'retina = 1 and disabled');
|
||||
|
||||
canvas.enableRetinaScaling = true;
|
||||
fabric.devicePixelRatio = 1;
|
||||
var isScaling = canvas._isRetinaScaling();
|
||||
equal(isScaling, false, 'retina = 1 and enabled');
|
||||
});
|
||||
|
||||
test('getRetinaScaling', function() {
|
||||
canvas.enableRetinaScaling = true;
|
||||
fabric.devicePixelRatio = 1;
|
||||
var scaling = canvas.getRetinaScaling();
|
||||
equal(scaling, 1, 'retina is devicePixelRatio');
|
||||
|
||||
fabric.devicePixelRatio = 2;
|
||||
var scaling = canvas.getRetinaScaling();
|
||||
equal(scaling, 2, 'retina is devicePixelRatio');
|
||||
|
||||
fabric.devicePixelRatio = 2;
|
||||
canvas.enableRetinaScaling = false;
|
||||
var scaling = canvas.getRetinaScaling();
|
||||
equal(scaling, 1, 'retina is disabled, 1');
|
||||
});
|
||||
|
||||
//how to test with an exception?
|
||||
/*asyncTest('options in setBackgroundImage from invalid URL', function() {
|
||||
canvas.backgroundImage = null;
|
||||
|
|
|
|||
|
|
@ -175,15 +175,21 @@
|
|||
});
|
||||
|
||||
test('toLive linearGradient', function() {
|
||||
var el = fabric.document.createElement('canvas');
|
||||
var canvas = fabric.isLikelyNode ? fabric.createCanvasForNode() : new fabric.StaticCanvas(el);
|
||||
var gradient = createLinearGradient();
|
||||
|
||||
ok(typeof gradient.toLive == 'function');
|
||||
ok(typeof gradient.toLive === 'function');
|
||||
var gradientCtx = gradient.toLive(canvas.contextContainer);
|
||||
equal(gradientCtx.toString(), '[object CanvasGradient]', 'is a gradient for canvas radial');
|
||||
});
|
||||
|
||||
test('toLive radialGradient', function() {
|
||||
var el = fabric.document.createElement('canvas');
|
||||
var canvas = fabric.isLikelyNode ? fabric.createCanvasForNode() : new fabric.StaticCanvas(el);
|
||||
var gradient = createRadialGradient();
|
||||
|
||||
ok(typeof gradient.toLive == 'function');
|
||||
ok(typeof gradient.toLive === 'function');
|
||||
var gradientCtx = gradient.toLive(canvas.contextContainer);
|
||||
equal(gradientCtx.toString(), '[object CanvasGradient]', 'is a gradient for canvas radial');
|
||||
});
|
||||
|
||||
test('fromElement linearGradient', function() {
|
||||
|
|
|
|||
|
|
@ -732,90 +732,6 @@
|
|||
}, 1000);
|
||||
});
|
||||
|
||||
asyncTest('animate', function() {
|
||||
var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 43 });
|
||||
|
||||
ok(typeof object.animate == 'function');
|
||||
|
||||
object.animate('left', 40);
|
||||
ok(true, 'animate without options does not crash');
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
equal(40, Math.round(object.getLeft()));
|
||||
start();
|
||||
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
asyncTest('animate multiple properties', function() {
|
||||
var object = new fabric.Object({ left: 123, top: 124 });
|
||||
|
||||
object.animate({ left: 223, top: 224 });
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
equal(223, Math.round(object.get('left')));
|
||||
equal(224, Math.round(object.get('top')));
|
||||
|
||||
start();
|
||||
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
asyncTest('animate multiple properties with callback', function() {
|
||||
|
||||
var object = new fabric.Object({ left: 0, top: 0 });
|
||||
|
||||
var changedInvocations = 0;
|
||||
var completeInvocations = 0;
|
||||
|
||||
object.animate({ left: 1, top: 1 }, {
|
||||
duration: 1,
|
||||
onChange: function() {
|
||||
changedInvocations++;
|
||||
},
|
||||
onComplete: function() {
|
||||
completeInvocations++;
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
equal(Math.round(object.get('left')), 1);
|
||||
equal(Math.round(object.get('top')), 1);
|
||||
|
||||
//equal(changedInvocations, 2);
|
||||
equal(completeInvocations, 1);
|
||||
|
||||
start();
|
||||
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
asyncTest('animate with abort', function() {
|
||||
var object = new fabric.Object({ left: 123, top: 124 });
|
||||
|
||||
var context;
|
||||
object.animate({ left: 223, top: 224 }, {
|
||||
abort: function() {
|
||||
context = this;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
equal(123, Math.round(object.get('left')));
|
||||
equal(124, Math.round(object.get('top')));
|
||||
|
||||
equal(context, object, 'abort should be called in context of an object');
|
||||
|
||||
start();
|
||||
|
||||
}, 100);
|
||||
});
|
||||
|
||||
test('observable', function() {
|
||||
var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 43 });
|
||||
|
||||
|
|
|
|||
|
|
@ -95,8 +95,11 @@
|
|||
|
||||
test('toLive', function() {
|
||||
var pattern = createPattern();
|
||||
|
||||
ok(typeof pattern.toLive == 'function');
|
||||
var el = fabric.document.createElement('canvas');
|
||||
var canvas = fabric.isLikelyNode ? fabric.createCanvasForNode() : new fabric.StaticCanvas(el);
|
||||
ok(typeof pattern.toLive === 'function');
|
||||
var created = pattern.toLive(canvas.contextContainer);
|
||||
equal(created.toString(), '[object CanvasPattern]', 'is a gradient for canvas radial');
|
||||
});
|
||||
|
||||
test('pattern serialization / deserialization (function)', function() {
|
||||
|
|
@ -143,4 +146,13 @@
|
|||
// TODO: test toSVG
|
||||
});
|
||||
|
||||
test('initPattern from object', function() {
|
||||
var fillObj = {
|
||||
type: 'pattern',
|
||||
source: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg=='
|
||||
};
|
||||
var obj = new fabric.Object({ fill: fillObj });
|
||||
ok(obj.fill instanceof fabric.Pattern, 'the pattern is enlived');
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -86,6 +86,17 @@
|
|||
});
|
||||
});
|
||||
|
||||
asyncTest('fabric.Rect.fromObject with pattern fill', function() {
|
||||
var fillObj = {
|
||||
type: 'pattern',
|
||||
source: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg=='
|
||||
};
|
||||
fabric.Rect.fromObject({ fill: fillObj }, function(rect) {
|
||||
ok(rect.fill instanceof fabric.Pattern);
|
||||
start();
|
||||
});
|
||||
});
|
||||
|
||||
test('fabric.Rect.fromElement', function() {
|
||||
ok(typeof fabric.Rect.fromElement == 'function');
|
||||
|
||||
|
|
|
|||
|
|
@ -131,6 +131,15 @@
|
|||
equal(camelize('--double'), 'Double');
|
||||
});
|
||||
|
||||
test('fabric.util.string.graphemeSplit', function() {
|
||||
var gSplit = fabric.util.string.graphemeSplit;
|
||||
|
||||
ok(typeof gSplit === 'function');
|
||||
|
||||
deepEqual(gSplit('foo'), ['f', 'o', 'o'], 'normal test get splitted by char');
|
||||
deepEqual(gSplit('f🙂o'), ['f', '🙂', 'o'], 'normal test get splitted by char');
|
||||
});
|
||||
|
||||
test('fabric.util.string.escapeXml', function() {
|
||||
var escapeXml = fabric.util.string.escapeXml;
|
||||
|
||||
|
|
@ -422,10 +431,7 @@
|
|||
});
|
||||
|
||||
asyncTest('fabric.util.loadImage', function() {
|
||||
ok(typeof fabric.util.loadImage == 'function');
|
||||
|
||||
var callbackInvoked = false,
|
||||
objectPassedToCallback;
|
||||
ok(typeof fabric.util.loadImage === 'function');
|
||||
|
||||
if (IMG_URL.indexOf('/home/travis') === 0) {
|
||||
// image can not be accessed on travis so we're returning early
|
||||
|
|
@ -434,25 +440,15 @@
|
|||
}
|
||||
|
||||
fabric.util.loadImage(IMG_URL, function(obj) {
|
||||
callbackInvoked = true;
|
||||
objectPassedToCallback = obj;
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
ok(callbackInvoked, 'callback should be invoked');
|
||||
|
||||
if (objectPassedToCallback) {
|
||||
var oImg = new fabric.Image(objectPassedToCallback);
|
||||
if (obj) {
|
||||
var oImg = new fabric.Image(obj);
|
||||
ok(/fixtures\/very_large_image\.jpg$/.test(oImg.getSrc()), 'image should have correct src');
|
||||
}
|
||||
|
||||
start();
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('fabric.util.loadImage with no args', function() {
|
||||
var callbackInvoked = false;
|
||||
|
||||
if (IMG_URL.indexOf('/home/travis') === 0) {
|
||||
// image can not be accessed on travis so we're returning early
|
||||
expect(0);
|
||||
|
|
@ -461,30 +457,32 @@
|
|||
}
|
||||
|
||||
fabric.util.loadImage('', function() {
|
||||
callbackInvoked = true;
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
ok(callbackInvoked, 'callback should be invoked');
|
||||
ok(1, 'callback should be invoked');
|
||||
start();
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('fabric.util.loadImage with crossOrigin', function() {
|
||||
if (IMG_URL.indexOf('/home/travis') === 0) {
|
||||
// image can not be accessed on travis so we're returning early
|
||||
expect(0);
|
||||
start();
|
||||
return;
|
||||
}
|
||||
|
||||
fabric.util.loadImage(IMG_URL, function(img) {
|
||||
equal(img.src || img._src, IMG_URL, 'src is set');
|
||||
// equal(img.crossOrigin, 'anonymous', 'crossOrigin is set');
|
||||
start();
|
||||
}, null, 'anonymous');
|
||||
});
|
||||
|
||||
|
||||
asyncTest('fabric.util.loadImage with url for a non exsiting image', function() {
|
||||
var callbackInvoked = false;
|
||||
var hadError = false;
|
||||
|
||||
fabric.util.loadImage(IMG_URL_NON_EXISTING, function(img, error) {
|
||||
callbackInvoked = true;
|
||||
hadError = error;
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
ok(callbackInvoked, 'callback should be invoked');
|
||||
equal(hadError, true, 'callback should be invoked with error set to true');
|
||||
equal(error, true, 'callback should be invoked with error set to true');
|
||||
start();
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
|
||||
var SVG_WITH_1_ELEMENT = '<?xml version="1.0"?>\
|
||||
|
|
@ -586,17 +584,21 @@
|
|||
});
|
||||
}
|
||||
|
||||
// test('fabric.util.request', function() {
|
||||
// });
|
||||
test('fabric.util.request', function() {
|
||||
ok(typeof fabric.util.request === 'function', 'fabric.util.request is a function');
|
||||
});
|
||||
|
||||
// test('fabric.util.getPointer', function() {
|
||||
// });
|
||||
test('fabric.util.getPointer', function() {
|
||||
ok(typeof fabric.util.getPointer === 'function', 'fabric.util.getPointer is a function');
|
||||
});
|
||||
|
||||
// test('fabric.util.addListener', function() {
|
||||
// });
|
||||
test('fabric.util.addListener', function() {
|
||||
ok(typeof fabric.util.addListener === 'function', 'fabric.util.addListener is a function');
|
||||
});
|
||||
|
||||
// test('fabric.util.removeListener', function() {
|
||||
// });
|
||||
test('fabric.util.removeListener', function() {
|
||||
ok(typeof fabric.util.removeListener === 'function', 'fabric.util.removeListener is a function');
|
||||
});
|
||||
|
||||
test('fabric.util.drawDashedLine', function() {
|
||||
ok(typeof fabric.util.drawDashedLine === 'function');
|
||||
|
|
@ -809,6 +811,11 @@
|
|||
|
||||
test('parseUnit', function() {
|
||||
ok(typeof fabric.util.parseUnit == 'function');
|
||||
equal(Math.round(fabric.util.parseUnit('30mm'), 0), 113, '30mm is pixels');
|
||||
equal(Math.round(fabric.util.parseUnit('30cm'), 0), 1134, '30cm is pixels');
|
||||
equal(Math.round(fabric.util.parseUnit('30in'), 0), 2880, '30in is pixels');
|
||||
equal(Math.round(fabric.util.parseUnit('30pt'), 0), 40, '30mm is pixels');
|
||||
equal(Math.round(fabric.util.parseUnit('30pc'), 0), 480, '30mm is pixels');
|
||||
});
|
||||
|
||||
test('createCanvasElement', function() {
|
||||
|
|
@ -826,4 +833,40 @@
|
|||
test('qrDecompose', function() {
|
||||
ok(typeof fabric.util.qrDecompose == 'function');
|
||||
});
|
||||
|
||||
test('drawArc', function() {
|
||||
ok(typeof fabric.util.drawArc == 'function');
|
||||
var canvas = this.canvas = fabric.isLikelyNode ? fabric.createCanvasForNode(600, 600, {enableRetinaScaling: false}) : new fabric.Canvas(null, {enableRetinaScaling: false});
|
||||
var ctx = canvas.contextContainer;
|
||||
fabric.util.drawArc(ctx, 0, 0, [
|
||||
50,
|
||||
30,
|
||||
0,
|
||||
1,
|
||||
1,
|
||||
100,
|
||||
100,
|
||||
]);
|
||||
fabric.util.drawArc(ctx, 0, 0, [
|
||||
50,
|
||||
30,
|
||||
0,
|
||||
1,
|
||||
1,
|
||||
100,
|
||||
100,
|
||||
]);
|
||||
});
|
||||
|
||||
test('get bounds of arc', function() {
|
||||
ok(typeof fabric.util.getBoundsOfArc == 'function');
|
||||
var bounds = fabric.util.getBoundsOfArc(0, 0, 50, 30, 0, 1, 1, 100, 100);
|
||||
var expectedBounds = [
|
||||
{ x: 0, y: -8.318331151877368 },
|
||||
{ x: 133.33333333333331, y: 19.99999999999999 },
|
||||
{ x: 100.00000000000003, y: 19.99999999999999 },
|
||||
{ x: 147.19721858646224, y: 100 }
|
||||
];
|
||||
deepEqual(bounds, expectedBounds, 'bounds are as expected');
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in a new issue