finished migrating all unit tests over to Mocha

test-old/js/unitTests.js

@@ -1,4 +1,147 @@
-Test.Modules.CONTAINER = {
+Test.Modules.ANIMATION = {
+    /*
+     * WARNING: make sure that this is the first unit test that uses
+     * animation because it's accessing the global animation object which could
+     * be modified by other unit tests
+     */
+    'test start and stop': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var rect = new Kinetic.Rect({
+            x: 200,
+            y: 100,
+            width: 100,
+            height: 50,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        layer.add(rect);
+        stage.add(layer);
+
+        var amplitude = 150;
+        var period = 1000;
+        // in ms
+        var centerX = stage.getWidth() / 2 - 100 / 2;
+
+        var anim = new Kinetic.Animation(function(frame) {
+            rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
+        }, layer);
+        var a = Kinetic.Animation;
+
+        test(a.animations.length === 0, '1should be no animations running');
+
+        anim.start();
+        test(a.animations.length === 1, '2should be 1 animation running');
+
+        anim.stop();
+        test(a.animations.length === 0, '3should be no animations running');
+
+        anim.start();
+        test(a.animations.length === 1, '4should be 1 animation running');
+
+        anim.start();
+        test(a.animations.length === 1, '5should be 1 animation runningg');
+
+        anim.stop();
+        test(a.animations.length === 0, '6should be no animations running');
+
+        anim.stop();
+        test(a.animations.length === 0, '7should be no animations running');
+    },
+    'layer batch draw': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var rect = new Kinetic.Rect({
+            x: 200,
+            y: 100,
+            width: 100,
+            height: 50,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        layer.add(rect);
+        stage.add(layer);
+
+        draws = 0;
+
+        layer.on('draw', function() {
+            //console.log('draw')
+            draws++;
+        });
+
+        layer.draw();
+        layer.draw();
+        layer.draw();
+
+        test(draws === 3, 'draw count should be 3');
+
+        layer.batchDraw();
+        layer.batchDraw();
+        layer.batchDraw();
+
+        test(draws !== 6, 'should not be 6 draws');
+
+        setTimeout(function() {
+            layer.batchDraw();
+        }, 2000);
+    },
+    'stage batch draw': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var rect = new Kinetic.Rect({
+            x: 200,
+            y: 100,
+            width: 100,
+            height: 50,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        layer.add(rect);
+        stage.add(layer);
+
+        draws = 0;
+
+        layer.on('draw', function() {
+            //console.log('draw')
+            draws++;
+        });
+
+        stage.draw();
+        stage.draw();
+        stage.draw();
+
+        test(draws === 3, 'draw count should be 3');
+
+        stage.batchDraw();
+        stage.batchDraw();
+        stage.batchDraw();
+
+        test(draws !== 6, 'should not be 6 draws');
+
+        setTimeout(function() {
+            stage.batchDraw();
+        }, 2000);
+    }
+};
+;Test.Modules.CONTAINER = {
     'clip': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -1399,3 +1542,221 @@ Test.Modules.CONTAINER = {
         layer.draw();
     }
 };
+;Test.Modules.LAYER = {
+    'test canvas inline styles': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+
+        var layer = new Kinetic.Layer();
+
+        var circle = new Kinetic.Circle({
+            x: 100,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+        var style = layer.getCanvas()._canvas.style;
+
+        test(style.position === 'absolute', 'canvas position style should be absolute');
+        test(style.border === '0px', 'canvas border style should be 0px');
+        test(style.margin === '0px', 'canvas margin style should be 0px');
+        test(style.padding === '0px', 'canvas padding style should be 0px');
+        test(style.backgroundColor === 'transparent', 'canvas backgroundColor style should be transparent');
+        test(style.top === '0px', 'canvas top should be 0px');
+        test(style.left === '0px', 'canvas left should be 0px');
+    },
+
+    'layer getIntersection()': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200,
+            throttle: 999
+        });
+        var layer = new Kinetic.Layer();
+
+        var redCircle = new Kinetic.Circle({
+            x: 380,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            strokeWidth: 4,
+            fill: 'red',
+            stroke: 'black',
+            id: 'redCircle'
+        });
+
+        var greenCircle = new Kinetic.Circle({
+            x: 300,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            strokeWidth: 4,
+            fill: 'green',
+            stroke: 'black',
+            id: 'greenCircle'
+        });
+
+        layer.add(redCircle);
+        layer.add(greenCircle);
+        stage.add(layer);
+
+        test(layer.getIntersection(300, 100).shape.getId() === 'greenCircle', 'shape should be greenCircle');
+        test(layer.getIntersection(380, 100).shape.getId() === 'redCircle', 'shape should be redCircle');
+        test(layer.getIntersection(100, 100) === null, 'shape should be null');
+
+
+    },
+    'set layer visibility': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer({
+            visible: false
+        });
+        var rect = new Kinetic.Rect({
+            x: 200,
+            width: 100,
+            height: 50,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            scale: [3, 1],
+            draggable: true,
+            strokeScaleEnabled: false
+        });
+
+        rect.colorKey = '000000';
+
+        layer.add(rect);
+        stage.add(layer);
+    },
+
+    'set clearBeforeDraw to false, and test toDataURL for stage, layer, group, and shape': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+
+        var layer = new Kinetic.Layer({
+            clearBeforeDraw: false,
+            throttle: 999
+        });
+
+        var group = new Kinetic.Group();
+
+        var circle = new Kinetic.Circle({
+            x: 100,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        group.add(circle);
+        layer.add(group);
+        stage.add(layer);
+
+        for(var n = 0; n < 20; n++) {
+            circle.move(10, 0);
+            layer.draw();
+        }
+
+        // TODO: investigate re-enabling toDataURL with clearBeforeDraw = false.
+        // disabled it for now because toDataURL breaks on devices with pixelRatio != 1
+        //console.log(layer.toDataURL());
+
+    },
+    'save layer as png (click on Circle to open new window)': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+
+        var Circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'violet',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        Circle.on('click', function() {
+            window.open(layer.toDataURL());
+        });
+
+        layer.add(Circle);
+        stage.add(layer);
+    },
+    'save layer as low quality jpg (click on Circle to open new window)': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+
+        var circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'violet',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        circle.on('click', function() {
+            window.open(layer.toDataURL({
+               mimeType: 'image/jpeg',
+               quality: 0.2
+            }));
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+    },
+    'save layer as high quality jpg (click on Circle to open new window)': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+
+        var circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'violet',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        circle.on('click', function() {
+            window.open(layer.toDataURL({
+               mimeType: 'image/jpeg',
+               quality: 1
+            }));
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+    }
+};
+
+
+

test/runner.html

@@ -42,13 +42,11 @@
     <script src="unit/Util-test.js"></script>
     <script src="unit/Canvas-test.js"></script>
     <script src="unit/Node-test.js"></script>
+    <script src="unit/Container-test.js"></script>
     <script src="unit/Stage-test.js"></script>
+    <script src="unit/Layer-test.js"></script>
     <script src="unit/Shape-test.js"></script>
 
-    <!-- extensions -->
-    <script src="unit/DragAndDrop-test.js"></script>
-    <script src="unit/Tween-test.js"></script>
-
     <!-- shapes -->
     <script src="unit/shapes/Rect-test.js"></script>
     <script src="unit/shapes/Circle-test.js"></script>
@@ -62,6 +60,11 @@
     <script src="unit/shapes/Sprite-test.js"></script>
     <script src="unit/shapes/Wedge-test.js"></script>
 
+    <!-- extensions -->
+    <script src="unit/Animation-test.js"></script>
+    <script src="unit/DragAndDrop-test.js"></script>
+    <script src="unit/Tween-test.js"></script>
+
     <!-- plugins -->
     <script src="unit/plugins/Label-test.js"></script>
     <script src="unit/plugins/Star-test.js"></script>

test/unit/Animation-test.js

@@ -1,15 +1,7 @@
-Test.Modules.ANIMATION = {
-    /*
-     * WARNING: make sure that this is the first unit test that uses
-     * animation because it's accessing the global animation object which could
-     * be modified by other unit tests
-     */
-    'test start and stop': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
+suite('Animation', function() {
+    // ======================================================
+    test('test start and stop', function() {
+        var stage = addStage();
         var layer = new Kinetic.Layer();
         var rect = new Kinetic.Rect({
             x: 200,
@@ -32,34 +24,33 @@ Test.Modules.ANIMATION = {
         var anim = new Kinetic.Animation(function(frame) {
             rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
         }, layer);
-        var a = Kinetic.Animation;
+        var a = Kinetic.Animation.animations;
+        var startLen = a.length;
 
-        test(a.animations.length === 0, '1should be no animations running');
+        assert.equal(a.length, startLen, '1should be no animations running');
 
         anim.start();
-        test(a.animations.length === 1, '2should be 1 animation running');
+        assert.equal(a.length, startLen + 1, '2should be 1 animation running');
 
         anim.stop();
-        test(a.animations.length === 0, '3should be no animations running');
+        assert.equal(a.length, startLen, '3should be no animations running');
 
         anim.start();
-        test(a.animations.length === 1, '4should be 1 animation running');
+        assert.equal(a.length, startLen + 1, '4should be 1 animation running');
 
         anim.start();
-        test(a.animations.length === 1, '5should be 1 animation runningg');
+        assert.equal(a.length, startLen + 1, '5should be 1 animation runningg');
 
         anim.stop();
-        test(a.animations.length === 0, '6should be no animations running');
+        assert.equal(a.length, startLen, '6should be no animations running');
 
         anim.stop();
-        test(a.animations.length === 0, '7should be no animations running');
-    },
-    'layer batch draw': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
+        assert.equal(a.length, startLen, '7should be no animations running');
+    });
+
+    // ======================================================
+    test('layer batch draw', function() {
+        var stage = addStage();
         var layer = new Kinetic.Layer();
         var rect = new Kinetic.Rect({
             x: 200,
@@ -85,24 +76,18 @@ Test.Modules.ANIMATION = {
         layer.draw();
         layer.draw();
 
-        test(draws === 3, 'draw count should be 3');
+        assert.equal(draws, 3, 'draw count should be 3');
 
         layer.batchDraw();
         layer.batchDraw();
         layer.batchDraw();
 
-        test(draws !== 6, 'should not be 6 draws');
+        assert.notEqual(draws, 6, 'should not be 6 draws');
+    });
 
-        setTimeout(function() {
-            layer.batchDraw();
-        }, 2000);
-    },
-    'stage batch draw': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
+    // ======================================================
+    test('stage batch draw', function() {
+        var stage = addStage();
         var layer = new Kinetic.Layer();
         var rect = new Kinetic.Rect({
             x: 200,
@@ -128,16 +113,13 @@ Test.Modules.ANIMATION = {
         stage.draw();
         stage.draw();
 
-        test(draws === 3, 'draw count should be 3');
+        assert.equal(draws, 3, 'draw count should be 3');
 
         stage.batchDraw();
         stage.batchDraw();
         stage.batchDraw();
 
-        test(draws !== 6, 'should not be 6 draws');
+        assert.notEqual(draws, 6, 'should not be 6 draws');
 
-        setTimeout(function() {
-            stage.batchDraw();
-        }, 2000);
-    }
-};
+    });
+});

test/unit/Layer-test.js

@@ -0,0 +1,192 @@
+suite('Layer', function() {
+
+    // ======================================================
+    test('test canvas inline styles', function() {
+        var stage = addStage();
+
+        var layer = new Kinetic.Layer();
+
+        var circle = new Kinetic.Circle({
+            x: 100,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+        var style = layer.getCanvas()._canvas.style;
+
+        assert.equal(style.position, 'absolute', 'canvas position style should be absolute');
+        assert.equal(style.border, '0px', 'canvas border style should be 0px');
+        assert.equal(style.margin, '0px', 'canvas margin style should be 0px');
+        assert.equal(style.padding, '0px', 'canvas padding style should be 0px');
+        assert.equal(style.backgroundColor, 'transparent', 'canvas backgroundColor style should be transparent');
+        assert.equal(style.top, '0px', 'canvas top should be 0px');
+        assert.equal(style.left, '0px', 'canvas left should be 0px');
+    });
+
+    // ======================================================
+    test('layer getIntersection()', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+
+        var redCircle = new Kinetic.Circle({
+            x: 380,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            strokeWidth: 4,
+            fill: 'red',
+            stroke: 'black',
+            id: 'redCircle'
+        });
+
+        var greenCircle = new Kinetic.Circle({
+            x: 300,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            strokeWidth: 4,
+            fill: 'green',
+            stroke: 'black',
+            id: 'greenCircle'
+        });
+
+        layer.add(redCircle);
+        layer.add(greenCircle);
+        stage.add(layer);
+
+        assert.equal(layer.getIntersection(300, 100).shape.getId(), 'greenCircle', 'shape should be greenCircle');
+        assert.equal(layer.getIntersection(380, 100).shape.getId(), 'redCircle', 'shape should be redCircle');
+        assert.equal(layer.getIntersection(100, 100), null, 'shape should be null');
+
+
+    });
+
+    // ======================================================
+    test('set layer visibility', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer({
+            visible: false
+        });
+        var rect = new Kinetic.Rect({
+            x: 200,
+            width: 100,
+            height: 50,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            scale: [3, 1],
+            draggable: true,
+            strokeScaleEnabled: false
+        });
+
+        rect.colorKey = '000000';
+
+        layer.add(rect);
+        stage.add(layer);
+    });
+
+    // ======================================================
+    test('set clearBeforeDraw to false, and test toDataURL for stage, layer, group, and shape', function() {
+        var stage = addStage();
+
+        var layer = new Kinetic.Layer({
+            clearBeforeDraw: false,
+            throttle: 999
+        });
+
+        var group = new Kinetic.Group();
+
+        var circle = new Kinetic.Circle({
+            x: 100,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        group.add(circle);
+        layer.add(group);
+        stage.add(layer);
+
+        for(var n = 0; n < 20; n++) {
+            circle.move(10, 0);
+            layer.draw();
+        }
+
+        var trace = layer.getContext().getTrace();
+        //console.log(trace);
+        assert.equal(trace, 'save();transform(1,0,0,1,220,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,230,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,240,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,250,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,260,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,270,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,280,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,290,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,300,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore()');
+
+    });
+
+    // ======================================================
+    test('save layer as png', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+
+        var Circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'violet',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        layer.add(Circle);
+        stage.add(layer);
+
+        var dataUrl = layer.toDataURL();
+    });
+
+    // ======================================================
+    test('save layer as low quality jpg', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+
+        var circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'violet',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+    
+        layer.add(circle);
+        stage.add(layer);
+
+        var dataUrl = layer.toDataURL({
+           mimeType: 'image/jpeg',
+           quality: 0.2
+        });
+    });
+
+    // ======================================================
+    test('save layer as high quality jpg', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+
+        var circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'violet',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+        var dataUrl = layer.toDataURL({
+           mimeType: 'image/jpeg',
+           quality: 1
+        });
+    });
+});

tests/js/unit/layerTests.js

@@ -1,218 +0,0 @@
-Test.Modules.LAYER = {
-    'test canvas inline styles': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-
-        var layer = new Kinetic.Layer();
-
-        var circle = new Kinetic.Circle({
-            x: 100,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'green',
-            stroke: 'black',
-            strokeWidth: 4
-        });
-
-        layer.add(circle);
-        stage.add(layer);
-
-        var style = layer.getCanvas()._canvas.style;
-
-        test(style.position === 'absolute', 'canvas position style should be absolute');
-        test(style.border === '0px', 'canvas border style should be 0px');
-        test(style.margin === '0px', 'canvas margin style should be 0px');
-        test(style.padding === '0px', 'canvas padding style should be 0px');
-        test(style.backgroundColor === 'transparent', 'canvas backgroundColor style should be transparent');
-        test(style.top === '0px', 'canvas top should be 0px');
-        test(style.left === '0px', 'canvas left should be 0px');
-    },
-
-    'layer getIntersection()': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200,
-            throttle: 999
-        });
-        var layer = new Kinetic.Layer();
-
-        var redCircle = new Kinetic.Circle({
-            x: 380,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            strokeWidth: 4,
-            fill: 'red',
-            stroke: 'black',
-            id: 'redCircle'
-        });
-
-        var greenCircle = new Kinetic.Circle({
-            x: 300,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            strokeWidth: 4,
-            fill: 'green',
-            stroke: 'black',
-            id: 'greenCircle'
-        });
-
-        layer.add(redCircle);
-        layer.add(greenCircle);
-        stage.add(layer);
-
-        test(layer.getIntersection(300, 100).shape.getId() === 'greenCircle', 'shape should be greenCircle');
-        test(layer.getIntersection(380, 100).shape.getId() === 'redCircle', 'shape should be redCircle');
-        test(layer.getIntersection(100, 100) === null, 'shape should be null');
-
-
-    },
-    'set layer visibility': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer({
-            visible: false
-        });
-        var rect = new Kinetic.Rect({
-            x: 200,
-            width: 100,
-            height: 50,
-            fill: 'green',
-            stroke: 'black',
-            strokeWidth: 4,
-            scale: [3, 1],
-            draggable: true,
-            strokeScaleEnabled: false
-        });
-
-        rect.colorKey = '000000';
-
-        layer.add(rect);
-        stage.add(layer);
-    },
-
-    'set clearBeforeDraw to false, and test toDataURL for stage, layer, group, and shape': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-
-        var layer = new Kinetic.Layer({
-            clearBeforeDraw: false,
-            throttle: 999
-        });
-
-        var group = new Kinetic.Group();
-
-        var circle = new Kinetic.Circle({
-            x: 100,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'green',
-            stroke: 'black',
-            strokeWidth: 4
-        });
-
-        group.add(circle);
-        layer.add(group);
-        stage.add(layer);
-
-        for(var n = 0; n < 20; n++) {
-            circle.move(10, 0);
-            layer.draw();
-        }
-
-        // TODO: investigate re-enabling toDataURL with clearBeforeDraw = false.
-        // disabled it for now because toDataURL breaks on devices with pixelRatio != 1
-        //console.log(layer.toDataURL());
-
-    },
-    'save layer as png (click on Circle to open new window)': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-
-        var Circle = new Kinetic.Circle({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'violet',
-            stroke: 'black',
-            strokeWidth: 4
-        });
-
-        Circle.on('click', function() {
-            window.open(layer.toDataURL());
-        });
-
-        layer.add(Circle);
-        stage.add(layer);
-    },
-    'save layer as low quality jpg (click on Circle to open new window)': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-
-        var circle = new Kinetic.Circle({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'violet',
-            stroke: 'black',
-            strokeWidth: 4
-        });
-
-        circle.on('click', function() {
-            window.open(layer.toDataURL({
-               mimeType: 'image/jpeg',
-               quality: 0.2
-            }));
-        });
-
-        layer.add(circle);
-        stage.add(layer);
-    },
-    'save layer as high quality jpg (click on Circle to open new window)': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-
-        var circle = new Kinetic.Circle({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'violet',
-            stroke: 'black',
-            strokeWidth: 4
-        });
-
-        circle.on('click', function() {
-            window.open(layer.toDataURL({
-               mimeType: 'image/jpeg',
-               quality: 1
-            }));
-        });
-
-        layer.add(circle);
-        stage.add(layer);
-    }
-};
-
-
-