Create functionality to switch between resemble mode and opacity mode Change-Id: I9780f98a7186ed93674e3c5b608e4bb23031a1ac

diff --git a/gr-image-diff-tool/gr-image-diff-tool.html b/gr-image-diff-tool/gr-image-diff-tool.html
index eb49f60..68e7f07 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.html
+++ b/gr-image-diff-tool/gr-image-diff-tool.html

@@ -14,10 +14,33 @@
 limitations under the License.
 -->
 
+<link rel="import" href="../gr-opacity-diff-mode/gr-opacity-diff-mode.html">
+<link rel="import" href="../gr-resemble-diff-mode/gr-resemble-diff-mode.html">
+
 <dom-module id="gr-image-diff-tool">
   <template>
     <style>
+      :host {
+        display: block;
+      }
     </style>
+
+    <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]]"
+          revision-image="[[revisionImage]]"></gr-opacity-diff-mode>
+    </template>
+
+    <select id="dropdown" on-change="handleSelect">
+      <option value="resemble">Resemble Mode</option>
+      <option value="opacity">Opacity Mode</option>
+    </select>
   </template>
   <script src="gr-image-diff-tool.js"></script>
 </dom-module>
\ No newline at end of file

diff --git a/gr-image-diff-tool/gr-image-diff-tool.js b/gr-image-diff-tool/gr-image-diff-tool.js
index 19769a7..20a0ac9 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.js
+++ b/gr-image-diff-tool/gr-image-diff-tool.js

@@ -16,8 +16,27 @@
 
   Polymer({
     is: 'gr-image-diff-tool',
+
     properties: {
-      hi: String,
+      _showResembleMode: {
+        type: Boolean,
+        value: true,
+      },
+      _showOpacityMode: {
+        type: Boolean,
+        value: false,
+      },
+    },
+
+    handleSelect() {
+      const mode = this.$.dropdown.value;
+      if (mode === 'resemble') {
+        this._showResembleMode = true;
+        this._showOpacityMode = false;
+      } else if (mode === 'opacity') {
+        this._showOpacityMode = true;
+        this._showResembleMode = false;
+      }
     },
   });
 })();
\ 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
new file mode 100644
index 0000000..0fe8a3e
--- /dev/null
+++ b/gr-image-diff-tool/gr-image-diff-tool_test.html

@@ -0,0 +1,68 @@
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+<title>image-diff-tool</title>
+
+<link rel="import" href="../node_modules/polymer/polymer.html">
+<link rel="import" href="../node_modules/@polymer/test-fixture/test-fixture.html">
+<link rel="import" href="../node_modules/iron-test-helpers/iron-test-helpers.html">
+<link rel="import" href="./gr-image-diff-tool.html">
+
+<script>void(0);</script>
+
+<script src="../node_modules/webcomponents.js/webcomponents-lite.min.js"></script>
+<script src="../node_modules/web-component-tester/browser.js"></script>
+<script src="../node_modules/@polymer/sinonjs/sinon.js"></script>
+
+<test-fixture id="basicFixture">
+  <template>
+    <gr-image-diff-tool>
+    </gr-image-diff-tool>
+  </template>
+</test-fixture>
+
+<script>
+  suite('gr-image-diff-tool tests', () => {
+    let element;
+
+    setup(() => {
+      element = fixture('basicFixture');
+    });
+
+    test('test opacity mode', () => {
+      element.$.dropdown.value = 'opacity';
+      element.handleSelect();
+      assert.isTrue(element._showOpacityMode);
+      assert.isFalse(element._showResembleMode);
+      flushAsynchronousOperations();
+
+      assert.ok(element.$$('gr-opacity-diff-mode'));
+      assert.equal(element.$$('gr-resemble-diff-mode'), null);
+    });
+
+    test('test resemble mode', () => {
+      element.$.dropdown.value = 'resemble';
+      element.handleSelect();
+      assert.isTrue(element._showResembleMode);
+      assert.isFalse(element._showOpacityMode);
+      flushAsynchronousOperations();
+
+      assert.ok(element.$$('gr-resemble-diff-mode'));
+      assert.equal(element.$$('gr-opacity-diff-mode'), null);
+    });
+  });
+</script>
\ No newline at end of file

diff --git a/test/index.html b/test/index.html
index 181c106..6b86c35 100644
--- a/test/index.html
+++ b/test/index.html

@@ -24,6 +24,7 @@
 
 <script>
   const suites = [
+    '../gr-image-diff-tool/gr-image-diff-tool_test.html',
     '../gr-resemble-diff-mode/gr-resemble-diff-mode_test.html',
   ];