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 |