| 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 --><html><head><link rel="import" href="ct-results-comparison-zoomer.html"> |
| 6 | |
| 7 <link rel="import" href="ct-results-comparison-zoomer.html"> | |
| 8 <link rel="import" href="ct-test-output.html"> | 6 <link rel="import" href="ct-test-output.html"> |
| 9 | 7 |
| 10 <polymer-element name="ct-results-comparison" attributes="type expectedUrl actua
lUrl diffUrl"> | 8 <dom-module id="ct-results-comparison"> |
| 11 <template> | 9 <style> |
| 12 <style> | |
| 13 .main-content { | 10 .main-content { |
| 14 display: flex; | 11 display: flex; |
| 15 flex-wrap: wrap; | 12 flex-wrap: wrap; |
| 16 width: 100%; | 13 width: 100%; |
| 17 } | 14 } |
| 18 | 15 |
| 19 .main-content > * { | 16 .main-content > * { |
| 20 flex: 1; | 17 flex: 1; |
| 21 min-width: 300px; | 18 min-width: 300px; |
| 22 } | 19 } |
| 23 </style> | 20 </style> |
| 21 <template> |
| 24 | 22 |
| 25 <div class="main-content"> | 23 <div class="main-content"> |
| 26 <div> | 24 <div> |
| 27 <h2>Expected</h2> | 25 <h2>Expected</h2> |
| 28 <ct-test-output type="{{ type }}" url="{{ expectedUrl }}" | 26 <ct-test-output type="{{ type }}" url="{{ expectedUrl }}" on-mouseout="
_handleMouseOut " on-mousemove=" _handleMouseMove "></ct-test-output> |
| 29 on-mouseout="{{ _handleMouseOut }}" on-mousemove="{{ _handleMouseMo
ve }}"></ct-test-output> | |
| 30 </div> | 27 </div> |
| 31 <div> | 28 <div> |
| 32 <h2>Actual</h2> | 29 <h2>Actual</h2> |
| 33 <ct-test-output type="{{ type }}" url="{{ actualUrl }}" | 30 <ct-test-output type="{{ type }}" url="{{ actualUrl }}" on-mouseout=" _h
andleMouseOut " on-mousemove=" _handleMouseMove "></ct-test-output> |
| 34 on-mouseout="{{ _handleMouseOut }}" on-mousemove="{{ _handleMouseMo
ve }}"></ct-test-output> | |
| 35 </div> | 31 </div> |
| 36 <div> | 32 <div> |
| 37 <h2>Diff</h2> | 33 <h2>Diff</h2> |
| 38 <ct-test-output type="{{ type }}" url="{{ diffUrl }}" | 34 <ct-test-output type="{{ type }}" url="{{ diffUrl }}" on-mouseout=" _han
dleMouseOut " on-mousemove=" _handleMouseMove "></ct-test-output> |
| 39 on-mouseout="{{ _handleMouseOut }}" on-mousemove="{{ _handleMouseMo
ve }}"></ct-test-output> | |
| 40 </div> | 35 </div> |
| 41 </div> | 36 </div> |
| 42 | 37 |
| 43 <template if="{{ _zoomPosition }}"> | 38 <template is="dom-if" if="{{ _zoomPosition }}"> |
| 44 <ct-results-comparison-zoomer | 39 <ct-results-comparison-zoomer expectedurl="{{ expectedUrl }}" actualurl="{
{ actualUrl }}" diffurl="{{ diffUrl }}" position="{{ _zoomPosition }}"></ct-resu
lts-comparison-zoomer> |
| 45 expectedUrl="{{ expectedUrl }}" | |
| 46 actualUrl="{{ actualUrl }}" | |
| 47 diffUrl="{{ diffUrl }}" | |
| 48 position="{{ _zoomPosition }}"></ct-results-comparison-zoomer> | |
| 49 </template> | 40 </template> |
| 50 </template> | 41 </template> |
| 51 <script> | 42 <script> |
| 52 Polymer({ | 43 Polymer({ |
| 53 type: '', | 44 is: 'ct-results-comparison', |
| 54 expectedUrl: '', | 45 properties: { |
| 55 actualUrl: '', | 46 _zoomPosition: { value: null }, |
| 56 diffUrl: '', | 47 actualUrl: { |
| 57 _zoomPosition: null, | 48 type: String, |
| 58 | 49 value: '', |
| 59 typeChanged: function() { | 50 notify: true |
| 51 }, |
| 52 diffUrl: { |
| 53 type: String, |
| 54 value: '', |
| 55 notify: true |
| 56 }, |
| 57 expectedUrl: { |
| 58 type: String, |
| 59 value: '', |
| 60 notify: true |
| 61 }, |
| 62 type: { |
| 63 type: String, |
| 64 value: '', |
| 65 notify: true, |
| 66 observer: 'typeChanged' |
| 67 } |
| 68 }, |
| 69 typeChanged: function () { |
| 60 this._zoomPosition = null; | 70 this._zoomPosition = null; |
| 61 }, | 71 }, |
| 62 | 72 _handleMouseOut: function (e) { |
| 63 _handleMouseOut: function(e) { | |
| 64 this._zoomPosition = null; | 73 this._zoomPosition = null; |
| 65 }, | 74 }, |
| 66 | 75 _handleMouseMove: function (e) { |
| 67 _handleMouseMove: function(e) { | |
| 68 if (this.type != 'image') | 76 if (this.type != 'image') |
| 69 return; | 77 return; |
| 70 | |
| 71 // FIXME: This assumes that the ct-test-output only contains an image. | 78 // FIXME: This assumes that the ct-test-output only contains an image. |
| 72 var targetLocation = e.target.getBoundingClientRect(); | 79 var targetLocation = e.target.getBoundingClientRect(); |
| 73 // FIXME: Use a proper model class instead of a dumb object. | 80 // FIXME: Use a proper model class instead of a dumb object. |
| 74 this._zoomPosition = { | 81 this._zoomPosition = { |
| 75 x: (e.clientX - targetLocation.left) / targetLocation.width, | 82 x: (e.clientX - targetLocation.left) / targetLocation.width, |
| 76 y: (e.clientY - targetLocation.top) / targetLocation.height, | 83 y: (e.clientY - targetLocation.top) / targetLocation.height |
| 77 }; | 84 }; |
| 78 }, | 85 } |
| 79 }); | 86 }); |
| 80 </script> | 87 </script> |
| 81 </polymer-element> | 88 </dom-module> |
| OLD | NEW |