From d3d18721f71d842b344fd5591499b6f05c20a9bd Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 20 Apr 2017 23:02:03 -0400
Subject: [PATCH 1/2] fix #1614 - split up fill and fill-opacity for pies

---
 src/traces/pie/style_one.js    |  6 ++--
 test/jasmine/tests/pie_test.js | 66 ++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 test/jasmine/tests/pie_test.js

diff --git a/src/traces/pie/style_one.js b/src/traces/pie/style_one.js
index d6d66738082..0b7f3e7cd60 100644
--- a/src/traces/pie/style_one.js
+++ b/src/traces/pie/style_one.js
@@ -17,9 +17,7 @@ module.exports = function styleOne(s, pt, trace) {
     var lineWidth = trace.marker.line.width || 0;
     if(Array.isArray(lineWidth)) lineWidth = lineWidth[pt.i] || 0;
 
-    s.style({
-        'stroke-width': lineWidth,
-        fill: pt.color
-    })
+    s.style({'stroke-width': lineWidth})
+    .call(Color.fill, pt.color)
     .call(Color.stroke, lineColor);
 };
diff --git a/test/jasmine/tests/pie_test.js b/test/jasmine/tests/pie_test.js
new file mode 100644
index 00000000000..b8929b0d397
--- /dev/null
+++ b/test/jasmine/tests/pie_test.js
@@ -0,0 +1,66 @@
+var d3 = require('d3');
+
+var Plotly = require('@lib/index');
+
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+var customMatchers = require('../assets/custom_matchers');
+var failTest = require('../assets/fail_test');
+
+describe('Pies', function() {
+    'use strict';
+
+    var gd;
+
+    beforeAll(function() {
+        jasmine.addMatchers(customMatchers);
+    });
+
+    beforeEach(function() { gd = createGraphDiv(); });
+
+    afterEach(destroyGraphDiv);
+
+    it('should separate colors and opacities', function(done) {
+        Plotly.newPlot(gd, [{
+            values: [1, 2, 3, 4, 5],
+            type: 'pie',
+            sort: false,
+            marker: {
+                line: {width: 3, color: 'rgba(100,100,100,0.7)'},
+                colors: [
+                    'rgba(0,0,0,0.2)',
+                    'rgba(255,0,0,0.3)',
+                    'rgba(0,255,0,0.4)',
+                    'rgba(0,0,255,0.5)',
+                    'rgba(255,255,0,0.6)'
+                ]
+            }
+        }], {height: 300, width: 400}).then(function() {
+            var colors = [
+                'rgb(0, 0, 0)',
+                'rgb(255, 0, 0)',
+                'rgb(0, 255, 0)',
+                'rgb(0, 0, 255)',
+                'rgb(255, 255, 0)'
+            ];
+            var opacities = [0.2, 0.3, 0.4, 0.5, 0.6];
+
+            function checkPath(d, i) {
+                var path = d3.select(this);
+                expect(path.style('fill')).toBe(colors[i]);
+                expect(path.style('fill-opacity')).toBe(String(opacities[i]));
+                expect(path.style('stroke')).toBe('rgb(100, 100, 100)');
+                expect(path.style('stroke-opacity')).toBe('0.7');
+            }
+            var slices = d3.selectAll('.slice path');
+            slices.each(checkPath);
+            expect(slices.size()).toBe(5);
+
+            var legendEntries = d3.selectAll('.legendpoints path');
+            legendEntries.each(checkPath);
+            expect(legendEntries.size()).toBe(5);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+});

From 9aa726ad4be54a6aaa666a15e90b07cab3c02d28 Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 20 Apr 2017 23:08:21 -0400
Subject: [PATCH 2/2] pie test tweaks

---
 test/jasmine/tests/pie_test.js | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/test/jasmine/tests/pie_test.js b/test/jasmine/tests/pie_test.js
index b8929b0d397..7b974a3769e 100644
--- a/test/jasmine/tests/pie_test.js
+++ b/test/jasmine/tests/pie_test.js
@@ -4,7 +4,6 @@ var Plotly = require('@lib/index');
 
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
-var customMatchers = require('../assets/custom_matchers');
 var failTest = require('../assets/fail_test');
 
 describe('Pies', function() {
@@ -12,10 +11,6 @@ describe('Pies', function() {
 
     var gd;
 
-    beforeAll(function() {
-        jasmine.addMatchers(customMatchers);
-    });
-
     beforeEach(function() { gd = createGraphDiv(); });
 
     afterEach(destroyGraphDiv);
@@ -37,19 +32,20 @@ describe('Pies', function() {
             }
         }], {height: 300, width: 400}).then(function() {
             var colors = [
-                'rgb(0, 0, 0)',
-                'rgb(255, 0, 0)',
-                'rgb(0, 255, 0)',
-                'rgb(0, 0, 255)',
-                'rgb(255, 255, 0)'
+                'rgb(0,0,0)',
+                'rgb(255,0,0)',
+                'rgb(0,255,0)',
+                'rgb(0,0,255)',
+                'rgb(255,255,0)'
             ];
             var opacities = [0.2, 0.3, 0.4, 0.5, 0.6];
 
             function checkPath(d, i) {
                 var path = d3.select(this);
-                expect(path.style('fill')).toBe(colors[i]);
+                // strip spaces (ie 'rgb(0, 0, 0)') so we're not dependent on browser specifics
+                expect(path.style('fill').replace(/\s/g, '')).toBe(colors[i]);
                 expect(path.style('fill-opacity')).toBe(String(opacities[i]));
-                expect(path.style('stroke')).toBe('rgb(100, 100, 100)');
+                expect(path.style('stroke').replace(/\s/g, '')).toBe('rgb(100,100,100)');
                 expect(path.style('stroke-opacity')).toBe('0.7');
             }
             var slices = d3.selectAll('.slice path');