From 27999a327cafecc94e9b1cbcf7feb718591f8f51 Mon Sep 17 00:00:00 2001
From: kangax <kangax@gmail.com>
Date: Thu, 4 Aug 2011 20:48:25 -0400
Subject: [PATCH] Add unit tests for `fabric.loadSVGFromString`.

---
 demos/kitchensink/demo.js    |  4 ++++
 demos/kitchensink/index.html | 39 +++++++++++++++++-----------------
 dist/all.js                  | 11 +++++++---
 src/util/misc.js             |  1 +
 test/unit/util.js            | 41 ++++++++++++++++++++++++++++++++++++
 5 files changed, 74 insertions(+), 22 deletions(-)

diff --git a/demos/kitchensink/demo.js b/demos/kitchensink/demo.js
index 9ae98e8a..7d825e90 100644
--- a/demos/kitchensink/demo.js
+++ b/demos/kitchensink/demo.js
@@ -614,6 +614,10 @@
       if (objects.length === 1) {
         canvas.add(objects[0]);
       }
+      else {
+        canvas.add(new fabric.PathGroup(objects));
+      }
+      canvas.renderAll();
     });
   };
   
diff --git a/demos/kitchensink/index.html b/demos/kitchensink/index.html
index 25745e90..483a992e 100644
--- a/demos/kitchensink/index.html
+++ b/demos/kitchensink/index.html
@@ -257,7 +257,26 @@
               <input type="color" value="rgb(0,0,0)" id="drawing-color" size="15">
             </div>
           </li>
-        
+          
+          <li style="margin-top:10px">
+            
+<label for="svg-console">Load SVG:</label>
+
+<textarea rows="15" cols="55" id="svg-console">
+&lt;?xml version="1.0" standalone="no"?>
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+&lt;svg width="100%" height="100%" version="1.1"
+xmlns="http://www.w3.org/2000/svg">
+
+&lt;rect width="300" height="100"
+style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
+&lt;/svg>
+</textarea>
+            <button type="button" id="load-svg">Load</button>
+          </li>
+          
           <li style="margin-top:10px;">
             <label for="canvas-console">Execute code:</label>
   <textarea rows="15" cols="55" id="canvas-console">
@@ -289,24 +308,6 @@ canvas.add(new fabric.Circle({
   </textarea>
             <button type="button" id="execute">Execute</button>
           </li>
-          <li style="margin-top:10px">
-            
-<label for="svg-console">Load SVG:</label>
-
-<textarea rows="15" cols="55" id="svg-console">
-&lt;?xml version="1.0" standalone="no"?>
-&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-&lt;svg width="100%" height="100%" version="1.1"
-xmlns="http://www.w3.org/2000/svg">
-
-&lt;rect width="300" height="100"
-style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
-&lt;/svg>
-</textarea>
-            <button type="button" id="load-svg">Load</button>
-          </li>
         </ul>
       </div>
     </div>
diff --git a/dist/all.js b/dist/all.js
index e5e642f1..41b02006 100644
--- a/dist/all.js
+++ b/dist/all.js
@@ -1767,7 +1767,7 @@ fabric.Observable = {
    };
 
    /**
-    * Takes url corresponding to an SVG document, and parses it to a set of objects
+    * Takes url corresponding to an SVG document, and parses it into a set of fabric objects
     * @method loadSVGFromURL
     * @param {String} url
     * @param {Function} callback
@@ -1799,8 +1799,6 @@ fabric.Observable = {
        var doc = xml.documentElement;
        if (!doc) return;
 
-       console.log(doc);
-
        fabric.parseSVGDocument(doc, function (results, options) {
          svgCache.set(url, {
            objects: fabric.util.array.invoke(results, 'toObject'),
@@ -1826,7 +1824,14 @@ fabric.Observable = {
    return ({ objects: objects, options: options });
   }
 
+  /**
+    * Takes string corresponding to an SVG document, and parses it into a set of fabric objects
+    * @method loadSVGFromString
+    * @param {String} string
+    * @param {Function} callback
+    */
   function loadSVGFromString(string, callback) {
+    string = string.trim();
     var doc;
     if (typeof DOMParser !== 'undefined') {
       var parser = new DOMParser();
diff --git a/src/util/misc.js b/src/util/misc.js
index 6e4f0b9f..72c539e3 100644
--- a/src/util/misc.js
+++ b/src/util/misc.js
@@ -213,6 +213,7 @@
     * @param {Function} callback
     */
   function loadSVGFromString(string, callback) {
+    string = string.trim();
     var doc;
     if (typeof DOMParser !== 'undefined') {
       var parser = new DOMParser();
diff --git a/test/unit/util.js b/test/unit/util.js
index e6e4998f..c7b5f522 100644
--- a/test/unit/util.js
+++ b/test/unit/util.js
@@ -282,4 +282,45 @@
       equals('none', el.userSelect);
     }
   });
+  
+  test('fabric.loadSVGFromURL', function() {
+    equal("function", typeof fabric.loadSVGFromURL);
+  });
+  
+  var SVG_DOC_AS_STRING = '<?xml version="1.0"?>\
+    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\
+      <polygon fill="red" stroke="blue" stroke-width="10" points="350, 75 379,161 469,161\
+        397,215 423,301 350,250 277,301 303,215 231,161 321,161" />\
+    </svg>';
+  
+  asyncTest('fabric.loadSVGFromString', function() {
+    equal("function", typeof fabric.loadSVGFromString);
+    
+    var loadedObjects = [ ];
+    fabric.loadSVGFromString(SVG_DOC_AS_STRING, function(objects) {
+      loadedObjects = objects;
+    });
+    
+    setTimeout(function() {
+      ok(loadedObjects[0] instanceof fabric.Polygon);
+      equals('red', loadedObjects[0].fill);
+      start();
+    }, 1000);
+  });
+  
+  asyncTest('fabric.loadSVGFromString with surrounding whitespace', function() {
+    var loadedObjects = [ ];
+    fabric.loadSVGFromString('   \n\n  ' + SVG_DOC_AS_STRING + '  ', function(objects) {
+      loadedObjects = objects;
+    });
+    
+    setTimeout(function() {
+      ok(loadedObjects[0] instanceof fabric.Polygon);
+      equals('red', loadedObjects[0] && loadedObjects[0].fill);
+      start();
+    }, 1000);
+  });
+  
+  
 })();
\ No newline at end of file