fabric.js/test/unit/canvas_parser.js

function init() {
  
  function makeElement() {
    var element = document.createElement('path');
    var attributes = {
      'cx':           101,
      'x':            102,
      'cy':           103,
      'y':            104,
      'r':            105,
      'fill-opacity': 0.45,
      'fill-rule':    'foo',
      'stroke-width': 4
    }
    for (var prop in attributes) {
      element.setAttribute(prop, attributes[prop]);
    }
    return element;
  }
  
  var EXPECTED_PATH_JSON = '{"type": "path", "left": 0, "top": 0, "width": 93, "height": 137, "fill": "#99CCFF", "overlayFill": null, "stroke": null, '+
                            '"strokeWidth": 1, "scaleX": 1, "scaleY": 1, "angle": 0, "flipX": false, "flipY": false, "opacity": 1, '+
                            '"path": [["M", 62.022, 30.848], ["c", 4.251, 0.038, 9.565, -2.206, 13.424, -3.924], ["c", 3.131, -1.396, '+
                            '4.47, -1.299, 7.833, 0.263], ["c", 2.18, 1.012, 3.883, -1.551, 5.824, -2.048], ["c", 0.243, -0.062, 0.537, '+
                            '0.464, 0.374, 0.652], ["c", -0.553, 0.639, -2.932, 1.753, -2.679, 2.821], ["c", 0.184, 0.779, 4.081, 0.817, '+
                            '5.226, 1.347], ["c", 1.008, 0.653, -3.22, 0.665, -3.17, 1.028], ["c", 1.038, 0.191, 2.175, 0.279, 3.03, 0.703], '+
                            '["c", 0.482, 0.238, -0.707, 0.815, -1.245, 0.731], ["c", 0.194, 0.103, 0.711, 0.257, 0.583, 0.436], ["c", '+
                            '-0.144, 0.891, -3.265, 0.128, -4.132, -0.003], ["c", -0.688, -0.104, -3.754, -0.843, -3.892, 0.039], ["c", '+
                            '-0.092, 0.586, 0.47, 1.079, 0.133, 2.617], ["c", -0.314, 1.438, -1.942, 1.633, -1.831, 1.024], ["c", 0.273, '+
                            '-1.496, 1.201, -1.914, -0.4, -3.564], ["c", -0.979, -1.01, -1.908, -2.344, -2.138, -3.425], ["c", -7.581, 1.092, '+
                            '-9.456, 6.321, -17.365, 7.858], ["c", -2.787, 0.541, -5.233, -1.016, -7.887, -2.27], ["c", 0.168, 0.259, 0.457, '+
                            '0.272, 0.169, 1.184], ["c", -0.29, 0.918, -0.479, 2.081, -0.225, 3.104], ["c", 0.539, 2.169, 1.73, 4.464, 2.5, '+
                            '6.755], ["c", 1.481, 4.415, 0.996, 11.273, 0.42, 15.21], ["c", -0.105, 0.715, 0.497, 1.432, 0.129, 2.608], ["c", '+
                            '-0.128, 0.413, 0.384, 1.027, 0.347, 1.458], ["c", -0.195, 2.236, 1.106, 2.01, 3.446, 4.502], ["c", -0.21, 0.252, '+
                            '-0.926, 0.504, -1.136, 0.756], ["c", 4.353, 5.205, 8.404, 10.612, 11.622, 16.651], ["c", 0.805, 1.512, 1.511, 3.199, '+
                            '1.511, 4.913], ["c", 0, 1.955, -1.154, 2.843, -2.057, 4.577], ["c", -0.741, 1.423, -2.081, 2.305, -3.121, 3.526], '+
                            '["c", -5.631, 6.614, -9.57, 11.287, -15.186, 17.936], ["c", -0.976, 3.091, 1.141, 4.783, 1.093, 6.394], ["c", -0.011, '+
                            '0.372, -0.267, 0.74, -0.555, 1.119], ["c", -0.452, 0.595, -2.752, -1.225, -4.01, -2.617], ["c", -1.657, 8.48, 5.22, '+
                            '10.332, 8.284, 12.274], ["c", 0.37, 0.234, 0.076, 1.004, -0.05, 1.424], ["c", -4.442, 0.217, -7.603, 0.246, -11.857, '+
                            '-1.172], ["c", -0.783, -0.963, -2.958, -5.188, -4.535, -3.406], ["c", -0.735, 0.831, -1.092, 1.932, -1.637, 2.897], ["c", '+
                            '-0.462, 0, -0.76, -0.247, -1.222, -0.247], ["c", -0.042, -1.553, 0.19, -2.878, -0.044, -4.413], ["c", -0.633, -4.152, '+
                            '-1.551, -4.467, 2.037, -7.866], ["c", 1.782, -1.689, 2.374, -2.065, 4.045, -3.916], ["c", -0.552, -1.562, 0.385, -2.303, '+
                            '-1.192, -3], ["c", -0.936, -0.041, -3.255, 1.205, -3.535, 2.152], ["c", -0.378, -0.042, -1.001, -0.701, -1.379, -0.742], '+
                            '["c", 0.896, -1.794, 1.155, -1.791, 0.926, -2.913], ["c", -0.796, -3.892, 1.304, -4.478, 3.593, -5.779], ["c", 3.523, '+
                            '-3.523, 6.666, -10.464, 10.145, -14.605], ["c", 1.05, -1.25, 2.885, -2.043, 4.019, -3.219], ["c", -1.26, -1.175, -2.805, '+
                            '-2.106, -3.779, -3.526], ["c", -2.437, -3.554, -6.445, -7.633, -9.421, -8.945], ["c", -0.756, 0.168, -1.513, 0.336, '+
                            '-2.269, 0.504], ["c", -3.89, -2.843, -8.766, -8.817, -6.814, -16.892], ["c", 1.413, -5.846, 8.545, -7.913, 2.791, -13.009], '+
                            '["c", -1.299, -1.15, -7.22, -6.915, -8.904, -6.021], ["c", -1.257, 0.667, -3.774, 2.431, -3.966, 4.015], ["c", -0.299, 2.472, '+
                            '-4.275, 17.925, -7.829, 14.167], ["C", 9.169, 53.682, 7.55, 47.517, 6.059, 43.276], ["c", -0.873, -2.481, -4.009, -2.109, '+
                            '-5.077, -5], ["c", -0.368, -0.997, -1.229, -2.067, -0.914, -3.082], ["c", 0.169, -0.545, 0.63, -0.336, 1.175, -0.504], ["c", '+
                            '0.535, -2.002, 0.199, -1.216, 1.704, -1.318], ["c", 0, -1.215, 0.604, -0.978, 1.498, -0.978], ["c", 0.987, -1.624, 1.841, '+
                            '-0.106, 4.696, 1.74], ["c", 1.461, 0.945, 1.292, 2.708, 0.987, 4.319], ["c", -0.281, 1.483, -0.582, 2.403, -0.018, 3.626], '+
                            '["c", 1.14, 2.472, 4.709, 6.794, 6.412, 9.063], ["c", 2.12, -2.974, 1.531, -6.198, 1.788, -10.647], ["c", 0.1, -1.729, 0.84,'+
                            ' -3.361, 1.26, -5.041], ["c", -1.504, -0.111, -2.596, -0.532, -3.277, -1.261], ["c", 0.336, -0.588, 0.672, -1.177, 1.008, '+
                            '-1.765], ["c", -1.64, -1.64, -1.834, -2.188, -2.325, -4.48], ["c", 3.162, 0, 2.708, -1.862, 4.342, -4.09], ["c", -0.84, '+
                            '-0.504, -1.681, -1.008, -2.521, -1.512], ["c", 3.833, -2.869, 3.828, -2.76, 2.539, -8.066], ["c", -0.877, -3.608, -0.278, '+
                            '-6.225, 2.058, -9.733], ["C", 25.57, -1.726, 27.022, 0.327, 31.783, 0.3], ["c", 3.464, -0.021, 6.667, 0.022, 8.97, 5.944], '+
                            '["c", -0.462, -0.248, -1.416, -0.428, -1.878, -0.126], ["c", 0.126, 0.588, 0.825, 2.984, 0.5, 3.49], ["c", -0.673, 1.049, '+
                            '-0.867, 0.977, -0.087, 2.224], ["c", 0.345, 0.552, -0.111, 2.569, -0.915, 4.108], ["c", -0.366, 0.807, -0.308, 2.539, -1.714, '+
                            '2.186], ["c", -0.534, 0.42, -0.248, 1.744, 0.203, 2.164], ["c", 2.527, 0, 5.04, -0.988, 7.921, -0.666], ["C", 47.872, 19.969, '+
                            '54.917, 30.783, 62.022, 30.848], ["L", 62.022, 30.848], ["z", null]]}';
  
  new Test.Unit.Runner({
    testCanvasParseAttributes: function() {
      this.assert(Canvas.parseAttributes);
      
      var element = makeElement();
      var attributeNames = 'cx cy x y r fill-opacity fill-rule stroke-width transform fill fill-rule'.split(' ');
      var parsedAttributes = Canvas.parseAttributes(element, attributeNames);
      
      this.assertObjectIdentical({
        left:         102, 
        top:          104,
        radius:       105,
        opacity:      0.45,
        fillRule:     'foo',
        strokeWidth:  4
      }, parsedAttributes);
    },
    
    testCanvasParseAttributesNoneValues: function() {
      var element = document.createElement('path');
      element.setAttribute('fill', 'none');
      element.setAttribute('stroke', 'none');
      
      this.assertObjectIdentical({ fill: '', stroke: '' }, 
        Canvas.parseAttributes(element, 'fill stroke'.split(' ')));
    },
    
    testCanvasParseAttributesFillRule: function() {
      var element = document.createElement('path');
      element.setAttribute('fill-rule', 'evenodd');
      
      this.assertObjectIdentical({ fillRule: 'destination-over' }, 
        Canvas.parseAttributes(element, ['fill-rule']));
    },
    
    testCanvasParseAttributesFillRuleWithoutTransformation: function() {
      var element = document.createElement('path');
      element.setAttribute('fill-rule', 'inherit');
      
      this.assertObjectIdentical({ fillRule: 'inherit' }, 
        Canvas.parseAttributes(element, ['fill-rule']));
    },
    
    testCanvasParseAttributesTransform: function() {
      var element = document.createElement('path');
      element.setAttribute('transform', 'translate(5, 10)');
      this.assertObjectIdentical({ transformMatrix: [1, 0, 0, 1, 5, 10] }, 
        Canvas.parseAttributes(element, ['transform']));
    },
    
    testCanvasParseAttributesWithParent: function() {
      var element = document.createElement('path');
      var parent = document.createElement('g');
      var grandParent = document.createElement('g');
      
      parent.appendChild(element);
      grandParent.appendChild(parent);
      
      element.setAttribute('x', '100');
      parent.setAttribute('y', '200');
      grandParent.setAttribute('fill', 'red');
      
      this.assertObjectIdentical({ fill: 'red', left: 100, top: 200 }, 
        Canvas.parseAttributes(element, ['x y fill']));
    },
    
    testCanvasParseElements: function() {
      this.assert(Canvas.parseElements);
      
      function getOptions(options) {
        return Canvas.base.object.extend(Canvas.base.object.clone({ 
          left: 10, top: 20, width: 30, height: 40 }), options || { });
      }
      
      var elements = [
        Canvas.base.makeElement('rect', getOptions()),
        Canvas.base.makeElement('circle', getOptions({ r: 14 })),
        Canvas.base.makeElement('path', getOptions({ d: 'M 100 100 L 300 100 L 200 300 z' })),
        Canvas.base.makeElement('inexistent', getOptions())
      ];
      
      var parsedElements;
      this.assertNothingRaised(function() {
        parsedElements = Canvas.parseElements(elements);
      }.bind(this));
      
      this.assertInstanceOf(Canvas.Rect, parsedElements[0]);
      this.assertInstanceOf(Canvas.Circle, parsedElements[1]);
      this.assertInstanceOf(Canvas.Path, parsedElements[2]);
    },
    testCanvasParseStyleAttribute: function() {
      this.assert(Canvas.parseStyleAttribute);
      
      var element = document.createElement('path');
      element.setAttribute('style', 'left:10px;top:22.3em;width:103.45pt;height:20%;');
      
      var expectedObject = { 
        'left':   '10px', 
        'top':    '22.3em', 
        'width':  '103.45pt', 
        'height': '20%' 
      }
      this.assertObjectIdentical(expectedObject, Canvas.parseStyleAttribute(element));
    },
    testCanvasParsePointsAttribute: function() {
      this.assert(Canvas.parsePointsAttribute);
      var element = document.createElement('polygon');
      element.setAttribute('points', '10,12           20,22,  -0.52,0.001 2.3e2,2.3e-2, 10,-1     ');
      var actualPoints = Canvas.parsePointsAttribute(element.getAttribute('points'));
      
      this.assertIdentical(10, actualPoints[0].x);
      this.assertIdentical(12, actualPoints[0].y);
      
      this.assertIdentical(20, actualPoints[1].x);
      this.assertIdentical(22, actualPoints[1].y);
      
      this.assertIdentical(-0.52, actualPoints[2].x);
      this.assertIdentical(0.001, actualPoints[2].y);
      
      this.assertIdentical(2.3e2, actualPoints[3].x);
      this.assertIdentical(2.3e-2, actualPoints[3].y);
      
      this.assertIdentical(10, actualPoints[4].x);
      this.assertIdentical(-1, actualPoints[4].y);
    },
    testCanvasParseTransformAttribute: function() {
      this.assert(Canvas.parseTransformAttribute);
      var element = document.createElement('path');
      
      //'translate(-10,-20) scale(2) rotate(45) translate(5,10)'
      
      element.setAttribute('transform', 'translate(5,10)');
      var parsedValue = Canvas.parseTransformAttribute(element.getAttribute('transform'));
      this.assertEnumEqual([1,0,0,1,5,10], parsedValue);
      
      element.setAttribute('transform', 'translate(-10,-20)');
      var parsedValue = Canvas.parseTransformAttribute(element.getAttribute('transform'));
      this.assertEnumEqual([1,0,0,1,-10,-20], parsedValue);
      
      var ANGLE = 90;
      element.setAttribute('transform', 'rotate(' + ANGLE + ')');
      var parsedValue = Canvas.parseTransformAttribute(element.getAttribute('transform'));
      this.assertEnumEqual([Math.cos(ANGLE), Math.sin(ANGLE), -Math.sin(ANGLE), Math.cos(ANGLE), 0, 0], parsedValue);
      
      element.setAttribute('transform', 'scale(3.5)');
      var parsedValue = Canvas.parseTransformAttribute(element.getAttribute('transform'));
      this.assertEnumEqual([3.5,0,0,3.5,0,0], parsedValue);
      
      element.setAttribute('transform', 'scale(2 13)');
      var parsedValue = Canvas.parseTransformAttribute(element.getAttribute('transform'));
      this.assertEnumEqual([2,0,0,13,0,0], parsedValue);
      
      element.setAttribute('transform', 'skewX(2)');
      var parsedValue = Canvas.parseTransformAttribute(element.getAttribute('transform'));
      this.assertEnumEqual([1,0,2,1,0,0], parsedValue);
      
      element.setAttribute('transform', 'skewY(234.111)');
      var parsedValue = Canvas.parseTransformAttribute(element.getAttribute('transform'));
      this.assertEnumEqual([1,234.111,0,1,0,0], parsedValue);
      
      element.setAttribute('transform', 'matrix(1,2,3,4,5,6)');
      var parsedValue = Canvas.parseTransformAttribute(element.getAttribute('transform'));
      this.assertEnumEqual([1,2,3,4,5,6], parsedValue);
      
      element.setAttribute('transform', 'scale(2 13) translate(5,15) skewX(11.22)');
      var parsedValue = Canvas.parseTransformAttribute(element.getAttribute('transform'));
      this.assertEnumEqual([2,0,11.22,13,5,15], parsedValue);
      
      /*
      // TODO (kangax): matrices multiplication is not yet supported
      element.setAttribute('transform', 'translate(21,31) translate(11,22)');
      var parsedValue = Canvas.parseTransformAttribute(element.getAttribute('transform'));
      this.assertEnumEqual([1,0,0,1,32,53], parsedValue);
      */
    },
    testCanvasParseSVGDocument: function() {
      
      this.assert(Canvas.parseSVGDocument);
      
      var data;
      new Ajax.Request('../fixtures/path.svg', {
        method: 'get',
        onSuccess: function(resp) {
          var doc = resp.responseXML;
          Canvas.parseSVGDocument(doc.documentElement, function() {
            data = arguments[0];
          });
        }
      });
      
      this.wait(1500, function() {
        this.assertArray(data);
        var path = data[0];
        
        this.assertInstanceOf(Canvas.Path, path);
        this.assertIdentical(EXPECTED_PATH_JSON, path.toJSON());
      });
    }
  });
}