mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-05-16 09:43:11 +00:00
Add more tests to gradient (distinguish between linearGradient and radialGradient)
This commit is contained in:
Kienz
parent
4d4a129ee6
commit
57de0f7f3a
1 changed files with 196 additions and 15 deletions
|
|
@ -2,8 +2,9 @@
|
|||
|
||||
QUnit.module('fabric.Gradient');
|
||||
|
||||
function createGradient() {
|
||||
function createLinearGradient() {
|
||||
return new fabric.Gradient({
|
||||
type: 'linear',
|
||||
coords: {
|
||||
x1: 0,
|
||||
y1: 10,
|
||||
|
|
@ -11,36 +12,86 @@
|
|||
y2: 200,
|
||||
},
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'red' },
|
||||
{ offset: 0, color: 'red', opacity: 0 },
|
||||
{ offset: 1, color: 'green' }
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
test('constructor', function() {
|
||||
function createRadialGradient() {
|
||||
return new fabric.Gradient({
|
||||
type: 'radial',
|
||||
coords: {
|
||||
x1: 0,
|
||||
y1: 10,
|
||||
x2: 100,
|
||||
y2: 200,
|
||||
r1: 0,
|
||||
r2: 50
|
||||
},
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'red' },
|
||||
{ offset: 1, color: 'green', opacity: 0 }
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
test('constructor linearGradient', function() {
|
||||
ok(fabric.Gradient);
|
||||
|
||||
var gradient = createGradient();
|
||||
var gradient = createLinearGradient();
|
||||
ok(gradient instanceof fabric.Gradient, 'should inherit from fabric.Gradient');
|
||||
});
|
||||
|
||||
test('properties', function() {
|
||||
var gradient = createGradient();
|
||||
test('constructor radialGradient', function() {
|
||||
ok(fabric.Gradient);
|
||||
|
||||
var gradient = createRadialGradient();
|
||||
ok(gradient instanceof fabric.Gradient, 'should inherit from fabric.Gradient');
|
||||
});
|
||||
|
||||
test('properties linearGradient', function() {
|
||||
var gradient = createLinearGradient();
|
||||
|
||||
equal(gradient.coords.x1, 0);
|
||||
equal(gradient.coords.y1, 10);
|
||||
equal(gradient.coords.x2, 100);
|
||||
equal(gradient.coords.y2, 200);
|
||||
|
||||
equal(gradient.type, 'linear');
|
||||
|
||||
equal(gradient.colorStops[0].offset, 0);
|
||||
equal(gradient.colorStops[0].color, 'red');
|
||||
equal(gradient.colorStops[0].opacity, 0);
|
||||
|
||||
equal(gradient.colorStops[1].offset, 1);
|
||||
equal(gradient.colorStops[1].color, 'green');
|
||||
ok(!('opacity' in gradient.colorStops[1]));
|
||||
});
|
||||
|
||||
test('toObject', function() {
|
||||
var gradient = createGradient();
|
||||
test('properties radialGradient', function() {
|
||||
var gradient = createRadialGradient();
|
||||
|
||||
equal(gradient.coords.x1, 0);
|
||||
equal(gradient.coords.y1, 10);
|
||||
equal(gradient.coords.x2, 100);
|
||||
equal(gradient.coords.y2, 200);
|
||||
equal(gradient.coords.r1, 0);
|
||||
equal(gradient.coords.r2, 50);
|
||||
|
||||
equal(gradient.type, 'radial');
|
||||
|
||||
equal(gradient.colorStops[0].offset, 0);
|
||||
equal(gradient.colorStops[0].color, 'red');
|
||||
ok(!('opacity' in gradient.colorStops[0]));
|
||||
|
||||
equal(gradient.colorStops[1].offset, 1);
|
||||
equal(gradient.colorStops[1].color, 'green');
|
||||
equal(gradient.colorStops[1].opacity, 0);
|
||||
});
|
||||
|
||||
test('toObject linearGradient', function() {
|
||||
var gradient = createLinearGradient();
|
||||
|
||||
ok(typeof gradient.toObject == 'function');
|
||||
|
||||
|
|
@ -51,16 +102,43 @@
|
|||
equal(object.coords.y1, gradient.coords.y1);
|
||||
equal(object.coords.y2, gradient.coords.y2);
|
||||
|
||||
equal(object.type, gradient.type);
|
||||
|
||||
equal(object.colorStops, gradient.colorStops);
|
||||
});
|
||||
|
||||
test('toLive', function() {
|
||||
var gradient = createGradient();
|
||||
test('toObject radialGradient', function() {
|
||||
var gradient = createRadialGradient();
|
||||
|
||||
ok(typeof gradient.toObject == 'function');
|
||||
|
||||
var object = gradient.toObject();
|
||||
|
||||
equal(object.coords.x1, gradient.coords.x1);
|
||||
equal(object.coords.x2, gradient.coords.x2);
|
||||
equal(object.coords.y1, gradient.coords.y1);
|
||||
equal(object.coords.y2, gradient.coords.y2);
|
||||
equal(object.coords.r1, gradient.coords.r1);
|
||||
equal(object.coords.r2, gradient.coords.r2);
|
||||
|
||||
equal(object.type, gradient.type);
|
||||
|
||||
equal(object.colorStops, gradient.colorStops);
|
||||
});
|
||||
|
||||
test('toLive linearGradient', function() {
|
||||
var gradient = createLinearGradient();
|
||||
|
||||
ok(typeof gradient.toLive == 'function');
|
||||
});
|
||||
|
||||
test('fromElement', function() {
|
||||
test('toLive radialGradient', function() {
|
||||
var gradient = createRadialGradient();
|
||||
|
||||
ok(typeof gradient.toLive == 'function');
|
||||
});
|
||||
|
||||
test('fromElement linearGradient', function() {
|
||||
ok(typeof fabric.Gradient.fromElement == 'function');
|
||||
|
||||
var element = fabric.document.createElement('linearGradient');
|
||||
|
|
@ -70,6 +148,45 @@
|
|||
stop1.setAttribute('offset', '0%');
|
||||
stop1.setAttribute('stop-color', 'white');
|
||||
|
||||
stop2.setAttribute('offset', '100%');
|
||||
stop2.setAttribute('stop-color', 'black');
|
||||
stop2.setAttribute('stop-opacity', '0');
|
||||
|
||||
element.appendChild(stop1);
|
||||
element.appendChild(stop2);
|
||||
|
||||
var object = new fabric.Object({ width: 100, height: 100 });
|
||||
var gradient = fabric.Gradient.fromElement(element, object);
|
||||
|
||||
ok(gradient instanceof fabric.Gradient);
|
||||
|
||||
// TODO: need to double check these values
|
||||
|
||||
equal(gradient.coords.x1, 0);
|
||||
equal(gradient.coords.y1, 0);
|
||||
|
||||
//equal(gradient.coords.x2, 100);
|
||||
//equal(gradient.coords.y2, 100);
|
||||
|
||||
equal(gradient.colorStops[0].offset, 1);
|
||||
equal(gradient.colorStops[1].offset, 0);
|
||||
|
||||
equal(gradient.colorStops[0].color, 'rgb(0,0,0)');
|
||||
equal(gradient.colorStops[1].color, 'rgb(255,255,255)');
|
||||
|
||||
equal(gradient.colorStops[0].opacity, 0);
|
||||
});
|
||||
|
||||
test('fromElement radialGradient', function() {
|
||||
ok(typeof fabric.Gradient.fromElement == 'function');
|
||||
|
||||
var element = fabric.document.createElement('radialGradient');
|
||||
var stop1 = fabric.document.createElement('stop');
|
||||
var stop2 = fabric.document.createElement('stop');
|
||||
|
||||
stop1.setAttribute('offset', '0%');
|
||||
stop1.setAttribute('stop-color', 'white');
|
||||
|
||||
stop2.setAttribute('offset', '100%');
|
||||
stop2.setAttribute('stop-color', 'black');
|
||||
|
||||
|
|
@ -96,7 +213,7 @@
|
|||
equal(gradient.colorStops[1].color, 'rgb(255,255,255)');
|
||||
});
|
||||
|
||||
test('forObject', function() {
|
||||
test('forObject linearCradient', function() {
|
||||
ok(typeof fabric.Gradient.forObject == 'function');
|
||||
|
||||
var object = new fabric.Object({ width: 50, height: 50 });
|
||||
|
|
@ -109,14 +226,16 @@
|
|||
y2: 20,
|
||||
},
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'red' },
|
||||
{ offset: 0.5, color: 'green' },
|
||||
{ offset: 1, color: 'blue' }
|
||||
{ offset: 0, color: 'red', opacity: 1 },
|
||||
{ offset: 0.5, color: 'green', opacity: 0},
|
||||
{ offset: 1, color: 'blue', opacity: 0.5 }
|
||||
]
|
||||
});
|
||||
|
||||
ok(gradient instanceof fabric.Gradient);
|
||||
|
||||
equal(gradient.type, 'linear');
|
||||
|
||||
// TODO: need to double check these values
|
||||
|
||||
equal(gradient.coords.x1, 10);
|
||||
|
|
@ -124,6 +243,68 @@
|
|||
|
||||
equal(gradient.coords.x2, 20);
|
||||
equal(gradient.coords.y2, 20);
|
||||
|
||||
equal(gradient.colorStops[0].offset, 0);
|
||||
equal(gradient.colorStops[1].offset, 0.5);
|
||||
equal(gradient.colorStops[2].offset, 1);
|
||||
|
||||
equal(gradient.colorStops[0].color, 'red');
|
||||
equal(gradient.colorStops[1].color, 'green');
|
||||
equal(gradient.colorStops[2].color, 'blue');
|
||||
|
||||
equal(gradient.colorStops[0].opacity, 1);
|
||||
equal(gradient.colorStops[1].opacity, 0);
|
||||
equal(gradient.colorStops[2].opacity, 0.5);
|
||||
});
|
||||
|
||||
test('forObject radialGradient', function() {
|
||||
ok(typeof fabric.Gradient.forObject == 'function');
|
||||
|
||||
var object = new fabric.Object({ width: 50, height: 50 });
|
||||
|
||||
var gradient = fabric.Gradient.forObject(object, {
|
||||
type: 'radial',
|
||||
coords: {
|
||||
x1: 10,
|
||||
y1: 10,
|
||||
x2: 20,
|
||||
y2: 20,
|
||||
r1: 0,
|
||||
r2: 10
|
||||
},
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'red', opacity: 1 },
|
||||
{ offset: 0.5, color: 'green', opacity: 0},
|
||||
{ offset: 1, color: 'blue', opacity: 0.5 }
|
||||
]
|
||||
});
|
||||
|
||||
ok(gradient instanceof fabric.Gradient);
|
||||
|
||||
equal(gradient.type, 'radial');
|
||||
|
||||
// TODO: need to double check these values
|
||||
|
||||
equal(gradient.coords.x1, 10);
|
||||
equal(gradient.coords.y1, 10);
|
||||
|
||||
equal(gradient.coords.x2, 20);
|
||||
equal(gradient.coords.y2, 20);
|
||||
|
||||
equal(gradient.coords.r1, 0);
|
||||
equal(gradient.coords.r2, 10);
|
||||
|
||||
equal(gradient.colorStops[0].offset, 0);
|
||||
equal(gradient.colorStops[1].offset, 0.5);
|
||||
equal(gradient.colorStops[2].offset, 1);
|
||||
|
||||
equal(gradient.colorStops[0].color, 'red');
|
||||
equal(gradient.colorStops[1].color, 'green');
|
||||
equal(gradient.colorStops[2].color, 'blue');
|
||||
|
||||
equal(gradient.colorStops[0].opacity, 1);
|
||||
equal(gradient.colorStops[1].opacity, 0);
|
||||
equal(gradient.colorStops[2].opacity, 0.5);
|
||||
});
|
||||
|
||||
})();
|
||||
Loading…
Reference in a new issue