Changing font size with pinch gesture in Reader Mode

components/test/data/dom_distiller/pinch_tester.js

Index: components/test/data/dom_distiller/pinch_tester.js
diff --git a/components/test/data/dom_distiller/pinch_tester.js b/components/test/data/dom_distiller/pinch_tester.js
new file mode 100644
index 0000000000000000000000000000000000000000..c804dc896e82634fe3a5b4cc8fc5379b2cc80024
--- /dev/null
+++ b/components/test/data/dom_distiller/pinch_tester.js
@@ -0,0 +1,284 @@
+var pinchtest = (function() {
+  'use strict';
+
+  function assertTrue(condition, message) {
+    if (!condition) {
+      message = message || "Assertion failed";
+      console.trace();
+      throw new Error(message);
+    }
+  }
+
+  function assertClose(a, b, message) {
+    if (Math.abs(a-b) > 1e-5) {
+      message = message || "Assertion failed";
+      console.log('"', a, '" and "', b, '" are not close.');
+      console.trace();
+      throw new Error(message);
+    }
+  }
+
+  function isEquivalent(a, b) {
+    // Create arrays of property names
+    var aProps = Object.getOwnPropertyNames(a);
+    var bProps = Object.getOwnPropertyNames(b);
+
+    // If number of properties is different,
+    // objects are not equivalent
+    if (aProps.length != bProps.length) {
+      return false;
+    }
+
+    for (var i = 0; i < aProps.length; i++) {
+      var propName = aProps[i];
+
+      // If values of same property are not equal,
+      // objects are not equivalent
+      if (a[propName] !== b[propName]) {
+        return false;
+      }
+    }
+
+    // If we made it this far, objects
+    // are considered equivalent
+    return true;
+  }
+
+  function assertEqual(a, b, message) {
+    if (!isEquivalent(a, b)) {
+      message = message || "Assertion failed";
+      console.log('"', a, '" and "', b, '" are not equal');
+      console.trace();
+      throw new Error(message);
+    }
+  }
+
+  function makeTouch(e, offset) {

[tdresser, 2015/04/07 13:56:15]

I find this somewhat hard to read, with the type of e being so flexible;
however, I'm hopeful that you'll be able to use eventSender, which makes this
comment irrelevant.

[wychen, 2015/04/20 22:46:47]

The interface of eventSender looks nice, but unfortunately it is only available
in DRT mode, which cannot be turned on in component_browsertests.

I've replaced this with a minimal mock of eventSender API, so the readability
should be better now.

+    for (var i=0; i < e.length; i++) {
+      if (typeof(e[i]) === 'number') {
+        e[i] = [e[i], e[i]];
+      }
+      if (Array.isArray(e[i])) {
+        e[i] = {clientX: e[i][0], clientY: e[i][1]};
+      }
+      if (e[i].pageX === undefined) {
+        e[i].pageX = e[i].clientX;
+      }
+      if (e[i].pageY === undefined) {
+        e[i].pageY = e[i].clientY;
+      }
+      if (Array.isArray(offset)) {
+        e[i].clientX += offset[0];
+        e[i].clientY += offset[1];
+      }
+    }
+    return {
+      touches: e,
+      preventDefault: function(){}
+    };
+  }
+
+  var eNull = makeTouch([]);
+
+  function testZoomOut() {
+    pincher.reset();
+
+    // Make sure start event doesn't change state
+    var oldState = pincher.status();
+    pincher.handleTouchStart(makeTouch([100]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchStart(makeTouch([100, 300]));
+    assertEqual(oldState, pincher.status());
+
+    // Make sure extra move event doesn't change state
+    pincher.handleTouchMove(makeTouch([100, 300]));
+    assertEqual(oldState, pincher.status());
+
+    pincher.handleTouchMove(makeTouch([150, 250]));
+
+    // Make sure end event doesn't change state
+    oldState = pincher.status();
+    pincher.handleTouchEnd(makeTouch([250]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd([]);
+    assertEqual(oldState, pincher.status());
+
+    assertTrue(pincher.status().clampedScale < 0.9);

[tdresser, 2015/04/07 13:56:15]

I'd prefer this assertion be directly after the touchmove.

[wychen, 2015/04/20 22:46:47]

Done.

+  }
+
+  function testZoomIn() {
+    pincher.reset();
+
+    var oldState = pincher.status();
+    pincher.handleTouchStart(makeTouch([150]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchStart(makeTouch([150, 250]));
+    assertEqual(oldState, pincher.status());
+
+    pincher.handleTouchMove(makeTouch([100, 300]));
+
+    oldState = pincher.status();
+    pincher.handleTouchEnd(makeTouch([100]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd([]);
+    assertEqual(oldState, pincher.status());
+
+    assertTrue(pincher.status().clampedScale > 1.1);

[tdresser, 2015/04/07 13:56:15]

I'd prefer this assertion be directly after the touchmove.

[wychen, 2015/04/20 22:46:46]

Done.

+  }
+
+  function testZoomOutAndPan() {
+    pincher.reset();
+    pincher.handleTouchStart(makeTouch([100]));
+    pincher.handleTouchStart(makeTouch([100, 300]));
+    pincher.handleTouchMove(makeTouch([150, 250]));
+    pincher.handleTouchMove(makeTouch([150, 250], [10, -5]));
+    pincher.handleTouchEnd(makeTouch([150], [10, -5]));
+    pincher.handleTouchEnd([]);
+
+    assertClose(pincher.status().shiftX, 10);
+    assertClose(pincher.status().shiftY, -5);
+    assertTrue(pincher.status().clampedScale < 0.9);
+  }
+
+  function testReversible() {
+    pincher.reset();
+    pincher.handleTouchStart(makeTouch([10]));
+    pincher.handleTouchStart(makeTouch([10, 30]));
+    pincher.handleTouchMove(makeTouch([0, 40]));
+    pincher.handleTouchEnd(makeTouch([40]));
+    pincher.handleTouchEnd([]);
+    pincher.handleTouchStart(makeTouch([40]));
+    pincher.handleTouchStart(makeTouch([40, 0]));
+    pincher.handleTouchMove(makeTouch([30, 10]));
+    pincher.handleTouchEnd(makeTouch([30]));

[tdresser, 2015/04/07 13:56:15]

Where did this 30 come from? Shouldn't it be 10?

[wychen, 2015/04/20 22:46:46]

Done.

+    pincher.handleTouchEnd([]);
+    assertClose(pincher.status().clampedScale, 1);
+  }
+
+  function testMultitouchZoomOut() {
+    pincher.reset();
+
+    var oldState = pincher.status();
+    pincher.handleTouchStart(makeTouch([100]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchStart(makeTouch([100, 300]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchStart(makeTouch([0, 100, 300]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchStart(makeTouch([0, 100, 300, 400]));
+    assertEqual(oldState, pincher.status());
+
+    // Multi-touch zoom out.
+    pincher.handleTouchMove(makeTouch([100, 150, 250, 300]));
+
+    oldState = pincher.status();
+    pincher.handleTouchEnd(makeTouch([100, 150, 300]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd(makeTouch([150, 300]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd(makeTouch([300]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd([]);
+    assertEqual(oldState, pincher.status());
+
+    assertTrue(pincher.status().clampedScale < 0.9);
+  }
+
+  function testZoomOutThenMulti() {
+    pincher.reset();
+
+    var oldState = pincher.status();
+    pincher.handleTouchStart(makeTouch([100]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchStart(makeTouch([100, 300]));
+    assertEqual(oldState, pincher.status());
+
+    // Zoom out.
+    pincher.handleTouchMove(makeTouch([150, 250]));
+    assertTrue(pincher.status().clampedScale < 0.9);
+
+    // Make sure adding and removing more point doesn't change state
+    oldState = pincher.status();
+    pincher.handleTouchStart(makeTouch([150, 250, 600]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd(makeTouch([150, 250]));
+    assertEqual(oldState, pincher.status());
+
+    // More than two fingers.
+    pincher.handleTouchStart(makeTouch([150, 250, [150, 250]]));
+    pincher.handleTouchStart(makeTouch([150, 250, [150, 250], [250, 150]]));
+    assertEqual(oldState, pincher.status());
+
+    pincher.handleTouchMove(makeTouch([100, 300, [100, 300], [300, 100]]));
+    assertClose(pincher.status().scale, 1);
+
+    oldState = pincher.status();
+    pincher.handleTouchEnd(makeTouch([100, 300, [100, 300]]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd(makeTouch([100, 300]));
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd(makeTouch([300]));
+    assertEqual(oldState, pincher.status());
+  }
+
+  function testCancel() {
+    pincher.reset();
+
+    pincher.handleTouchStart(makeTouch([100]));
+    pincher.handleTouchStart(makeTouch([100, 300]));
+    pincher.handleTouchMove(makeTouch([150, 250]));
+    assertTrue(pincher.status().clampedScale < 0.9);
+
+    var oldState = pincher.status();
+    pincher.handleTouchCancel([]);
+    assertEqual(oldState, pincher.status());
+
+    pincher.handleTouchStart(makeTouch([150]));
+    pincher.handleTouchStart(makeTouch([150, 250]));
+    pincher.handleTouchMove(makeTouch([100, 300]));
+    assertClose(pincher.status().clampedScale, 1);
+  }
+
+  function testSingularity() {
+    pincher.reset();
+
+    pincher.handleTouchStart(makeTouch([100]));
+    pincher.handleTouchStart(makeTouch([100, 100]));
+    pincher.handleTouchMove(makeTouch([50, 150]));
+    assertTrue(pincher.status().clampedScale > 1.1);
+    assertTrue(pincher.status().clampedScale < 100);
+    assertTrue(pincher.status().scale < 100);
+
+    pincher.handleTouchCancel([]);
+  }
+
+  function testMinSpan() {
+    pincher.reset();
+
+    pincher.handleTouchStart(makeTouch([50]));
+    pincher.handleTouchStart(makeTouch([50, 150]));
+    pincher.handleTouchMove(makeTouch([100, 100]));
+    assertTrue(pincher.status().clampedScale < 0.9);
+    assertTrue(pincher.status().clampedScale > 0);
+    assertTrue(pincher.status().scale > 0);
+
+    pincher.handleTouchCancel([]);
+  }
+
+  return {
+    run: function(){
+      testZoomOut();
+      testZoomIn();
+      testZoomOutAndPan();
+      testReversible();
+      testMultitouchZoomOut();
+      testZoomOutThenMulti();
+      testCancel();
+      testSingularity();
+      testMinSpan();
+      pincher.reset();
+
+      return {success: true};
+    }
+  };
+}());