Merge pull request #2703 from asturur/fill-opacity

Fill opacity and stroke opacity
fabricjs · Dec 24, 2015 · 6f0cc79 · 6f0cc79
2 parents 75db7f5 + 453c7b5
commit 6f0cc79
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 1 deletion.
diff --git a/src/parser.js b/src/parser.js
@@ -106,10 +106,17 @@
   function _setStrokeFillOpacity(attributes) {
     for (var attr in colorAttributes) {
 
-      if (!attributes[attr] || typeof attributes[colorAttributes[attr]] === 'undefined') {
+      if (typeof attributes[colorAttributes[attr]] === 'undefined') {
         continue;
       }
 
+      if (!attributes[attr]) {
+        if (!fabric.Object.prototype[attr]) {
+          continue;
+        }
+        attributes[attr] = fabric.Object.prototype[attr];
+      }
+
       if (attributes[attr].indexOf('url(') === 0) {
         continue;
       }

diff --git a/test/unit/parser.js b/test/unit/parser.js
@@ -426,6 +426,52 @@
     }
   });
 
+  test('fill-opacity attribute with fill attribute', function() {
+    var el = fabric.document.createElement(rect);
+    var opacityValue = Math.random().toFixed(2);
+
+    el.setAttribute('fill-opacity', opacityValue);
+    el.setAttribute('fill', '#FF0000');
+    var obj = fabric.Rect.fromElement(el);
+
+    equal(obj.fill, 'rgba(255,0,0,' + parseFloat(opacityValue) * 255 + ')',
+      'opacity should be parsed correctly from "opacity" attribute of ' + tagNames[i] + ' element');
+  });
+
+  test('fill-opacity attribute without fill attribute', function() {
+    var el = fabric.document.createElement(rect);
+    var opacityValue = Math.random().toFixed(2);
+
+    el.setAttribute('fill-opacity', opacityValue);
+    var obj = fabric.Rect.fromElement(el);
+
+    equal(obj.fill, 'rgba(0,0,0,' + parseFloat(opacityValue) * 255 + ')',
+      'opacity should be parsed correctly from "opacity" attribute of ' + tagNames[i] + ' element');
+  });
+
+  test('stroke-opacity attribute with fill attribute', function() {
+    var el = fabric.document.createElement(rect);
+    var opacityValue = Math.random().toFixed(2);
+
+    el.setAttribute('fill-opacity', opacityValue);
+    el.setAttribute('fill', '#FF0000');
+    var obj = fabric.Rect.fromElement(el);
+
+    equal(obj.fill, 'rgba(255,0,0,' + parseFloat(opacityValue) * 255 + ')',
+      'opacity should be parsed correctly from "opacity" attribute of ' + tagNames[i] + ' element');
+  });
+
+  test('stroke-opacity attribute without fill attribute', function() {
+    var el = fabric.document.createElement(rect);
+    var opacityValue = Math.random().toFixed(2);
+
+    el.setAttribute('fill-opacity', opacityValue);
+    var obj = fabric.Rect.fromElement(el);
+
+    equal(obj.fill, 'rgba(0,0,0,' + parseFloat(opacityValue) * 255 + ')',
+      'opacity should be parsed correctly from "opacity" attribute of ' + tagNames[i] + ' element');
+  });
+
   test('getCssRule', function() {
 
     ok(fabric.getCSSRules);