Remove usage of customStyle

Bug: Issue 11329
Change-Id: Iffddf798b27d889fc19559949e6f324bcd91f3fc

gr-opacity-diff-mode/gr-opacity-diff-mode.js

diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode.js b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
index 3574387..a0c906f 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode.js
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
@@ -52,8 +52,7 @@
     },
 
     handleOpacityChange() {
-      this.customStyle['--my-opacity-value'] = this.$.opacitySlider.value;
-      this.updateStyles();
+      this.updateStyles({'--my-opacity-value': this.$.opacitySlider.value});
     },
 
     computeSrcString(image) {
@@ -68,21 +67,20 @@
         height = this._maxHeight;
       }
 
-      this.customStyle['--img-width'] = width ? width + 'px' : null;
-      this.customStyle['--img-height'] = height ? height + 'px' : null;
-      this.updateStyles();
+      this.updateStyles({
+        '--img-width': width ? width + 'px' : null,
+        '--img-height': height ? height + 'px' : null,
+      });
     },
 
     _handleHeightChange(height) {
       if (!height) { return; }
-      this.customStyle['--div-height'] = height + 'px';
-      this.updateStyles();
+      this.updateStyles({'--div-height': `${height}px`});
     },
 
     _handleWidthChange(width) {
       if (!width) { return; }
-      this.customStyle['--div-width'] = width + 'px';
-      this.updateStyles();
+      this.updateStyles({'--div-width': `${width}px`});
     },
   });
 })();

gr-opacity-diff-mode/gr-opacity-diff-mode_test.html

diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html b/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
index b98c19b..7ea09c5 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
@@ -33,6 +33,18 @@
 </test-fixture>
 
 <script>
+  function getComputedStyleValue(name, el) {
+    let style;
+    if (window.ShadyCSS) {
+      style = ShadyCSS.getComputedStyleValue(el, name);
+    } else if (el.getComputedStyleValue) {
+      style = el.getComputedStyleValue(name);
+    } else {
+      style = getComputedStyle(el).getPropertyValue(name);
+    }
+    return style;
+  };
+
   suite('gr-opacity-diff-tool tests', () => {
     let element;
 
@@ -43,10 +55,14 @@
     test('slider changes opacity of image', () => {
       const arrayOfNumbers = [0.73, 0.5, 0.0];
       arrayOfNumbers.forEach(number => {
-        assert.notEqual(element.customStyle['--my-opacity-value'], number);
+        assert.notEqual(
+          getComputedStyleValue('--my-opacity-value', element),
+          number);
         element.$.opacitySlider.value = number;
         element.handleOpacityChange();
-        assert.equal(element.customStyle['--my-opacity-value'], number);
+        assert.equal(
+          getComputedStyleValue('--my-opacity-value', element),
+          number);
       });
     });
 
@@ -64,22 +80,22 @@
       element._maxWidth = 200;
       element._maxHeight = 400;
 
-      assert.equal(element.customStyle['--img-width'], null);
-      assert.equal(element.customStyle['--img-height'], null);
+      assert.equal(getComputedStyleValue('--img-width', element), '');
+      assert.equal(getComputedStyleValue('--img-height', element), '');
       MockInteractions.tap(element.$.scaleSizesToggle);
       flushAsynchronousOperations();
 
-      assert.equal(element.customStyle['--img-width'], '200px');
-      assert.equal(element.customStyle['--img-height'], '400px');
+      assert.equal(getComputedStyleValue('--img-width', element), '200px');
+      assert.equal(getComputedStyleValue('--img-height', element), '400px');
     });
 
     test('resize the div container for base & revision image comparison', () => {
-      assert.equal(element.customStyle['--div-height'], undefined);
+      assert.equal(getComputedStyleValue('--div-height', element), '');
       element._maxHeight = 500;
       element._maxWidth = 300;
       flushAsynchronousOperations();
 
-      assert.equal(element.customStyle['--div-height'], '500px');
+      assert.equal(getComputedStyleValue('--div-height', element), '500px');
     });
   });
 </script>