Changing font size with pinch gesture in Reader Mode

components/test/data/dom_distiller/pinch_tester.js

+var pinchtest = (function() {
+  'use strict';

[jdduke (slow), 2015/03/23 15:42:06]

Thanks for adding tests!

[wychen, 2015/03/24 22:52:08]

Writing tests also forced me to reorganize the implementation in a cleaner way!

+
+  function assertTrue(condition, message) {
+    if (!condition) {
+      message = message || "Assertion failed";
+      throw new Error(message);
+    }
+  }
+
+  function assertClose(a, b, message) {
+    if (Math.abs(a-b) > 1e-5) {
+      message = message || "Assertion failed";
+      console.log(a);
+      console.log(b);
+      console.log('"' + a + '" and "' + b + '" are not close.');
+      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);
+      console.log(b);
+      console.log('"' + a.toString() + '" and "' + b + '" are not equal.');
+      throw new Error(message);
+    }
+  }
+
+  function makeTouch(e) {
+    for (var i=0; i < e.length; i++) {
+      if (typeof(e[i]) === 'number') {
+        e[i] = {clientX: e[i]};
+      }
+      if (e[i].clientY === undefined) {
+        e[i].clientY = e[i].clientX;
+      }
+      if (e[i].pageX === undefined) {
+        e[i].pageX = e[i].clientX;
+      }
+      if (e[i].pageY === undefined) {
+        e[i].pageY = e[i].clientY;
+      }
+    }
+    return {
+      touches: e,
+      preventDefault: function(){}
+    };
+  }
+
+  var eNull = makeTouch([]);
+  var e1 = makeTouch([100]);
+  var e2 = makeTouch([100, 300]);
+  var e3 = makeTouch([150, 250]);
+  var e4 = makeTouch([250]);
+
+  var e3p = makeTouch([
+    {clientX: 160, clientY: 145, pageX: 150, pageY: 150},
+    {clientX: 260, clientY: 245, pageX: 250, pageY: 250}
+  ]);
+  var e4p = makeTouch([
+    {clientX: 260, clientY: 250, pageX: 250}
+  ]);
+
+  function testZoomOut() {
+    pincher.reset();
+
+    // Make sure start event doesn't change state
+    var oldState = pincher.status();
+    pincher.handleTouchStart(e1);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchStart(e2);
+    assertEqual(oldState, pincher.status());
+
+    // Make sure extra move event doesn't change state
+    pincher.handleTouchMove(e2);
+    assertEqual(oldState, pincher.status());
+
+    pincher.handleTouchMove(e3);
+
+    // Make sure end event doesn't change state
+    oldState = pincher.status();
+    pincher.handleTouchEnd(e4);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd(eNull);
+    assertEqual(oldState, pincher.status());
+
+    assertClose(pincher.status().scale, 0.5);
+    assertTrue(pincher.status().clampedScale < 0.9);
+  }
+
+  function testZoomIn() {
+    pincher.reset();
+
+    var oldState = pincher.status();
+    pincher.handleTouchStart(e4);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchStart(e3);
+    assertEqual(oldState, pincher.status());
+
+    pincher.handleTouchMove(e3);
+    assertEqual(oldState, pincher.status());
+
+    pincher.handleTouchMove(e2);
+
+    oldState = pincher.status();
+    pincher.handleTouchEnd(e1);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd(eNull);
+    assertEqual(oldState, pincher.status());
+
+    assertClose(pincher.status().scale, 2);
+    assertTrue(pincher.status().clampedScale > 1.1);
+  }
+
+  function testZoomOutAndPan() {
+    pincher.reset();
+    pincher.handleTouchStart(e1);
+    pincher.handleTouchStart(e2);
+    pincher.handleTouchMove(e3);
+    pincher.handleTouchMove(e3p);
+    pincher.handleTouchEnd(e4p);
+    pincher.handleTouchEnd(eNull);
+    assertClose(pincher.status().scale, 0.5);
+    assertClose(pincher.status().shiftX, 10);
+    assertClose(pincher.status().shiftY, -5);
+  }
+
+  function testReversible() {
+    pincher.reset();
+    pincher.handleTouchStart(e1);
+    pincher.handleTouchStart(e2);
+    pincher.handleTouchMove(e3);
+    pincher.handleTouchEnd(e4);
+    pincher.handleTouchEnd(eNull);
+    pincher.handleTouchStart(e4);
+    pincher.handleTouchStart(e3);
+    pincher.handleTouchMove(e2);
+    pincher.handleTouchEnd(e1);
+    pincher.handleTouchEnd(eNull);
+    assertClose(pincher.status().clampedScale, 1);
+  }
+
+  var et3 = makeTouch([
+    {clientX: 100, clientY: 100},
+    {clientX: 300, clientY: 300},
+    {clientX: 100, clientY: 300}
+  ]);
+  var et4 = makeTouch([
+    {clientX: 100, clientY: 100},
+    {clientX: 300, clientY: 300},
+    {clientX: 100, clientY: 300},
+    {clientX: 300, clientY: 100}
+  ]);
+  var et5 = makeTouch([
+    {clientX: 150, clientY: 150},
+    {clientX: 250, clientY: 250},
+    {clientX: 150, clientY: 250},
+    {clientX: 250, clientY: 150}
+  ]);
+  var et6 = makeTouch([
+    {clientX: 150, clientY: 150},
+    {clientX: 150, clientY: 250},
+    {clientX: 250, clientY: 150}
+  ]);
+  var et7 = makeTouch([
+    {clientX: 150, clientY: 150},
+    {clientX: 250, clientY: 150}
+  ]);
+  var et8 = makeTouch([
+    {clientX: 250, clientY: 150}
+  ]);
+
+  var et3z = makeTouch([
+    {clientX: 150, clientY: 150},
+    {clientX: 250, clientY: 250},
+    {clientX: 150, clientY: 250},
+  ]);
+
+  function testMultitouch() {
+    pincher.reset();
+
+    var oldState = pincher.status();
+    pincher.handleTouchStart(e1);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchStart(e2);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchStart(et3);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchStart(et4);
+    assertEqual(oldState, pincher.status());
+
+    pincher.handleTouchMove(et5);
+
+    oldState = pincher.status();
+    pincher.handleTouchEnd(et6);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd(et7);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd(et8);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd(eNull);
+    assertEqual(oldState, pincher.status());
+
+    assertClose(pincher.status().scale, 0.5);
+    assertTrue(pincher.status().clampedScale < 0.9);
+  }
+
+  function testZoomOutThenMulti() {
+    pincher.reset();
+
+    var oldState = pincher.status();
+    pincher.handleTouchStart(e1);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchStart(e2);
+    assertEqual(oldState, pincher.status());
+
+    pincher.handleTouchMove(e3);
+    assertClose(pincher.status().scale, 0.5);
+    assertTrue(pincher.status().clampedScale < 0.9);
+
+    // Make sure adding and removing more point doesn't change state
+    oldState = pincher.status();
+    pincher.handleTouchStart(et3z);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd(e3);
+    assertEqual(oldState, pincher.status());
+
+    pincher.handleTouchStart(et3z);
+    pincher.handleTouchStart(et5);
+    assertEqual(oldState, pincher.status());
+
+    pincher.handleTouchMove(et4);
+    assertClose(pincher.status().scale, 1);
+
+    oldState = pincher.status();
+    pincher.handleTouchEnd(et3);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd(e2);
+    assertEqual(oldState, pincher.status());
+    pincher.handleTouchEnd(e1);
+    assertEqual(oldState, pincher.status());
+  }
+
+  return {
+    run: function(){
+      testZoomOut();
+      testZoomIn();
+      testZoomOutAndPan();
+      testReversible();
+      testMultitouch();
+      testZoomOutThenMulti();
+      pincher.reset();
+
+      return {success: true};
+    }
+  };
+}());