Handle div size & fix error for undefined images

Change-Id: Ie9caadd66a5bb1a78e92a28319143ef6dac48d59

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 0a20ea9..d884ba9 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode.html
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.html
@@ -22,43 +22,43 @@
       }
       img {
         display: block;
-        margin:auto;
-        position: absolute;
         height: var(--img-height);
+        margin: auto;
+        position: absolute;
         width: var(--img-width);
       }
       #imageRevision {
         opacity: var(--my-opacity-value);
         z-index: 1;
       }
-      #imageDiv {
-        position: relative;
-        margin: auto;
-        width: 500px;
+      #imageDivContainer {
+        display: flex;
+        height: var(--div-height);
+        justify-content: space-around;
       }
     </style>
-    <div id="imageDiv">
+    <div id="imageDivContainer">
       <img id="imageBase"/>
-      <img id="imageRevision" data-opacity$="{{opacityValue}}"/>
+      <img data-opacity$="{{opacityValue}}" id="imageRevision"/>
     </div>
     <div>
       <label>
         <input
             id="scaleSizesToggle"
-            type="checkbox"
-            on-tap="handleScaleSizesToggle">
+            on-tap="handleScaleSizesToggle"
+            type="checkbox">
         Scale to same size
       </label>
     </div>
     <label for="opacitySlider">Opacity</label>
     <input
-      type="range"
       id="opacitySlider"
-      min="0.0"
       max="1.0"
-      value="1.0"
+      min="0.0"
+      on-input="handleOpacityChange"
       step=".01"
-      on-input="handleOpacityChange"/>
+      type="range"
+      value="1.0"/>
   </template>
  <script src="gr-opacity-diff-mode.js"></script>
 </dom-module>
\ No newline at end of file

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 7e3591d..237d413 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode.js
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
@@ -26,10 +26,12 @@
       if (this.revisionImage) {
         const srcRevision = this.computeSrcString(this.revisionImage);
         this.$.imageRevision.setAttribute('src', srcRevision);
+        this.resizeDiffContainerHeight();
       }
       if (this.baseImage) {
         const srcBase = this.computeSrcString(this.baseImage);
         this.$.imageBase.setAttribute('src', srcBase);
+        this.resizeDiffContainerHeight();
       }
     },
 
@@ -45,7 +47,8 @@
     handleScaleSizesToggle() {
       let width;
       let height;
-      if (this.$.scaleSizesToggle.checked) {
+      if (this.$.scaleSizesToggle.checked &&
+          this.baseImage && this.revisionImage) {
         width = Math.max(this.revisionImage._width, this.baseImage._width);
         height = Math.max(this.revisionImage._height, this.baseImage._height);
       }
@@ -53,5 +56,13 @@
       this.customStyle['--img-height'] = height ? height + 'px' : null;
       this.updateStyles();
     },
+
+    resizeDiffContainerHeight() {
+      const maxHeight = Math.max(
+          this.baseImage ? this.baseImage._height : 0,
+          this.revisionImage ? this.revisionImage._height : 0);
+      this.customStyle['--div-height'] = maxHeight + 'px';
+      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 6c63c1a..a12913f 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
@@ -118,5 +118,17 @@
         assert.equal(element.customStyle['--img-height'], '400px');
       });
     });
+    test('resize the div container for base & revision image comparison', () => {
+      element.baseImage = {
+        _height: 500,
+      };
+      element.revisionImage = {
+        _height: 300,
+      };
+      assert.equal(element.customStyle['--div-height'], undefined);
+      element.resizeDiffContainerHeight();
+      flushAsynchronousOperations();
+      assert.equal(element.customStyle['--div-height'], '500px');
+    });
   });
 </script>
\ No newline at end of file