Create functionality to change opacity image size
Change-Id: Iee7f6d3c8e190bf26eed932b81543db72211caa4
diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode.html b/gr-opacity-diff-mode/gr-opacity-diff-mode.html
index 71a5eff..0a20ea9 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode.html
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.html
@@ -24,7 +24,8 @@
display: block;
margin:auto;
position: absolute;
- width: 500px;
+ height: var(--img-height);
+ width: var(--img-width);
}
#imageRevision {
opacity: var(--my-opacity-value);
@@ -40,6 +41,15 @@
<img id="imageBase"/>
<img id="imageRevision" data-opacity$="{{opacityValue}}"/>
</div>
+ <div>
+ <label>
+ <input
+ id="scaleSizesToggle"
+ type="checkbox"
+ on-tap="handleScaleSizesToggle">
+ Scale to same size
+ </label>
+ </div>
<label for="opacitySlider">Opacity</label>
<input
type="range"
diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode.js b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
index b9016ee..7e3591d 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode.js
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
@@ -41,5 +41,17 @@
computeSrcString(image) {
return 'data:' + image['type'] + ';base64, ' + image['body'];
},
+
+ handleScaleSizesToggle() {
+ let width;
+ let height;
+ if (this.$.scaleSizesToggle.checked) {
+ width = Math.max(this.revisionImage._width, this.baseImage._width);
+ height = Math.max(this.revisionImage._height, this.baseImage._height);
+ }
+ this.customStyle['--img-width'] = width ? width + 'px' : null;
+ this.customStyle['--img-height'] = height ? height + 'px' : null;
+ this.updateStyles();
+ },
});
})();
\ 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
index f20db99..6c63c1a 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
@@ -62,5 +62,61 @@
assert.equal(element.computeSrcString(element.revisionImage),
expectedOutcome);
});
+
+ suite('size scaling', () => {
+ test('base image larger', () => {
+ element.baseImage = {
+ _width: 200,
+ _height: 300,
+ };
+ element.revisionImage = {
+ _width: 100,
+ _height: 90,
+ };
+ assert.equal(element.customStyle['--img-width'], undefined);
+ assert.equal(element.customStyle['--img-height'], undefined);
+ element.$.scaleSizesToggle.checked = true;
+ element.handleScaleSizesToggle();
+ flushAsynchronousOperations();
+ assert.equal(element.customStyle['--img-width'], '200px');
+ assert.equal(element.customStyle['--img-height'], '300px');
+ });
+
+ test('revisionImage larger', () => {
+ element.baseImage = {
+ _width: 200,
+ _height: 300,
+ };
+ element.revisionImage = {
+ _width: 400,
+ _height: 500,
+ };
+ assert.equal(element.customStyle['--img-width'], null);
+ assert.equal(element.customStyle['--img-height'], null);
+ element.$.scaleSizesToggle.checked = true;
+ element.handleScaleSizesToggle();
+ flushAsynchronousOperations();
+ assert.equal(element.customStyle['--img-width'], '400px');
+ assert.equal(element.customStyle['--img-height'], '500px');
+ });
+
+ test('bigger base width, smaller base height', () => {
+ element.baseImage = {
+ _width: 200,
+ _height: 300,
+ };
+ element.revisionImage = {
+ _width: 140,
+ _height: 400,
+ };
+ assert.equal(element.customStyle['--img-width'], null);
+ assert.equal(element.customStyle['--img-height'], null);
+ element.$.scaleSizesToggle.checked = true;
+ element.handleScaleSizesToggle();
+ flushAsynchronousOperations();
+ assert.equal(element.customStyle['--img-width'], '200px');
+ assert.equal(element.customStyle['--img-height'], '400px');
+ });
+ });
});
</script>
\ No newline at end of file
diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
index c9ffb5d..9fe5161 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
@@ -45,7 +45,7 @@
element = fixture('basicFixture');
});
- teardown(() => { sandbox.restore(); })
+ teardown(() => { sandbox.restore(); });
test('test initialization', () => {
assert.notEqual(element, null);
