Create opacity mode for image diff tool
Change-Id: I05339aed3f6eeb22829645d7948aabbfb2044c3e
diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode.html b/gr-opacity-diff-mode/gr-opacity-diff-mode.html
new file mode 100644
index 0000000..71a5eff
--- /dev/null
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.html
@@ -0,0 +1,54 @@
+<!--
+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.
+-->
+
+<dom-module id="gr-opacity-diff-mode">
+ <template>
+ <style>
+ :host {
+ display: block;
+ }
+ img {
+ display: block;
+ margin:auto;
+ position: absolute;
+ width: 500px;
+ }
+ #imageRevision {
+ opacity: var(--my-opacity-value);
+ z-index: 1;
+ }
+ #imageDiv {
+ position: relative;
+ margin: auto;
+ width: 500px;
+ }
+ </style>
+ <div id="imageDiv">
+ <img id="imageBase"/>
+ <img id="imageRevision" data-opacity$="{{opacityValue}}"/>
+ </div>
+ <label for="opacitySlider">Opacity</label>
+ <input
+ type="range"
+ id="opacitySlider"
+ min="0.0"
+ max="1.0"
+ value="1.0"
+ step=".01"
+ on-input="handleOpacityChange"/>
+ </template>
+ <script src="gr-opacity-diff-mode.js"></script>
+</dom-module>
\ No newline at end of file
diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode.js b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
new file mode 100644
index 0000000..b9016ee
--- /dev/null
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
@@ -0,0 +1,45 @@
+// 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.
+(function() {
+ 'use strict';
+ Polymer({
+ is: 'gr-opacity-diff-mode',
+
+ properties: {
+ baseImage: Object,
+ revisionImage: Object,
+ opacityValue: Number,
+ },
+
+ attached() {
+ if (this.revisionImage) {
+ const srcRevision = this.computeSrcString(this.revisionImage);
+ this.$.imageRevision.setAttribute('src', srcRevision);
+ }
+ if (this.baseImage) {
+ const srcBase = this.computeSrcString(this.baseImage);
+ this.$.imageBase.setAttribute('src', srcBase);
+ }
+ },
+
+ handleOpacityChange() {
+ this.customStyle['--my-opacity-value'] = this.$.opacitySlider.value;
+ this.updateStyles();
+ },
+
+ computeSrcString(image) {
+ return 'data:' + image['type'] + ';base64, ' + image['body'];
+ },
+ });
+})();
\ No newline at end of file
diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html b/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
new file mode 100644
index 0000000..f20db99
--- /dev/null
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!--
+@license
+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>gr-opacity-diff-mode</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-opacity-diff-mode.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='opacity-diff-fixture'>
+ <template>
+ <gr-opacity-diff-mode></gr-opacity-diff-mode>
+ </template>
+</test-fixture>
+
+<script>
+ suite('gr-opacity-diff-tool tests', () => {
+ let element;
+
+ setup(() => {
+ stub('gr-opacity-diff-mode', {
+ attached() {},
+ });
+ element= fixture('opacity-diff-fixture');
+ });
+
+ 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);
+ element.$.opacitySlider.value = number;
+ element.handleOpacityChange();
+ assert.equal(element.customStyle['--my-opacity-value'], number);
+ });
+ });
+
+ test('create the src string for images', () => {
+ element.revisionImage = {
+ type: 'IMG/src',
+ body: 'Zx3Cgffk=',
+ };
+ const expectedOutcome = 'data:IMG/src;base64, Zx3Cgffk=';
+ assert.equal(element.computeSrcString(element.revisionImage),
+ expectedOutcome);
+ });
+ });
+</script>
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index 6b86c35..24e1c10 100644
--- a/test/index.html
+++ b/test/index.html
@@ -25,6 +25,7 @@
<script>
const suites = [
'../gr-image-diff-tool/gr-image-diff-tool_test.html',
+ '../gr-opacity-diff-mode/gr-opacity-diff-mode_test.html',
'../gr-resemble-diff-mode/gr-resemble-diff-mode_test.html',
];
