| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 Copyright 2014 The Chromium Authors. All rights reserved. | 2 Copyright 2014 The Chromium Authors. All rights reserved. |
| 3 Use of this source code is governed by a BSD-style license that can be | 3 Use of this source code is governed by a BSD-style license that can be |
| 4 found in the LICENSE file. | 4 found in the LICENSE file. |
| 5 --> | 5 --> |
| 6 | 6 |
| 7 <polymer-element name="ct-results-comparison-zoomer" attributes="expectedUrl act
ualUrl diffUrl position"> | 7 <polymer-element name="ct-results-comparison-zoomer" attributes="expectedUrl act
ualUrl diffUrl position"> |
| 8 <template> | 8 <template> |
| 9 <style> | 9 <style> |
| 10 :host { | 10 :host { |
| 11 background-color: silver; | 11 background-color: silver; |
| 12 border: 1px solid gray; | 12 border: 1px solid gray; |
| 13 box-shadow: 0 0 5px rgba(0, 0, 0, 0.75); | 13 box-shadow: 0 0 5px rgba(0, 0, 0, 0.75); |
| 14 display: flex; | 14 display: flex; |
| 15 pointer-events: none; | 15 pointer-events: none; |
| 16 position: fixed; | 16 position: fixed; |
| 17 top: 0; | 17 top: 0; |
| 18 width: 100%; | 18 width: 100%; |
| 19 z-index: 1; |
| 19 } | 20 } |
| 20 | 21 |
| 21 :host > * { | 22 :host > * { |
| 22 flex: 1; | 23 flex: 1; |
| 23 } | 24 } |
| 24 | 25 |
| 25 .label { | 26 .label { |
| 26 background-color: white; | 27 background-color: white; |
| 27 text-align: center; | 28 text-align: center; |
| 28 } | 29 } |
| (...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 92 | 93 |
| 93 this._draw(this.$.expectedZoomer); | 94 this._draw(this.$.expectedZoomer); |
| 94 this._draw(this.$.actualZoomer); | 95 this._draw(this.$.actualZoomer); |
| 95 this._draw(this.$.diffZoomer); | 96 this._draw(this.$.diffZoomer); |
| 96 }, | 97 }, |
| 97 | 98 |
| 98 _draw: function(imageContainer) { | 99 _draw: function(imageContainer) { |
| 99 var canvas = imageContainer.querySelector('canvas'); | 100 var canvas = imageContainer.querySelector('canvas'); |
| 100 canvas.width = imageContainer.clientWidth; | 101 canvas.width = imageContainer.clientWidth; |
| 101 canvas.height = imageContainer.clientHeight; | 102 canvas.height = imageContainer.clientHeight; |
| 103 this._drawCanvas(canvas.getContext('2d'), imageContainer); |
| 104 }, |
| 102 | 105 |
| 103 var ctx = canvas.getContext('2d'); | 106 _drawCanvas: function(context, imageContainer) { |
| 104 ctx.imageSmoothingEnabled = false; | 107 context.imageSmoothingEnabled = false; |
| 105 ctx.translate(imageContainer.clientWidth / 2, imageContainer.clientHeigh
t / 2); | 108 context.translate(imageContainer.clientWidth / 2, imageContainer.clientH
eight / 2); |
| 106 ctx.translate(-this.position.y * kZoomedResultWidth, -this.position.x *
kZoomedResultHeight); | 109 context.translate(-this.position.x * kZoomedResultWidth, -this.position.
y * kZoomedResultHeight); |
| 107 ctx.strokeRect(-1.5, -1.5, kZoomedResultWidth + 2, kZoomedResultHeight +
2); | 110 context.strokeRect(-1.5, -1.5, kZoomedResultWidth + 2, kZoomedResultHeig
ht + 2); |
| 108 ctx.scale(kZoomFactor, kZoomFactor); | 111 context.scale(kZoomFactor, kZoomFactor); |
| 109 ctx.drawImage(imageContainer.querySelector('img'), 0, 0); | 112 context.drawImage(imageContainer.querySelector('img'), 0, 0); |
| 110 }, | 113 }, |
| 111 }); | 114 }); |
| 112 })(); | 115 })(); |
| 113 </script> | 116 </script> |
| 114 </polymer-element> | 117 </polymer-element> |
| OLD | NEW |