WebUI Tab Strip: Reset swipe animation on pointerdown

If a swipe gesture gets canceled by a pointerleave event, the
animation needs to be reset. If it is not reset, the next pointerup
event will calculate the pixels swiped and the velocity based on
an animation time from a previous gesture.

This occurs most frequently in cases where a user is swiping
diagonally on the tab strip to scroll. The diagonal swipe causes the
TabSwiper to map a few of the first initial pixels as a tab swipe,
which gets canceled by a pointerleave event caused by the scroll.
The next time the user taps on a TabElement, the pointerup event
will do its calcs based on the previous diagonal swipe since the
animation remains in a state modified by the diagonal swipe.

Bug: 1014679
Change-Id: I5ef44578f104152793af4c4750e4a493d7d908b3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1913572Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#715128}

chrome/browser/resources/tab_strip/tab_swiper.js

@@ -166,6 +166,7 @@ export class TabSwiper {
       return;
     }
 
+    this.animation_.currentTime = SWIPE_ANIMATION_BASELINE_PX;
     this.animationInitiated_ = false;
     this.currentPointerDownEvent_ = event;
 

chrome/test/data/webui/tab_strip/tab_swiper_test.js

@@ -178,4 +178,25 @@ suite('TabSwiper', () => {
     document.body.appendChild(tabElement);
     await testHighSpeedSwipe(false);
   });
+
+  test('pointerdown should reset the animation time', async () => {
+    tabElement.style.setProperty('--tabstrip-tab-width', '100px');
+    const tabElStyle = window.getComputedStyle(tabElement);
+    const pointerState = {clientY: 50, pointerId: 1};
+    tabElement.dispatchEvent(new PointerEvent('pointerdown', pointerState));
+
+    // Mimic a swipe that turns into a scroll.
+    pointerState.clientY += SWIPE_FINISH_THRESHOLD_PX;
+    pointerState.movementY = 1; /* Any non-0 value here is fine. */
+    tabElement.dispatchEvent(new PointerEvent('pointermove', pointerState));
+    tabElement.dispatchEvent(new PointerEvent('pointerleave', pointerState));
+
+    // Mimic a tap.
+    pointerState.clientY = 50;
+    tabElement.dispatchEvent(new PointerEvent('pointerdown', pointerState));
+
+    // Style should reset to defaults.
+    assertEquals(tabElStyle.maxWidth, '100px');
+    assertEquals(tabElStyle.opacity, '1');
+  });
 });