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', ];