Port pixelzoomer.js/css to ct-results-comparison.

Tools/GardeningServer/ui/ct-results-comparison-tests.html

 <!--
 Copyright 2014 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
 
 <link rel="import" href="ct-results-comparison.html">
 
 <script>
 (function () {
 
 module("ct-results-comparison");
 
-asyncTest("basic", 7, function() {
-    var comparison = document.createElement('ct-results-comparison');
-    comparison.type = results.kImageType;
+asyncTest("basic", 8, function() {
+  var comparison = document.createElement('ct-results-comparison');
+  comparison.type = results.kImageType;
 
-    var expected = "http://domain.com/dummy-expected";
-    var actual = "http://domain.com/dummy-actual";
-    var diff = "http://domain.com/dummy-diff";
+  var expected = "http://domain.com/dummy-expected";
+  var actual = "http://domain.com/dummy-actual";
+  var diff = "http://domain.com/dummy-diff";
 
-    comparison.expectedUrl = expected;
-    comparison.actualUrl = actual;
-    comparison.diffUrl = diff;
+  comparison.expectedUrl = expected;
+  comparison.actualUrl = actual;
+  comparison.diffUrl = diff;
 
-    Platform.endOfMicrotask(function() {
-        var outputs = comparison.shadowRoot.querySelectorAll('ct-test-output');
-        equal(outputs.length, 3);
+  requestAnimationFrame(function() {
+    var outputs = comparison.shadowRoot.querySelectorAll('ct-test-output');
+    equal(outputs.length, 3);
 
-        // Verify we didn't typo any of the bindings.
-        equal(outputs[0].type, results.kImageType);
-        equal(outputs[0].url, expected);
-        equal(outputs[1].type, results.kImageType);
-        equal(outputs[1].url, actual);
-        equal(outputs[2].type, results.kImageType);
-        equal(outputs[2].url, diff);
+    // Verify we didn't typo any of the bindings.
+    equal(outputs[0].type, results.kImageType);
+    equal(outputs[0].url, expected);
+    equal(outputs[1].type, results.kImageType);
+    equal(outputs[1].url, actual);
+    equal(outputs[2].type, results.kImageType);
+    equal(outputs[2].url, diff);
 
+    equal(comparison.shadowRoot.querySelectorAll('ct-results-comparison-zoomer').length, 0);
+
+    start();
+  });
+});
+
+asyncTest('zoomer', 3, function() {
+  // FIXME: Create a MouseEventMock class to use here.
+  var mockMouseEvent = {
+    clientX: 0,
+    clientY: 0,
+    target: document.createElement('div'),
+  }
+
+  var imageComparison = document.createElement('ct-results-comparison');
+  imageComparison.type = results.kImageType;
+
+  var nonImageComparison = document.createElement('ct-results-comparison');
+
+  requestAnimationFrame(function() {
+    imageComparison._handleMouseMove(mockMouseEvent);
+    nonImageComparison._handleMouseMove(mockMouseEvent);
+
+    requestAnimationFrame(function() {
+      equal(imageComparison.shadowRoot.querySelectorAll('ct-results-comparison-zoomer').length, 1);
+      equal(nonImageComparison.shadowRoot.querySelectorAll('ct-results-comparison-zoomer').length, 0);
+
+      imageComparison.type = 'foo';
+
+      requestAnimationFrame(function() {
+        equal(imageComparison.shadowRoot.querySelectorAll('ct-results-comparison-zoomer').length, 0);
         start();
+      });
     });
+  });
 });
 
 })()
 </script>