Fix unit tests

src/parser.js

@@ -54,7 +54,8 @@
   }
 
   function normalizeValue(attr, value, parentAttributes) {
-    var isArray = Object.prototype.toString.call(value) === '[object Array]';
+    var isArray = Object.prototype.toString.call(value) === '[object Array]',
+        parsed;
 
     if ((attr === 'fill' || attr === 'stroke') && value === 'none') {
       value = '';
@@ -63,7 +64,9 @@
       value = (value === 'evenodd') ? 'destination-over' : value;
     }
     else if (attr === 'strokeDashArray') {
-      value = value.replace(/,/g, ' ').split(/\s+/);
+      value = value.replace(/,/g, ' ').split(/\s+/).map(function(n) {
+        return parseInt(n);
+      });
     }
     else if (attr === 'transformMatrix') {
       if (parentAttributes && parentAttributes.transformMatrix) {
@@ -83,9 +86,9 @@
     }
     else if (attr === 'originX' /* text-anchor */) {
       value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center';
-    } else {
-      // TODO: need to normalize em, %, etc. to px (!)
-      var parsed = isArray ? value.map(parseUnit) : parseUnit(value);
+    }
+    else {
+      parsed = isArray ? value.map(parseUnit) : parseUnit(value);
     }
 
     return (!isArray && isNaN(parsed) ? value : parsed);
@@ -367,7 +370,7 @@
    * @private
    */
   function parseUseDirectives(doc) {
-    var nodelist = doc.querySelectorAll('use');
+    var nodelist = doc.getElementsByTagName('use');
     for (var i = 0, len = nodelist.length; i < len; i++) {
       var el = nodelist[i],
           xlink = el.getAttribute('xlink:href').substr(1),

src/shapes/circle.class.js

@@ -176,8 +176,8 @@
       parsedAttributes.top = 0;
     }
     if (!('transformMatrix' in parsedAttributes)) {
-      parsedAttributes.left -= (options.width / 2);
-      parsedAttributes.top -= (options.height / 2);
+      parsedAttributes.left -= options.width ? (options.width / 2) : 0;
+      parsedAttributes.top -= options.height ? (options.height / 2) : 0;
     }
 
     var obj = new fabric.Circle(extend(parsedAttributes, options));

src/shapes/ellipse.class.js

@@ -157,8 +157,8 @@
       parsedAttributes.top = 0;
     }
     if (!('transformMatrix' in parsedAttributes)) {
-      parsedAttributes.left -= (options.width / 2);
-      parsedAttributes.top -= (options.height / 2);
+      parsedAttributes.left -= options.width ? (options.width / 2) : 0;
+      parsedAttributes.top -= options.height ? (options.height / 2) : 0;
     }
     var ellipse = new fabric.Ellipse(extend(parsedAttributes, options));
 

src/util/misc.js

@@ -141,6 +141,7 @@
     parseUnit: function(value) {
       var unit = /\D{0,2}$/.exec(value),
           number = parseFloat(value);
+
       switch (unit[0]) {
         case 'mm':
           return number * fabric.DPI / 25.4;

test/unit/parser.js

@@ -126,10 +126,11 @@
     var element = fabric.document.createElement('path');
     element.setAttribute('style', 'left:10px;top:22.3em;width:103.45pt;height:20%;');
 
+    // TODO: looks like this still fails with % and em values
     var expectedObject = {
       'left':   10,
       'top':    22.3,
-      'width':  103.45,
+      'width':  137.93333333333334,
       'height': 20
     };
     deepEqual(fabric.parseStyleAttribute(element), expectedObject);

test/unit/text.js

@@ -6,13 +6,15 @@
     return new fabric.Text('x');
   }
 
+  var CHAR_WIDTH = 19;
+
   var REFERENCE_TEXT_OBJECT = {
     'type':                'text',
     'originX':             'left',
     'originY':             'top',
     'left':                0,
     'top':                 0,
-    'width':               20,
+    'width':               CHAR_WIDTH,
     'height':              52,
     'fill':                'rgb(0,0,0)',
     'stroke':              null,
@@ -30,6 +32,7 @@
     'shadow':              null,
     'visible':             true,
     'clipTo':              null,
+    'backgroundColor':     '',
     'text':                'x',
     'fontSize':            40,
     'fontWeight':          'normal',
@@ -39,12 +42,11 @@
     'textDecoration':      '',
     'textAlign':           'left',
     'path':                null,
-    'backgroundColor':     '',
     'textBackgroundColor': '',
     'useNative':           true
   };
 
-  var TEXT_SVG = '<g transform="translate(10 26)"><text font-family="Times New Roman" font-size="40" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(-10 39)"><tspan x="0" y="-26" fill="rgb(0,0,0)">x</tspan></text></g>';
+  var TEXT_SVG = '<g transform="translate(9.5 26)"><text font-family="Times New Roman" font-size="40" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(-9.5 39)"><tspan x="0" y="-26" fill="rgb(0,0,0)">x</tspan></text></g>';
 
   test('constructor', function() {
     ok(fabric.Text);
@@ -148,12 +150,12 @@
     ok(text instanceof fabric.Text);
 
     // temp workaround for text objects not obtaining width under node
-    // text.width = 20;
+    // text.width = CHAR_WIDTH;
 
     var expectedObject = fabric.util.object.extend(fabric.util.object.clone(REFERENCE_TEXT_OBJECT), {
-      left: 4,
+      left: 3.5,
       top: -10.4,
-      width: 8,
+      width: 7,
       height: 20.8,
       fontSize: 16,
       originX: 'center'
@@ -185,7 +187,7 @@
 
     var textWithAttrs = fabric.Text.fromElement(elTextWithAttrs);
     // temp workaround for text objects not obtaining width under node
-    textWithAttrs.width = 20;
+    textWithAttrs.width = CHAR_WIDTH;
 
     ok(textWithAttrs instanceof fabric.Text);
 
@@ -193,7 +195,7 @@
       /* left varies slightly due to node-canvas rendering */
       left:             fabric.util.toFixed(textWithAttrs.left + '', 2),
       top:              -59.95,
-      width:            20,
+      width:            CHAR_WIDTH,
       height:           159.9,
       fill:             'rgb(255,255,255)',
       opacity:          0.45,
@@ -220,10 +222,10 @@
 
   test('dimensions after text change', function() {
     var text = new fabric.Text('x');
-    equal(text.width, 20);
+    equal(text.width, CHAR_WIDTH);
 
     text.setText('xx');
-    equal(text.width, 40);
+    equal(text.width, CHAR_WIDTH * 2);
   });
 
   test('setting fontFamily', function() {
@@ -241,13 +243,13 @@
     var text = new fabric.Text('x');
 
     // temp workaround for text objects not obtaining width under node
-    text.width = 20;
+    text.width = CHAR_WIDTH;
 
     equal(text.toSVG(), TEXT_SVG);
 
     text.setFontFamily('"Arial Black", Arial');
     // temp workaround for text objects not obtaining width under node
-    text.width = 20;
+    text.width = CHAR_WIDTH;
 
     equal(text.toSVG(), TEXT_SVG.replace('font-family="Times New Roman"', 'font-family="\'Arial Black\', Arial"'));
   });