gesture-tapHighlight-with-squashing.html

<!DOCTYPE html>
<link rel="stylesheet" href="resources/link-highlight-style.css">
<style>
  div {
    border: black solid 1px;
  }

  .composited {
    will-change: transform;
  }

  .fixed {
    position: fixed;
    background-color: red;
    width: 500px;
    height: 500px;
  }

  .container {
    overflow: scroll;
    height: 200px;
    background-color: gray;
  }

  .filler {
    height: 800px;
    width: 800px;
    background-color: orange;
  }

  .squash-spacer {
    position: relative;
    top: 40px;
  }

  .target {
    position: relative;
    top: 80px;
    height: 10px; width: 100%;
  }
</style>

<script>
  if (window.internals) {
    internals.settings.setPreferCompositingToLCDTextEnabled(true);
  }

  function runTest() {
    var clientRect = document.getElementById('targetLink').getBoundingClientRect();
    x = (clientRect.left + clientRect.right) / 2;
    y = (clientRect.top + clientRect.bottom) / 2;

    if (window.eventSender)
      eventSender.gestureShowPress(x, y);
  }

  window.onload = runTest;
</script>
<div class='fixed composited'></div>
<div class='container'>
  <div class='composited'></div>
  <div class='squash-spacer'></div>
  <div class='target'>
    <a href='#' id='targetLink'>Target Link.</a>
  </div>
  <div class='filler'></div>
</div>
chromium/third_party/blink/web_tests/compositing/gestures/gesture-tapHighlight-with-squashing.html
