touch-gesture-noscroll-body-xhidden.html

<!DOCTYPE html>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../resources/gesture-util.js"></script>
<style type="text/css">
#touchtarget {
  width: 100px;
  height: 100px;
  background: white;
  overflow:hidden;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

#greenbox {
  width: 100px;
  height: 100px;
  background: green;
  padding: 0px;
  margin: 0px;
}

#redbox {
  width: 100px;
  height: 100px;
  background: red;
  padding: 0px;
  margin: 0px;
}

td {
  padding: 0px;
}
</style>

<body style="margin:0; overflow-x:hidden;" onload="buildPage();">
<table id="horizontal_table_to_fill">
  <tr id="firstrow">
    <td><div id="redbox"></div></td>
    <td><div id="greenbox"></div></td>
  </tr>
</table>

<table id="vertical_table_to_fill">
    <tr><td><div id="greenbox"></div></td></tr>
    <tr><td><div id="redbox"></div></td></tr>
</table>
</body>

<script type="text/javascript">
var expectedGesturesTotal = 2;
var gesturesOccurred = 0;
var scrollAmountX = [0, 0];
var scrollAmountY = [110, 205];
var scrollEventsOccurred = 0;
var expectedScrollEventsOccurred = 2;
var scrolledElement = document.scrollingElement;

// Always construct a page larger than the vertical height of the window.
function buildPage() {
  // build vertical table
  var table = document.getElementById('vertical_table_to_fill');
  var targetHeight = document.body.offsetHeight;
  var cellPairHeight = table.offsetHeight;
  var numberOfReps = targetHeight / cellPairHeight * 2;
  var i;
  for (i = 0; i < numberOfReps; i++) {
    var p = document.createElement('tr');
    p.innerHTML = '<td><div id="greenbox"></div></td>';
    table.appendChild(p);
    var p = document.createElement('tr');
    p.innerHTML = '<td><div id="redbox"></div></td>';
    table.appendChild(p);
  }

  // build horizontal table
  var horizontalTable = document.getElementById('horizontal_table_to_fill');
  var tableRow = document.getElementById('firstrow');
  var targetWidth = document.body.offsetWidth;
  var cellPairWidth = horizontalTable.offsetWidth;
  numberOfReps = targetWidth / cellPairWidth * 2;
  for (i = 0; i < numberOfReps; i++) {
    var p = document.createElement('td');
    p.innerHTML = '<div id="redbox"></div>';
    tableRow.appendChild(p);
    var p = document.createElement('td');
    p.innerHTML = '<div id="greenbox"></div>';
    tableRow.appendChild(p);
  }

  window.addEventListener("scroll", recordScroll);
}

var x = 95;
var y = 12;
function firstGestureScroll() {
  return smoothScroll(110, x, y, GestureSourceType.TOUCH_INPUT, "downright",
      SPEED_INSTANT);
}

function secondGestureScroll() {
  x = 12;
  y = 97;
  return smoothScroll(95, x, y, GestureSourceType.TOUCH_INPUT, "downright",
      SPEED_INSTANT);
}

promise_test (async () => {
  await firstGestureScroll();
  await waitFor(checkScrollOffset);
  await secondGestureScroll();
  await waitFor(checkScrollOffset);
}, 'This tests that a page cannot be scrolled horizontally with touch ' +
   '(but can still be scrolled vertically) if its body has style ' +
   'overflow-x:hidden. The scroll events in this test have both an x and y ' +
   'component.');
</script>
chromium/third_party/blink/web_tests/fast/events/touch/gesture/touch-gesture-noscroll-body-xhidden.html
