tests updates

test/lib/imagediff.js

@@ -0,0 +1,395 @@
+// js-imagediff 1.0.3
+// (c) 2011-2012 Carl Sutherland, Humble Software
+// Distributed under the MIT License
+// For original source and documentation visit:
+// http://www.github.com/HumbleSoftware/js-imagediff
+
+(function (name, definition) {
+  var root = this;
+  if (typeof module !== 'undefined') {
+    try {
+      var Canvas = require('canvas');
+    } catch (e) {
+      throw new Error(
+        e.message + '\n' + 
+        'Please see https://github.com/HumbleSoftware/js-imagediff#cannot-find-module-canvas\n'
+      );
+    }
+    module.exports = definition(root, name, Canvas);
+  } else if (typeof define === 'function' && typeof define.amd === 'object') {
+    define(definition);
+  } else {
+    root[name] = definition(root, name);
+  }
+})('imagediff', function (root, name, Canvas) {
+
+  var
+    TYPE_ARRAY        = /\[object Array\]/i,
+    TYPE_CANVAS       = /\[object (Canvas|HTMLCanvasElement)\]/i,
+    TYPE_CONTEXT      = /\[object CanvasRenderingContext2D\]/i,
+    TYPE_IMAGE        = /\[object (Image|HTMLImageElement)\]/i,
+    TYPE_IMAGE_DATA   = /\[object ImageData\]/i,
+
+    UNDEFINED         = 'undefined',
+
+    canvas            = getCanvas(),
+    context           = canvas.getContext('2d'),
+    previous          = root[name],
+    imagediff, jasmine;
+
+  // Creation
+  function getCanvas (width, height) {
+    var
+      canvas = Canvas ?
+        new Canvas() :
+        document.createElement('canvas');
+    if (width) canvas.width = width;
+    if (height) canvas.height = height;
+    return canvas;
+  }
+  function getImageData (width, height) {
+    canvas.width = width;
+    canvas.height = height;
+    context.clearRect(0, 0, width, height);
+    return context.createImageData(width, height);
+  }
+
+
+  // Type Checking
+  function isImage (object) {
+    return isType(object, TYPE_IMAGE);
+  }
+  function isCanvas (object) {
+    return isType(object, TYPE_CANVAS);
+  }
+  function isContext (object) {
+    return isType(object, TYPE_CONTEXT);
+  }
+  function isImageData (object) {
+    return !!(object &&
+      isType(object, TYPE_IMAGE_DATA) &&
+      typeof(object.width) !== UNDEFINED &&
+      typeof(object.height) !== UNDEFINED &&
+      typeof(object.data) !== UNDEFINED);
+  }
+  function isImageType (object) {
+    return (
+      isImage(object) ||
+      isCanvas(object) ||
+      isContext(object) ||
+      isImageData(object)
+    );
+  }
+  function isType (object, type) {
+    return typeof (object) === 'object' && !!Object.prototype.toString.apply(object).match(type);
+  }
+
+
+  // Type Conversion
+  function copyImageData (imageData) {
+    var
+      height = imageData.height,
+      width = imageData.width,
+      data = imageData.data,
+      newImageData, newData, i;
+
+    canvas.width = width;
+    canvas.height = height;
+    newImageData = context.getImageData(0, 0, width, height);
+    newData = newImageData.data;
+
+    for (i = imageData.data.length; i--;) {
+        newData[i] = data[i];
+    }
+
+    return newImageData;
+  }
+  function toImageData (object) {
+    if (isImage(object)) { return toImageDataFromImage(object); }
+    if (isCanvas(object)) { return toImageDataFromCanvas(object); }
+    if (isContext(object)) { return toImageDataFromContext(object); }
+    if (isImageData(object)) { return object; }
+  }
+  function toImageDataFromImage (image) {
+    var
+      height = image.height,
+      width = image.width;
+    canvas.width = width;
+    canvas.height = height;
+    context.clearRect(0, 0, width, height);
+    context.drawImage(image, 0, 0);
+    return context.getImageData(0, 0, width, height);
+  }
+  function toImageDataFromCanvas (canvas) {
+    var
+      height = canvas.height,
+      width = canvas.width,
+      context = canvas.getContext('2d');
+    return context.getImageData(0, 0, width, height);
+  }
+  function toImageDataFromContext (context) {
+    var
+      canvas = context.canvas,
+      height = canvas.height,
+      width = canvas.width;
+    return context.getImageData(0, 0, width, height);
+  }
+  function toCanvas (object) {
+    var
+      data = toImageData(object),
+      canvas = getCanvas(data.width, data.height),
+      context = canvas.getContext('2d');
+
+    context.putImageData(data, 0, 0);
+    return canvas;
+  }
+
+
+  // ImageData Equality Operators
+  function equalWidth (a, b) {
+    return a.width === b.width;
+  }
+  function equalHeight (a, b) {
+    return a.height === b.height;
+  }
+  function equalDimensions (a, b) {
+    return equalHeight(a, b) && equalWidth(a, b);
+  }
+  function equal (a, b, tolerance) {
+
+    var
+      aData     = a.data,
+      bData     = b.data,
+      length    = aData.length,
+      i;
+
+    tolerance = tolerance || 0;
+
+    if (!equalDimensions(a, b)) return false;
+    for (i = length; i--;) if (aData[i] !== bData[i] && Math.abs(aData[i] - bData[i]) > tolerance) return false;
+
+    return true;
+  }
+
+
+  // Diff
+  function diff (a, b, options) {
+    return (equalDimensions(a, b) ? diffEqual : diffUnequal)(a, b, options);
+  }
+  function diffEqual (a, b, options) {
+
+    var
+      height  = a.height,
+      width   = a.width,
+      c       = getImageData(width, height), // c = a - b
+      aData   = a.data,
+      bData   = b.data,
+      cData   = c.data,
+      length  = cData.length,
+      row, column,
+      i, j, k, v;
+
+    for (i = 0; i < length; i += 4) {
+      cData[i] = Math.abs(aData[i] - bData[i]);
+      cData[i+1] = Math.abs(aData[i+1] - bData[i+1]);
+      cData[i+2] = Math.abs(aData[i+2] - bData[i+2]);
+      cData[i+3] = Math.abs(255 - Math.abs(aData[i+3] - bData[i+3]));
+    }
+
+    return c;
+  }
+  function diffUnequal (a, b, options) {
+
+    var
+      height  = Math.max(a.height, b.height),
+      width   = Math.max(a.width, b.width),
+      c       = getImageData(width, height), // c = a - b
+      aData   = a.data,
+      bData   = b.data,
+      cData   = c.data,
+      align   = options && options.align,
+      rowOffset,
+      columnOffset,
+      row, column,
+      i, j, k, v;
+
+
+    for (i = cData.length - 1; i > 0; i = i - 4) {
+      cData[i] = 255;
+    }
+
+    // Add First Image
+    offsets(a);
+    for (row = a.height; row--;){
+      for (column = a.width; column--;) {
+        i = 4 * ((row + rowOffset) * width + (column + columnOffset));
+        j = 4 * (row * a.width + column);
+        cData[i+0] = aData[j+0]; // r
+        cData[i+1] = aData[j+1]; // g
+        cData[i+2] = aData[j+2]; // b
+        // cData[i+3] = aData[j+3]; // a
+      }
+    }
+
+    // Subtract Second Image
+    offsets(b);
+    for (row = b.height; row--;){
+      for (column = b.width; column--;) {
+        i = 4 * ((row + rowOffset) * width + (column + columnOffset));
+        j = 4 * (row * b.width + column);
+        cData[i+0] = Math.abs(cData[i+0] - bData[j+0]); // r
+        cData[i+1] = Math.abs(cData[i+1] - bData[j+1]); // g
+        cData[i+2] = Math.abs(cData[i+2] - bData[j+2]); // b
+      }
+    }
+
+    // Helpers
+    function offsets (imageData) {
+      if (align === 'top') {
+        rowOffset = 0;
+        columnOffset = 0;
+      } else {
+        rowOffset = Math.floor((height - imageData.height) / 2);
+        columnOffset = Math.floor((width - imageData.width) / 2);
+      }
+    }
+
+    return c;
+  }
+
+
+  // Validation
+  function checkType () {
+    var i;
+    for (i = 0; i < arguments.length; i++) {
+      if (!isImageType(arguments[i])) {
+        throw {
+          name : 'ImageTypeError',
+          message : 'Submitted object was not an image.'
+        };
+      }
+    }
+  }
+
+
+  // Jasmine Matchers
+  function get (element, content) {
+    element = document.createElement(element);
+    if (element && content) {
+      element.innerHTML = content;
+    }
+    return element;
+  }
+
+  jasmine = {
+
+    toBeImageData : function () {
+      return imagediff.isImageData(this.actual);
+    },
+
+    toImageDiffEqual : function (expected, tolerance) {
+
+      if (typeof (document) !== UNDEFINED) {
+        this.message = function () {
+          var
+            div     = get('div'),
+            a       = get('div', '<div>Actual:</div>'),
+            b       = get('div', '<div>Expected:</div>'),
+            c       = get('div', '<div>Diff:</div>'),
+            diff    = imagediff.diff(this.actual, expected),
+            canvas  = getCanvas(),
+            context;
+
+          canvas.height = diff.height;
+          canvas.width  = diff.width;
+
+          div.style.overflow = 'hidden';
+          a.style.float = 'left';
+          b.style.float = 'left';
+          c.style.float = 'left';
+
+          context = canvas.getContext('2d');
+          context.putImageData(diff, 0, 0);
+
+          a.appendChild(toCanvas(this.actual));
+          b.appendChild(toCanvas(expected));
+          c.appendChild(canvas);
+
+          div.appendChild(a);
+          div.appendChild(b);
+          div.appendChild(c);
+
+          return [
+            div,
+            "Expected not to be equal."
+          ];
+        };
+      }
+
+      return imagediff.equal(this.actual, expected, tolerance);
+    }
+  };
+
+
+  // Image Output
+  function imageDataToPNG (imageData, outputFile, callback) {
+
+    var
+      canvas = toCanvas(imageData),
+      base64Data,
+      decodedImage;
+
+    callback = callback || Function;
+
+    base64Data = canvas.toDataURL().replace(/^data:image\/\w+;base64,/,"");
+    decodedImage = new Buffer(base64Data, 'base64');
+    require('fs').writeFile(outputFile, decodedImage, callback);
+  }
+
+
+  // Definition
+  imagediff = {
+
+    createCanvas : getCanvas,
+    createImageData : getImageData,
+
+    isImage : isImage,
+    isCanvas : isCanvas,
+    isContext : isContext,
+    isImageData : isImageData,
+    isImageType : isImageType,
+
+    toImageData : function (object) {
+      checkType(object);
+      if (isImageData(object)) { return copyImageData(object); }
+      return toImageData(object);
+    },
+
+    equal : function (a, b, tolerance) {
+      checkType(a, b);
+      a = toImageData(a);
+      b = toImageData(b);
+      return equal(a, b, tolerance);
+    },
+    diff : function (a, b, options) {
+      checkType(a, b);
+      a = toImageData(a);
+      b = toImageData(b);
+      return diff(a, b, options);
+    },
+
+    jasmine : jasmine,
+
+    // Compatibility
+    noConflict : function () {
+      root[name] = previous;
+      return imagediff;
+    }
+  };
+
+  if (typeof module !== 'undefined') {
+    imagediff.imageDataToPNG = imageDataToPNG;
+  }
+
+  return imagediff;
+});

test/runner.html

@@ -32,7 +32,8 @@
     <script src="../node_modules/chai/chai.js"></script>
     <script src="lib/stats.js"></script>
     <script src="../dist/kinetic-dev.js"></script>
-    <!--<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.js"></script>-->
+
+    <script src="lib/imagediff.js"></script>
     <script src="runner.js"></script>
 
     <!-- assets -->

test/runner.js

@@ -92,10 +92,56 @@ function addStage() {
       });
 
   kineticContainer.appendChild(container);
-
   return stage;
 }
 
+function createCanvas() {
+    var canvas = document.createElement('canvas');
+    canvas.width = 578;
+    canvas.height = 200;
+    return canvas;
+}
+
+function get (element, content) {
+    element = document.createElement(element);
+    if (element && content) {
+        element.innerHTML = content;
+    }
+    return element;
+}
+
+function compareLayerAndCanvas(layer, canvas) {
+    var equal = imagediff.equal(layer.getCanvas()._canvas, canvas);
+    if (!equal) {
+        var
+            div     = get('div'),
+            b       = get('div', '<div>Expected:</div>'),
+            c       = get('div', '<div>Diff:</div>'),
+            diff    = imagediff.diff(layer.getCanvas()._canvas, canvas),
+            diffCanvas  = get('canvas'),
+            context;
+
+        diffCanvas.height = diff.height;
+        diffCanvas.width  = diff.width;
+
+        div.style.overflow = 'hidden';
+        b.style.float = 'left';
+        c.style.float = 'left';
+
+        context = diffCanvas.getContext('2d');
+        context.putImageData(diff, 0, 0);
+
+        b.appendChild(canvas);
+        c.appendChild(diffCanvas);
+
+        div.appendChild(b);
+        div.appendChild(c);
+        kineticContainer.appendChild(div);
+    }
+    assert.equal(equal, true);
+
+}
+
 function addContainer() {
   var container = document.createElement('div');
 

test/unit/DragAndDrop-test.js

@@ -217,7 +217,7 @@ suite('DragAndDrop', function() {
     });
 
     // ======================================================
-    test.only('it is possible to change layer while dragging', function() {
+    test('it is possible to change layer while dragging', function() {
         var stage = addStage();
 
         var top = stage.content.getBoundingClientRect().top;

test/unit/shapes/Rect-test.js

@@ -82,8 +82,10 @@ suite('Rect', function(){
           fill: 'green',
           stroke: 'black',
           strokeWidth: 4,
-          center: {x: 50, y: 0},
-          scale: {x: 2, y: 2},
+          scale: {
+              x: 2,
+              y: 2
+          },
           cornerRadius: 15,
           draggable: true
       });
@@ -110,6 +112,18 @@ suite('Rect', function(){
 
       layer.add(rect);
       stage.add(layer);
+
+      var canvas = createCanvas();
+      var context = canvas.getContext('2d');
+      context.beginPath();
+      context.rect(200, 100, 100, 50);
+      context.fillStyle = 'blue';
+      context.fill();
+      context.lineWidth = 4;
+      context.strokeStyle = 'green';
+      context.stroke();
+
+      compareLayerAndCanvas(layer, canvas);
   });
 
   // ======================================================
@@ -127,22 +141,16 @@ suite('Rect', function(){
 
       layer.add(rect);
       stage.add(layer);
-  });
 
-  // ======================================================
-  test('use default stroke (stroke color should be black)', function() {
-      var stage = addStage();
-      var layer = new Kinetic.Layer();
-      var rect = new Kinetic.Rect({
-          x: 200,
-          y: 100,
-          width: 100,
-          height: 50,
-          strokeWidth: 4
-      });
+      var canvas = createCanvas();
+      var context = canvas.getContext('2d');
+      context.beginPath();
+      context.rect(200, 100, 100, 50);
+      context.lineWidth = 4;
+      context.strokeStyle = 'green';
+      context.stroke();
 
-      layer.add(rect);
-      stage.add(layer);
+      compareLayerAndCanvas(layer, canvas);
   });
 
   // ======================================================
@@ -159,6 +167,15 @@ suite('Rect', function(){
 
       layer.add(rect);
       stage.add(layer);
+
+      var canvas = createCanvas();
+      var context = canvas.getContext('2d');
+      context.beginPath();
+      context.rect(200, 100, 100, 50);
+      context.lineWidth = 2;
+      context.strokeStyle = 'blue';
+      context.stroke();
+      compareLayerAndCanvas(layer, canvas);
   });
 
 });

test/unit/shapes/Text-test.js

@@ -312,4 +312,6 @@ suite('Text', function(){
         var text = new Kinetic.Text();
         assert.equal(text.fill(), 'black');
     });
+
+
 });