Remove usage of customStyle
Bug: Issue 11329
Change-Id: Iffddf798b27d889fc19559949e6f324bcd91f3fc
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`});
},
});
})();
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>
