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

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

Index: Tools/GardeningServer/ui/ct-results-comparison-tests.html
diff --git a/Tools/GardeningServer/ui/ct-results-comparison-tests.html b/Tools/GardeningServer/ui/ct-results-comparison-tests.html
index 144fa9f5006a42757a01c925deda9035315c0438..21637b59ac8ed4838dfee8c0d1c8b6dd1402903a 100644
--- a/Tools/GardeningServer/ui/ct-results-comparison-tests.html
+++ b/Tools/GardeningServer/ui/ct-results-comparison-tests.html
@@ -11,32 +11,65 @@ found in the LICENSE file.
 
 module("ct-results-comparison");
 
-asyncTest("basic", 7, 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";
-
-    comparison.expectedUrl = expected;
-    comparison.actualUrl = actual;
-    comparison.diffUrl = diff;
-
-    Platform.endOfMicrotask(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);
+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";
+
+  comparison.expectedUrl = expected;
+  comparison.actualUrl = actual;
+  comparison.diffUrl = diff;
+
+  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);
+
+    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();
+      });
     });
+  });
 });
 
 })()