resize-corner-tracking-touch.html | Explore in Territory

<!DOCTYPE html>
<script src='../../resources/gesture-util.js'></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
div {
  overflow: auto;
  resize: both;
  border: blue 2px solid;
}

textarea {
  resize: both;
}

iframe {
  border: blue 2px solid;
}

</style>

<div id="placeholder" style="width: 150px; height: 150px;">a placeholder so that
we have enough elements to scroll the page</div>
<div id="div" style="width: 150px; height: 100px;"></div>
<textarea id="textarea1" style="width: 150px; height: 100px;"></textarea>
<br>
<script type="text/javascript">
  async function touchDrag(target, offset, delta) {
    const rect = target.getBoundingClientRect();
    const x0 = rect.right + offset.x;
    const y0 = rect.bottom + offset.y;
    drag = {
        start_x: x0,
        start_y: y0,
        end_x: x0 + delta.dx,
        end_y: y0 + delta.dy
    };
    await touchDragTo(drag);

    return waitForCompositorCommit();
  }

  async function touchpadScroll(target, offset, delta, device) {
    var rect = target.getBoundingClientRect();
    const precise_scroll_delta = true;
    await smoothScrollWithXY(-delta.dx, -delta.dy,
                             rect.right + offset.x, rect.bottom + offset.y,
                             GestureSourceType.TOUCHPAD_INPUT, SPEED_INSTANT,
                             precise_scroll_delta);
    return waitForCompositorCommit();
  }

  function assert_resize(target, oldBounds) {
    const newBounds = target.getBoundingClientRect();
    assert_true(newBounds.width != oldBounds.width &&
                newBounds.height != oldBounds.height,
                'Element failed to resize');
  }

  function assert_no_resize(target, oldBounds) {
    const newBounds = target.getBoundingClientRect();
    assert_true(newBounds.width == oldBounds.width &&
                newBounds.height == oldBounds.height,
                'Element unexpectedly resized');
  }

  function resetStyle(element_id, style) {
    const element = document.getElementById(element_id);
    element.style = style;
  }

  async function setupTest(scrollTop = 50) {
    resetStyle('div', 'width: 150px; height: 100px;');
    resetStyle('textarea1', 'width: 150px; height: 100px;');

    // Scroll the page first to test that resize works with a scrolled page.
    document.scrollingElement.scrollTop = scrollTop;

    return waitForCompositorCommit();
  }

  window.onload = () => {
    promise_test(async () => {
      await setupTest();

      // Touch scrolling starting at inside the object, and within the normal
      // resizer area (15x15), e.g. offset (-6, -7) from bottom right corner of
      // the object, will do the resize.
      const target = document.getElementById("div");
      const oldBounds = target.getBoundingClientRect();

      await touchDrag(target, {x: -6, y: -7}, {dx: -20, dy: -10});
      assert_resize(target, oldBounds);
    }, 'Touch drag inside the resizer area of div will do the resize.');

    promise_test(async () => {
      await setupTest();

      // Touch scrolling starting at outside of the object, e.g. offset (6, 7)
      // from bottom right corner of the object, won't do the resize.
      const target = document.getElementById("div");
      const oldBounds = target.getBoundingClientRect();

      await touchDrag(target, {x: 6, y: 7}, {dx: -20, dy: -10});
      assert_no_resize(target, oldBounds);
    }, 'Touch drag outside of div will not do the resize.');

    promise_test(async () => {
      await setupTest();

      // Touch scrolling starting at inside the object, and only a little bit
      // off the resizer area, e.g. offset (-20, -20) from bottom right corner
      // of the object, will do the resize.
      // Do not require an exact hit on the resizer due to touch fuzzing.
      const target = document.getElementById("textarea1");
      const oldBounds = target.getBoundingClientRect();

      await touchDrag(target, {x: -20, y: -20}, {dx: -20, dy: -10});
      assert_resize(target, oldBounds);
    }, 'Touch drag a little off the resizer area of textarea will do ' +
       'the resize.');

    promise_test(async () => {
      await setupTest();

      const target = document.getElementById("textarea1");
      const oldBounds = target.getBoundingClientRect();

      await touchpadScroll(target, {x: -6, y: -7}, {dx: 20, dy: 10});
      assert_no_resize(target, oldBounds);
    }, 'Touchpad scroll should not resize the textarea.');

};
</script>
chromium/third_party/blink/web_tests/fast/scrolling/resize-corner-tracking-touch.html
