fabric.js/test/unit/gradient.js

(function() {

  QUnit.module('fabric.Gradient');

  function createGradient() {
    return new fabric.Gradient({
      coords: {
        x1: 0,
        y1: 10,
        x2: 100,
        y2: 200,
      },
      colorStops: [
        { offset: 0, color: 'red' },
        { offset: 1, color: 'green' }
      ]
    });
  }

  test('constructor', function() {
    ok(fabric.Gradient);

    var gradient = createGradient();
    ok(gradient instanceof fabric.Gradient, 'should inherit from fabric.Gradient');
  });

  test('properties', function() {
    var gradient = createGradient();

    equal(gradient.coords.x1, 0);
    equal(gradient.coords.y1, 10);
    equal(gradient.coords.x2, 100);
    equal(gradient.coords.y2, 200);

    equal(gradient.colorStops[0].offset, 0);
    equal(gradient.colorStops[0].color, 'red');

    equal(gradient.colorStops[1].offset, 1);
    equal(gradient.colorStops[1].color, 'green');
  });

  test('toObject', function() {
    var gradient = createGradient();

    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.colorStops, gradient.colorStops);
  });

  test('toLive', function() {
    var gradient = createGradient();

    ok(typeof gradient.toLive == 'function');
  });

  test('fromElement', function() {
    ok(typeof fabric.Gradient.fromElement == 'function');

    var element = fabric.document.createElement('linearGradient');
    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');

    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)');
  });

  test('forObject', function() {
    ok(typeof fabric.Gradient.forObject == 'function');

    var object = new fabric.Object({ width: 50, height: 50 });

    var gradient = fabric.Gradient.forObject(object, {
      coords: {
        x1: 10,
        y1: 10,
        x2: 20,
        y2: 20,
      },
      colorStops: [
        { offset: 0, color: 'red' },
        { offset: 0.5, color: 'green' },
        { offset: 1, color: 'blue' }
      ]
    });

    ok(gradient instanceof fabric.Gradient);

    // 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);
  });

})();