Hide image diff if revision or base is missing Change-Id: Ibd5a63794908f3284f94b7175d956ccf8e465600

diff --git a/gr-image-diff-tool/gr-image-diff-tool.html b/gr-image-diff-tool/gr-image-diff-tool.html
index 55d1c46..6d96b86 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.html
+++ b/gr-image-diff-tool/gr-image-diff-tool.html

@@ -22,13 +22,13 @@
     <style>
       :host {
         background-color: #f5f5f5;
-        border-top: 1px solid var(--border-color, #ddd);
         font-family: var(--font-family);
         display: block;
       }
       #header {
         align-items: center;
         border-bottom: 1px solid var(--border-color, #ddd);
+        border-top: 1px solid var(--border-color, #ddd);
         display: inline-flex;
         padding: .5em;
         width: 100%;
@@ -45,7 +45,6 @@
         padding: 0 .15em;
       }
     </style>
-
     <div id="header">
       <h3>Image Diff</h3>
       <select value="{{_observeMode::change}}" id="dropdown">
@@ -53,13 +52,11 @@
         <option value="opacity">Opacity Mode</option>
       </select>
     </div>
-
     <template is="dom-if" if="[[_showResembleMode]]" restamp="true">
       <gr-resemble-diff-mode
           base-image="[[baseImage]]"
           revision-image="[[revisionImage]]"></gr-resemble-diff-mode>
     </template>
-
     <template is="dom-if" if="[[_showOpacityMode]]" restamp="true">
       <gr-opacity-diff-mode
           base-image="[[baseImage]]"
@@ -67,4 +64,4 @@
     </template>
   </template>
   <script src="gr-image-diff-tool.js"></script>
-</dom-module>
\ No newline at end of file
+</dom-module>

diff --git a/gr-image-diff-tool/gr-image-diff-tool.js b/gr-image-diff-tool/gr-image-diff-tool.js
index 95df491..811db7c 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.js
+++ b/gr-image-diff-tool/gr-image-diff-tool.js

@@ -23,6 +23,13 @@
     is: 'gr-image-diff-tool',
 
     properties: {
+      baseImage: Object,
+      revisionImage: Object,
+      hidden: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
       _showResembleMode: Boolean,
       _showOpacityMode: Boolean,
       _observeMode: {
@@ -32,6 +39,10 @@
     },
 
     attached() {
+      if (!this.baseImage || !this.revisionImage) {
+        // No need to show the diff tool if there are no images.
+        this.hidden = true;
+      }
       const diff_mode = this._getMode();
       diff_mode === DiffModes.OPACITY ?
           this._displayOpacityMode() : this._displayResembleMode();
@@ -64,4 +75,4 @@
       this._setMode(DiffModes.OPACITY);
     },
   });
-})();
\ No newline at end of file
+})();

diff --git a/gr-image-diff-tool/gr-image-diff-tool_test.html b/gr-image-diff-tool/gr-image-diff-tool_test.html
index ec1a4be..645422a 100644
--- a/gr-image-diff-tool/gr-image-diff-tool_test.html
+++ b/gr-image-diff-tool/gr-image-diff-tool_test.html

@@ -41,8 +41,9 @@
     let sandbox;
 
     setup(() => {
-      element = fixture('basicFixture');
       sandbox = sinon.sandbox.create();
+      element = fixture('basicFixture');
+      flushAsynchronousOperations();
     });
 
     teardown(() => { sandbox.restore(); });
@@ -79,4 +80,4 @@
       assert.equal(element._setMode.callCount, 3);
     });
   });
-</script>
\ No newline at end of file
+</script>