getTrace() can now operate in strict and relaxed modes. with relaxed mode, we can now also do a basic context trace test on renderings that may have different parameters in different browsers

src/Context.js

@@ -4,6 +4,8 @@
         CLOSE_PAREN = ')',
         OPEN_PAREN_BRACKET = '([',
         CLOSE_BRACKET_PAREN = '])',
+        SEMICOLON = ';',
+        DOUBLE_PAREN = '()',
         EMPTY_STRING = '',
         EQUALS = '=',
         SET = 'set',
@@ -63,10 +65,49 @@
          * get context trace if trace is enabled
          * @method
          * @memberof Kinetic.Context.prototype
+         * @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters
+         *  properties, and property values.  If true, return relaxed context trace, which only returns method names and
+         *  properites.
          * @returns {String}
          */
-        getTrace: function() {
+        getTrace: function(relaxed) {
-            return this.traceArr.join(';');
+            var traceArr = this.traceArr,
+                len = traceArr.length,
+                str = '',
+                n, trace, method, args;
+
+            for (n=0; n<len; n++) {
+                trace = traceArr[n];
+                method = trace.method;
+
+                // methods
+                if (method) {
+                    args = trace.args;
+                    str += method;
+                    if (relaxed) {
+                        str += DOUBLE_PAREN;
+                    } 
+                    else {
+                        if (Kinetic.Util._isArray(args[0])) {
+                            str += OPEN_PAREN_BRACKET + args.join(COMMA) + CLOSE_BRACKET_PAREN;
+                        }
+                        else {
+                            str += OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN;
+                        }
+                    }
+                }
+                // properties
+                else {
+                    str += trace.property;
+                    if (!relaxed) {
+                        str += EQUALS + trace.val;
+                    }  
+                }
+
+                str += SEMICOLON;
+            }
+
+            return str;
         },
         /**
          * clear trace if trace is enabled
@@ -348,12 +389,12 @@
                     that[methodName] = function() {
                         args = _roundArrValues(Array.prototype.slice.call(arguments, 0));
                         ret = origMethod.apply(that, arguments);
-                        if (Kinetic.Util._isArray(args[0])) {
+           
-                            that._trace(methodName + OPEN_PAREN_BRACKET + args.join(COMMA) + CLOSE_BRACKET_PAREN);
+                        that._trace({
-                        }
+                            method: methodName,
-                        else {
+                            args: args
-                            that._trace(methodName + OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN);
+                        });
-                        }
+                 
                         return ret;
                     };
                 })(CONTEXT_METHODS[n]);
@@ -362,7 +403,10 @@
             // attrs
             that.setAttr = function() {
                 origSetter.apply(that, arguments);
-                that._trace(arguments[0] + EQUALS + arguments[1]);
+                that._trace({
+                    property: arguments[0],
+                    val: arguments[1]
+                });
             };
         }
     };

src/shapes/Text.js

@@ -158,7 +158,7 @@
             return this.attrs.width === AUTO ? this.getTextWidth() + this.getPadding() * 2 : this.attrs.width;
         },
         /**
-         * get height
+         * get the height of the text area, which takes into account multi-line text and padding
          * @method
          * @memberof Kinetic.Text.prototype
          */

test/unit/Layer-test.js

@@ -120,7 +120,7 @@ suite('Layer', function() {
 
         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()');
+        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/unit/Shape-test.js

@@ -409,7 +409,7 @@ suite('Shape-test', function() {
 
         var trace = layer.getContext().getTrace();
         //console.log(trace);
-        assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();save();shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;fillStyle=green;fill();restore();fillStyle=green;fill();setLineDash([10,10]);lineWidth=4;strokeStyle=black;stroke();restore()');
+        assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();save();shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;fillStyle=green;fill();restore();fillStyle=green;fill();setLineDash([10,10]);lineWidth=4;strokeStyle=black;stroke();restore();');
 
     });
 

test/unit/plugins/Label-test.js

@@ -59,12 +59,12 @@ suite('Label', function() {
         var json = label.toJSON();
         //console.log(json);
 
-        var trace = layer.getContext().getTrace();
+        // use relaxed trace because  text can be a slightly different size in different browsers, 
-        //console.log(trace);
-        
-        // this fails because text can be a slightly different size in different browsers, 
         // resulting in slightly different tag dimensions
-        //assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,100,120);beginPath();moveTo(0,0);lineTo(-10,0);lineTo(0,-20);lineTo(10,0);lineTo(0,0);lineTo(0,60);lineTo(0,60);closePath();save();globalAlpha=0.2;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;fillStyle=#bbb;fill();restore();fillStyle=#bbb;fill();lineWidth=2;strokeStyle=#333;stroke();restore();save();transform(1,0,0,1,100,120);font=normal 50px Calibri;textBaseline=middle;textAlign=left;save();translate(0,0);translate(0,25);save();fillStyle=green;fillText(,0,0);restore();translate(0,60);restore();restore();clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,-51.5,120);beginPath();moveTo(0,0);lineTo(141.5,0);lineTo(151.5,-20);lineTo(161.5,0);lineTo(303,0);lineTo(303,60);lineTo(0,60);closePath();save();globalAlpha=0.2;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;fillStyle=#bbb;fill();restore();fillStyle=#bbb;fill();lineWidth=2;strokeStyle=#333;stroke();restore();save();transform(1,0,0,1,-51.5,120);font=normal 50px Calibri;textBaseline=middle;textAlign=left;save();translate(0,0);translate(0,25);save();fillStyle=green;fillText(Hello big world,0,0);restore();translate(0,60);restore();restore()');
+        var relaxedTrace = layer.getContext().getTrace(true);
+        //console.log(relaxedTrace);
+        
+        assert.equal(relaxedTrace, 'clearRect();save();lineJoin;transform();beginPath();moveTo();lineTo();lineTo();lineTo();lineTo();lineTo();lineTo();closePath();save();globalAlpha;shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;fillStyle;fill();restore();fillStyle;fill();lineWidth;strokeStyle;stroke();restore();save();transform();font;textBaseline;textAlign;save();translate();translate();save();fillStyle;fillText();restore();translate();restore();restore();clearRect();save();lineJoin;transform();beginPath();moveTo();lineTo();lineTo();lineTo();lineTo();lineTo();lineTo();closePath();save();globalAlpha;shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;fillStyle;fill();restore();fillStyle;fill();lineWidth;strokeStyle;stroke();restore();save();transform();font;textBaseline;textAlign;save();translate();translate();save();fillStyle;fillText();restore();translate();restore();restore();');
     });
 
     // ======================================================

test/unit/plugins/Path-test.js

@@ -104,7 +104,7 @@ suite('Path', function() {
         var trace = layer.getContext().getTrace();
 
         //console.log(trace);
-        assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(200,100);lineTo(300,100);lineTo(300,150);closePath();save();globalAlpha=0.5;shadowColor=maroon;shadowBlur=2;shadowOffsetX=10;shadowOffsetY=10;fillStyle=#fcc;fill();restore();fillStyle=#fcc;fill();lineWidth=2;strokeStyle=#333;stroke();restore()');
+        assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(200,100);lineTo(300,100);lineTo(300,150);closePath();save();globalAlpha=0.5;shadowColor=maroon;shadowBlur=2;shadowOffsetX=10;shadowOffsetY=10;fillStyle=#fcc;fill();restore();fillStyle=#fcc;fill();lineWidth=2;strokeStyle=#333;stroke();restore();');
     });
     
     // ======================================================
@@ -760,8 +760,8 @@ suite('Path', function() {
         var hitTrace = layer.hitCanvas.getContext().getTrace();
         //console.log(hitTrace);
 
-        assert.equal(trace,    'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(50,0);bezierCurveTo(50,150,170,170,200,170);lineWidth=2;strokeStyle=black;stroke();restore()');
+        assert.equal(trace,    'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(50,0);bezierCurveTo(50,150,170,170,200,170);lineWidth=2;strokeStyle=black;stroke();restore();');
-        assert.equal(hitTrace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(50,0);bezierCurveTo(50,150,170,170,200,170);lineWidth=2;strokeStyle=black;stroke();restore()');
+        assert.equal(hitTrace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(50,0);bezierCurveTo(50,150,170,170,200,170);lineWidth=2;strokeStyle=black;stroke();restore();');
     });
      
 });

test/unit/shapes/Blob-test.js

@@ -39,7 +39,7 @@ suite('Blob', function(){
         assert.equal(blob.getTension(), 1.5);
 
         var trace = layer.getContext().getTrace();
-        assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(73,140);bezierCurveTo(90.922,74.135,129.542,38.279,340,23);bezierCurveTo(471.142,13.479,514.876,54.33,500,109);bezierCurveTo(482.876,171.93,463.05,158.163,300,170);bezierCurveTo(121.45,182.963,58.922,191.735,73,140);closePath();fillStyle=#aaf;fill();lineWidth=10;strokeStyle=blue;stroke();restore()');
+        assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(73,140);bezierCurveTo(90.922,74.135,129.542,38.279,340,23);bezierCurveTo(471.142,13.479,514.876,54.33,500,109);bezierCurveTo(482.876,171.93,463.05,158.163,300,170);bezierCurveTo(121.45,182.963,58.922,191.735,73,140);closePath();fillStyle=#aaf;fill();lineWidth=10;strokeStyle=blue;stroke();restore();');
     });
 
     // ======================================================

test/unit/shapes/Circle-test.js

@@ -38,7 +38,7 @@ suite('Circle', function(){
 
     var trace = layer.getContext().getTrace();
     //console.log(trace);
-    assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore()');
+    assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
   });
 
   // ======================================================

test/unit/shapes/Ellipse-test.js

@@ -17,6 +17,6 @@ suite('Ellipse', function(){
       assert.equal(ellipse.getClassName(), 'Ellipse');
 
       var trace = layer.getContext().getTrace();
-      assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();save();scale(1,0.5);arc(0,0,70,0,6.283,false);restore();closePath();fillStyle=green;fill();lineWidth=8;strokeStyle=black;stroke();restore()');
+      assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();save();scale(1,0.5);arc(0,0,70,0,6.283,false);restore();closePath();fillStyle=green;fill();lineWidth=8;strokeStyle=black;stroke();restore();');
   });
 });

test/unit/shapes/Image-test.js

@@ -119,6 +119,11 @@ suite('Image', function(){
           
           assert.equal(darth.getClassName(), 'Image');
 
+          var trace = layer.getContext().getTrace();
+          //console.log(trace);
+
+          assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);beginPath();rect(0,0,100,200);closePath();drawImage([object HTMLImageElement],135,7,167,134,0,0,100,200);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();');
+
           done();
 
       };

test/unit/shapes/Rect-test.js

@@ -23,8 +23,11 @@ suite('Rect', function(){
 
     var trace = layer.getContext().getTrace();
     //console.log(trace);
-    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore()');
+    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore();');
 
+    var relaxedTrace = layer.getContext().getTrace(true);
+    //console.log(relaxedTrace);
+    assert.equal(relaxedTrace, 'clearRect();save();transform();beginPath();rect();closePath();fillStyle;fill();lineWidth;strokeStyle;stroke();restore();');
   });
 
   // ======================================================
@@ -61,7 +64,7 @@ suite('Rect', function(){
 
     var trace = layer.getContext().getTrace();
     //console.log(layer.getContext().traceArr);
-    assert.equal(trace, 'clearRect(0,0,578,200);save();globalAlpha=0.4;transform(1,0,0,1,100,50);beginPath();moveTo(5,0);lineTo(95,0);arc(95,5,5,4.712,0,false);lineTo(100,45);arc(95,45,5,0,1.571,false);lineTo(5,50);arc(5,45,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();save();globalAlpha=0.2;shadowColor=red;shadowBlur=10;shadowOffsetX=5;shadowOffsetY=5;fillStyle=green;fill();restore();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore()');
+    assert.equal(trace, 'clearRect(0,0,578,200);save();globalAlpha=0.4;transform(1,0,0,1,100,50);beginPath();moveTo(5,0);lineTo(95,0);arc(95,5,5,4.712,0,false);lineTo(100,45);arc(95,45,5,0,1.571,false);lineTo(5,50);arc(5,45,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();save();globalAlpha=0.2;shadowColor=red;shadowBlur=10;shadowOffsetX=5;shadowOffsetY=5;fillStyle=green;fill();restore();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore();');
 
   });
 

test/unit/shapes/Spline-test.js

@@ -71,7 +71,7 @@ suite('Spline', function() {
         var trace = layer.getContext().getTrace();
 
         //console.log(trace);
-        assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);bezierCurveTo(501.006,3.77,519.038,68.068,500,109);quadraticCurveTo(479.038,154.068,300,109);lineCap=round;lineWidth=10;strokeStyle=blue;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);quadraticCurveTo(501.006,3.77,500,109);lineCap=round;lineWidth=10;strokeStyle=red;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=10;strokeStyle=green;stroke();restore()');
+        assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);bezierCurveTo(501.006,3.77,519.038,68.068,500,109);quadraticCurveTo(479.038,154.068,300,109);lineCap=round;lineWidth=10;strokeStyle=blue;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);quadraticCurveTo(501.006,3.77,500,109);lineCap=round;lineWidth=10;strokeStyle=red;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=10;strokeStyle=green;stroke();restore();');
 
 
     });

test/unit/shapes/Wedge-test.js

@@ -22,7 +22,7 @@ suite('Wedge', function() {
 
         var trace = layer.getContext().getTrace();
         //console.log(trace);
-        assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,1.257,false);lineTo(0,0);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore()');
+        assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,1.257,false);lineTo(0,0);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
     });
 
     // ======================================================