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..7f4891d21e7ddfeebf2ca0d5c5481c32dc2f7ed1
--- /dev/null
+++ b/components/test/data/dom_distiller/pinch_tester.js
@@ -0,0 +1,298 @@
+var pinchtest = (function() {
+  'use strict';
+
+  function assertTrue(condition, message) {

[tdresser, 2015/03/25 13:45:36]

Also, this method is pretty much equivalent to console.assert, isn't it?

[tdresser, 2015/03/25 13:45:36]

It's a shame to have to implement all these trivial assertion functions. I was
digging around to see what other features implemented in js do for testing, and
the primary testing I found that wasn't specific to webapps/extensions was in
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/test/data/w...,
for example:
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/test/data/w....

I'm not sure if it would be worth using that kind of structure, as it feels a
bit heavy, but it would be nice to avoid reinventing the wheel here.

[wychen, 2015/04/02 02:05:59]

Thanks for the suggestion! I've looked at some JS testing/assertion
libraries/frameworks, but they seem a bit too heavy for just this single test in
browsertests. We might add more JavaScript-based tests in browsertests for
Reader Mode, so I plan to pick a light-weight library when needed.

[wychen, 2015/04/02 02:05:59]

Almost, since I need to throw an exception as well.

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

Acknowledged.

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

Acknowledged.

+    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) {

[tdresser, 2015/03/25 13:45:36]

You should be able to get access to window.eventSender, which would give you a
nice api for synthesizing touches.

Otherwise, if you're using a browsertest, you might as well synthesize touches
from there, where we already have a nice touch synthesis API. We have had some
flake issues with browsertests with touch, so I'd use window.eventSender over
sending the events from C++.

[wychen, 2015/04/02 02:05:59]

The reason I mock touch events in JS is exactly to reduce flakiness.
window.eventSender doesn't seem to support multiple touches, and
Document.createTouch() seems too heavy.

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

See
https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit...
for an example of using eventSender with multiple touches.

+    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);

[tdresser, 2015/03/25 13:45:36]

I would find this much easier to read if the positions were inline with the
tests. To figure out what's happening now, I have to constantly scroll back and
forth between the definitions of the events and the tests themselves.

[wychen, 2015/04/02 02:05:59]

Indeed. They are inlined now.

+    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());
+  }
+
+  function testCancel() {
+    pincher.reset();
+
+    pincher.handleTouchStart(e1);
+    pincher.handleTouchStart(e2);
+    pincher.handleTouchMove(e3);
+    pincher.handleTouchCancel(eNull);
+
+    assertClose(pincher.status().scale, 0.5);
+    assertTrue(pincher.status().clampedScale < 0.9);
+  }
+
+  return {
+    run: function(){
+      testZoomOut();
+      testZoomIn();
+      testZoomOutAndPan();
+      testReversible();
+      testMultitouch();
+      testZoomOutThenMulti();
+      testCancel();
+      pincher.reset();
+
+      return {success: true};
+    }
+  };
+}());