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