From fbf399d1b96cca6767af85788e461fff4b5bd593 Mon Sep 17 00:00:00 2001
From: Max Franz <maxkfranz@gmail.com>
Date: Thu, 22 Nov 2018 12:41:33 -0500
Subject: [PATCH] In the helper function `style.getStylePropertyValue()`,
 return a processed (generated) string only if the request for the value was
 in rendered units.  Otherwise, just return the existing string representation
 in `ele.pstyle(propName).strValue`.

- For the rendered case, make sure that a space-separated string is returned for `multiple:true` properties.
- Also for the rendered case, make sure that units are handled more strictly.
- This affects `ele.style()` and `ele.renderedStyle()` getters.

Ref : Cannot query style value when it supports string array #2221
---
 src/style/get-for-ele.js | 34 +++++++++++++++++++++++++++-------
 test/collection-style.js | 17 ++++++++++++++++-
 2 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/src/style/get-for-ele.js b/src/style/get-for-ele.js
index fbdb0d26db..00845af768 100644
--- a/src/style/get-for-ele.js
+++ b/src/style/get-for-ele.js
@@ -54,16 +54,36 @@ styfn.getStylePropertyValue = function( ele, propName, isRenderedVal ){
 
     let type = prop.type;
     let styleProp = ele.pstyle( prop.name );
-    let zoom = ele.cy().zoom();
 
     if( styleProp ){
-      let units = styleProp.units ? type.implicitUnits || 'px' : null;
-      let val = units ? [].concat( styleProp.pfValue ).map( function( pfValue ){
-        return ( pfValue * (isRenderedVal ? zoom : 1) ) + units;
-      } ).join( ' ' ) : styleProp.strValue;
-
-      return val;
+      let { value, units, strValue } = styleProp;
+
+      if( isRenderedVal && type.number && value != null && is.number(value) ){
+        let zoom = ele.cy().zoom();
+        let getRenderedValue = val => val * zoom;
+        let getValueStringWithUnits = (val, units) => getRenderedValue(val) + units;
+        let isArrayValue = is.array(value);
+        let haveUnits = isArrayValue ? units.every(u => u != null) : units != null;
+
+        if( haveUnits ){
+          if( isArrayValue ){
+            return value.map( (v, i) => getValueStringWithUnits(v, units[i]) ).join(' ');
+          } else {
+            return getValueStringWithUnits(value, units);
+          }
+        } else {
+          if( isArrayValue ){
+            return value.map(v => is.string(v) ? v : '' + getRenderedValue(v)).join(' ');
+          } else {
+            return '' + getRenderedValue(value);
+          }
+        }
+      } else if( strValue != null ){
+        return strValue;
+      }
     }
+
+    return null;
   }
 };
 
diff --git a/test/collection-style.js b/test/collection-style.js
index 29c1ccc792..2c4a39a242 100644
--- a/test/collection-style.js
+++ b/test/collection-style.js
@@ -33,7 +33,10 @@ describe('Collection style', function(){
         {
           selector: '#n1',
           style: {
-            label: useFn(function(){ return 'n1'; })
+            label: useFn(function(){ return 'n1'; }),
+            width: 20,
+            'background-image': ['/test/image.png', '/test/image2.png'],
+            opacity: 0.5
           }
         },
 
@@ -192,6 +195,18 @@ describe('Collection style', function(){
       expect( style['label'] ).to.equal( 'n2' );
     });
 
+    it('ele.style(propName) works for string array property value', function(){
+      expect( cy.$('#n1').style('background-image') ).to.deep.equal( '/test/image.png /test/image2.png' );
+    });
+
+    it('ele.style(propName) works for pixel property value', function(){
+      expect( cy.$('#n1').style('width') ).to.equal('20px');
+    });
+
+    it('ele.style(propName) works for unitless property value', function(){
+      expect( cy.$('#n1').style('opacity') ).to.equal('0.5');
+    });
+
     it('ele.numericStyle() returns size as a number', function(){
       var ret = cy.$('#n1').style('width', '30px').numericStyle('width');