Create functionality to change opacity image size

Change-Id: Iee7f6d3c8e190bf26eed932b81543db72211caa4

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

diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode.html b/gr-opacity-diff-mode/gr-opacity-diff-mode.html
index 71a5eff..0a20ea9 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode.html
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.html
@@ -24,7 +24,8 @@
         display: block;
         margin:auto;
         position: absolute;
-        width: 500px;
+        height: var(--img-height);
+        width: var(--img-width);
       }
       #imageRevision {
         opacity: var(--my-opacity-value);
@@ -40,6 +41,15 @@
       <img id="imageBase"/>
       <img id="imageRevision" data-opacity$="{{opacityValue}}"/>
     </div>
+    <div>
+      <label>
+        <input
+            id="scaleSizesToggle"
+            type="checkbox"
+            on-tap="handleScaleSizesToggle">
+        Scale to same size
+      </label>
+    </div>
     <label for="opacitySlider">Opacity</label>
     <input
       type="range"

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 b9016ee..7e3591d 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode.js
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
@@ -41,5 +41,17 @@
     computeSrcString(image) {
       return 'data:' + image['type'] + ';base64, ' + image['body'];
     },
+
+    handleScaleSizesToggle() {
+      let width;
+      let height;
+      if (this.$.scaleSizesToggle.checked) {
+        width = Math.max(this.revisionImage._width, this.baseImage._width);
+        height = Math.max(this.revisionImage._height, this.baseImage._height);
+      }
+      this.customStyle['--img-width'] = width ? width + 'px' : null;
+      this.customStyle['--img-height'] = height ? height + 'px' : null;
+      this.updateStyles();
+    },
   });
 })();
\ No newline at end of file

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 f20db99..6c63c1a 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
@@ -62,5 +62,61 @@
       assert.equal(element.computeSrcString(element.revisionImage),
           expectedOutcome);
     });
+
+    suite('size scaling', () => {
+      test('base image larger', () => {
+        element.baseImage = {
+          _width: 200,
+          _height: 300,
+        };
+        element.revisionImage = {
+          _width: 100,
+          _height: 90,
+        };
+        assert.equal(element.customStyle['--img-width'], undefined);
+        assert.equal(element.customStyle['--img-height'], undefined);
+        element.$.scaleSizesToggle.checked = true;
+        element.handleScaleSizesToggle();
+        flushAsynchronousOperations();
+        assert.equal(element.customStyle['--img-width'], '200px');
+        assert.equal(element.customStyle['--img-height'], '300px');
+      });
+
+      test('revisionImage larger', () => {
+        element.baseImage = {
+          _width: 200,
+          _height: 300,
+        };
+        element.revisionImage = {
+          _width: 400,
+          _height: 500,
+        };
+        assert.equal(element.customStyle['--img-width'], null);
+        assert.equal(element.customStyle['--img-height'], null);
+        element.$.scaleSizesToggle.checked = true;
+        element.handleScaleSizesToggle();
+        flushAsynchronousOperations();
+        assert.equal(element.customStyle['--img-width'], '400px');
+        assert.equal(element.customStyle['--img-height'], '500px');
+      });
+
+      test('bigger base width, smaller base height', () => {
+        element.baseImage = {
+          _width: 200,
+          _height: 300,
+        };
+        element.revisionImage = {
+          _width: 140,
+          _height: 400,
+        };
+        assert.equal(element.customStyle['--img-width'], null);
+        assert.equal(element.customStyle['--img-height'], null);
+        element.$.scaleSizesToggle.checked = true;
+        element.handleScaleSizesToggle();
+        flushAsynchronousOperations();
+        assert.equal(element.customStyle['--img-width'], '200px');
+        assert.equal(element.customStyle['--img-height'], '400px');
+      });
+    });
   });
 </script>
\ No newline at end of file

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

diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
index c9ffb5d..9fe5161 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
@@ -45,7 +45,7 @@
       element = fixture('basicFixture');
     });
 
-    teardown(() => { sandbox.restore(); })
+    teardown(() => { sandbox.restore(); });
 
     test('test initialization', () => {
       assert.notEqual(element, null);