Tests: Implement additional tests for SvgImport.

test/assets/clipping.svg

@@ -1,5 +1,5 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-x="0" y="0" width="274.5" height="1040.3" viewBox="81 55.33 274.5 1040.3" xml:space="preserve">
+width="275" height="1041" viewBox="81 55 275 1041" xml:space="preserve">
     <text transform="matrix(1 0 0 1 83.5002 68.5)" font-family="Helvetica" font-size="12">Clipping a path with a path:</text>
     <g>
         <g>

test/assets/gradients-1.svg

@@ -0,0 +1,12 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="450" height="220">
+    <defs>
+        <linearGradient id="gra-1" x1="0" y1="0" x2="0" y2="100%">
+            <stop offset="0%" stop-color="lightblue" />
+            <stop offset="50%" stop-color="lightblue" />
+            <stop offset="50%" stop-color="blue" />
+            <stop offset="100%" stop-color="blue" />
+        </linearGradient>
+    </defs>
+    <rect x="10" y="10" width="200" height="200" fill="url(#gra-1)" stroke="black" stoke-width="4px" />
+    <rect x="240" y="10" width="200" height="200" fill="url(#gra-1)" stroke="black" stoke-width="4px" />
+</svg>

test/assets/gradients-2-.svg

@@ -0,0 +1,11 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="220" height="300">
+<defs>
+<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" gradientUnits="userSpaceOnUse">
+  <stop offset="0%" style="stop-color:red;stop-opacity:0.8"/>
+  <stop offset="30%" style="stop-color:#0000ff;"/>
+  <stop offset="60%" style="stop-color:rgba(0,153,153,0.5);"/>
+  <stop offset="100%" style="stop-color:blue;stop-opacity:1"/>
+</radialGradient>
+</defs>
+<ellipse cx="110" cy="150" rx="110" ry="150" style="fill:url(#grey_blue)"/>
+</svg>

test/assets/gradients-2.svg

@@ -0,0 +1,11 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300" height="300">
+<defs>
+<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" gradientUnits="userSpaceOnUse">
+  <stop offset="0%" style="stop-color:red;"/>
+  <stop offset="30%" style="stop-color:#0000ff;"/>
+  <stop offset="60%" style="stop-color:rgb(0,153,153);"/>
+  <stop offset="100%" style="stop-color:blue;"/>
+</radialGradient>
+</defs>
+<ellipse cx="150" cy="150" rx="150" ry="150" style="fill:url(#grey_blue)"/>
+</svg>

test/assets/viewbox.svg

@@ -0,0 +1,10 @@
+<svg width="300" height="200"
+        viewBox="100 100 1500 1000" preserveAspectRatio="none"
+        xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
+    <rect x="0" y="0" width="1500" height="1000"
+        fill="yellow" stroke="blue" stroke-width="12"  />
+    <path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/>
+    <text x="100" y="600" font-size="200" font-family="Verdana" >
+        Stretch to fit
+    </text>
+</svg>

test/helpers.js

@@ -11,6 +11,7 @@
  */
 
 var isNode = typeof global === 'object',
+    isPhantom = !!window.callPhantom,
     root;
 
 if (isNode) {

test/tests/SvgImport.js

@@ -120,23 +120,48 @@ test('Import complex CompoundPath and clone', function() {
     equals(item.clone(), item, null, { cloned: true });
 });
 
-if (!isNode) {
+function importSVG(assert, url, message, options) {
-    test('Import SVG clipping', function(assert) {
+    var done = assert.async();
-        importSVG(assert, 'assets/clipping.svg',
+    if (!message)
-            'The imported SVG item should visually be the same as the rasterized original SVG data.');
+        message = 'The imported SVG "' + url + '" should visually be the same '
+            + 'as the rasterized original SVG data.';
+    project.importSVG(url, {
+        onLoad: function(item, svg) {
+            function getValue(name) {
+                return parseFloat(svg.getAttribute(name));
+            }
+            /*
+            var size = new Size(getValue('width'), getValue('height'));
+            var group = new Group({
+                children: [
+                    new Shape.Rectangle({
+                        clipMask: true,
+                        size: size
+                    }),
+                    item
+                ]
+            });
+            */
+            compareSVG(done, item, svg, message, options);
+        },
+        onError: function(error) {
+            // TODO: Implement in SvgImport first!
+            pushFailure('Loading SVG from a valid URL should not give an error.');
+            done();
+        }
     });
 }
 
-function importSVG(assert, url, message, options) {
+if (!isNode) {
-        var done = assert.async();
+    // JSDom does not have SVG rendering, so we can't test there.
-        project.importSVG(url, {
+    var svgFiles = ['viewbox', 'clipping', 'gradients-1'];
-            onLoad: function(item, svg) {
+    // TODO: Investigate why Phantom struggles with this file:
-                compareSVG(done, item, svg, message, options);
+    if (!isPhantom)
-            },
+        svgFiles.push('gradients-2');
-            onError: function(error) {
+    svgFiles.forEach(function(name) {
-                // TODO: Implement in SvgImport first!
+        name += '.svg';
-                pushFailure('Loading SVG from a valid URL should not give an error.');
+        test('Import ' + name, function(assert) {
-                done();
+            importSVG(assert, 'assets/' + name);
-            }
         });
+    });
 }