Added tests for gradients

dist/snap.svg.js

@@ -4105,7 +4105,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
         wrap = Snap._.wrap,
         is = Snap.is,
         getSomeDefs = Snap._.getSomeDefs,
-        reURLValue = /^url\(#?([^)]+)\)$/,
+        reURLValue = /^url\((['"]?)([^)]+)\1\)$/,
         $ = Snap._.$,
         URL = Snap.url,
         Str = String,
@@ -4120,7 +4120,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
      = (string) unwrapped path
     \*/
     Snap.deurl = function (value) {
-        return String(value).match(reURLValue)[1];
+        return String(value).match(reURLValue)[2];
     }
     // Attributes event handlers
     eve.on("snap.util.attr.mask", function (value) {
@@ -4508,7 +4508,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
         }
         eve.stop();
         var value = eve("snap.util.getattr.fill", this, true).firstDefined();
-        return Snap("#" + Snap.deurl(value)) || value;
+        return Snap(Snap.deurl(value)) || value;
     })(-1);
     eve.on("snap.util.getattr.stroke", function (internal) {
         if (internal) {
@@ -4516,7 +4516,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
         }
         eve.stop();
         var value = eve("snap.util.getattr.stroke", this, true).firstDefined();
-        return Snap("#" + Snap.deurl(value)) || value;
+        return Snap(Snap.deurl(value)) || value;
     })(-1);
     eve.on("snap.util.getattr.viewBox", function () {
         eve.stop();

src/attr.js

@@ -17,7 +17,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
         wrap = Snap._.wrap,
         is = Snap.is,
         getSomeDefs = Snap._.getSomeDefs,
-        reURLValue = /^url\(#?([^)]+)\)$/,
+        reURLValue = /^url\((['"]?)([^)]+)\1\)$/,
         $ = Snap._.$,
         URL = Snap.url,
         Str = String,
@@ -32,7 +32,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
      = (string) unwrapped path
     \*/
     Snap.deurl = function (value) {
-        return String(value).match(reURLValue)[1];
+        return String(value).match(reURLValue)[2];
     }
     // Attributes event handlers
     eve.on("snap.util.attr.mask", function (value) {
@@ -420,7 +420,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
         }
         eve.stop();
         var value = eve("snap.util.getattr.fill", this, true).firstDefined();
-        return Snap("#" + Snap.deurl(value)) || value;
+        return Snap(Snap.deurl(value)) || value;
     })(-1);
     eve.on("snap.util.getattr.stroke", function (internal) {
         if (internal) {
@@ -428,7 +428,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
         }
         eve.stop();
         var value = eve("snap.util.getattr.stroke", this, true).firstDefined();
-        return Snap("#" + Snap.deurl(value)) || value;
+        return Snap(Snap.deurl(value)) || value;
     })(-1);
     eve.on("snap.util.getattr.viewBox", function () {
         eve.stop();

test/gradients.js

@@ -0,0 +1,78 @@
+describe("Gradients", function () {
+    var s,
+        r;
+    beforeEach(function () {
+        s = Snap(100, 100);
+        r = s.rect(0, 0, 100, 100);
+    });
+    afterEach(function () {
+        s.remove();
+    });
+    function getGrad(el) {
+        if (!el) {
+            el = r;
+        }
+        var id = el.node.getAttribute("fill");
+        id = Snap.deurl(id);
+        return s.select(id);
+    }
+
+    it("creates simple gradient", function () {
+        r.attr({fill: "l(0,0,1,0)#fff-#000"});
+        var g = getGrad();
+        expect(g).to.not.be(null);
+        expect(g.stops().length).to.be(2);
+        expect(g.stops()[0].attr("stop-color")).to.be("rgb(255, 255, 255)");
+    });
+
+    it("creates radial gradient", function () {
+        r.attr({fill: "r()#fff-#000"});
+        var g = getGrad();
+        expect(g).to.not.be(null);
+        expect(g.stops().length).to.be(2);
+        expect(g.stops()[0].attr("stop-color")).to.be("rgb(255, 255, 255)");
+    });
+
+    it("returns gradient for .attr(\"fill\") call", function () {
+        r.attr({fill: "l(0,0,1,0)#fff-#fc0:20-#000"});
+        var g = getGrad(),
+            g2 = r.attr("fill");
+        expect(g).to.be(g2);
+    });
+
+    it("creates complex gradient", function () {
+        r.attr({fill: "l(0,0,1,0)#fff-#fc0:20-#000"});
+        var g = getGrad();
+        expect(g).to.not.be(null);
+        expect(g.stops().length).to.be(3);
+        expect(g.stops()[0].attr("stop-color")).to.be("rgb(255, 255, 255)");
+        expect(g.stops()[1].attr("offset")).to.be("20%");
+    });
+
+    it("updates simple gradient", function () {
+        r.attr({fill: "l(0,0,1,0)#fff-#000"});
+        var g = getGrad();
+        expect(g).to.not.be(null);
+        expect(g.stops().length).to.be(2);
+        expect(g.stops()[0].attr("stop-color")).to.be("rgb(255, 255, 255)");
+        g.setStops("#000-#fff");
+        expect(g.stops().length).to.be(2);
+        expect(g.stops()[0].attr("stop-color")).to.be("rgb(0, 0, 0)");
+        g.setStops("#000-red-#fff");
+        expect(g.stops().length).to.be(3);
+        expect(g.stops()[1].attr("stop-color")).to.be("rgb(255, 0, 0)");
+    });
+
+    it("adds stops to the gradient", function () {
+        r.attr({fill: "l(0,0,1,0)#fff-#000"});
+        var g = getGrad();
+        expect(g).to.not.be(null);
+        expect(g.stops().length).to.be(2);
+        expect(g.stops()[0].attr("stop-color")).to.be("rgb(255, 255, 255)");
+        g.addStop("red", 20);
+        expect(g.stops().length).to.be(3);
+        expect(g.stops()[1].attr("stop-color")).to.be("rgb(255, 0, 0)");
+        expect(g.stops()[1].attr("offset")).to.be("20%");
+    });
+
+});

test/test.html

@@ -41,6 +41,7 @@
         <script src="attradd.js"></script>
         <script src="path.js"></script>
         <script src="element.js"></script>
+        <script src="gradients.js"></script>
         <script src="set.js"></script>
         <script src="filter.js"></script>
         <script src="matrix.js"></script>