Home | History | Annotate | Download | only in ui 
      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 actualUrl 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="{{ _handleMouseMove }}"></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="{{ _handleMouseMove }}"></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="{{ _handleMouseMove }}"></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>
     82