compositor-touch-hit-rects-animation.html

<!DOCTYPE html>
<style>
.animate {
  transform: scale(2);
  transition: transform 0.1s;
}

#box {
  position: absolute;
  z-index: 1;
  top: 200px;
  left: 200px;
  width: 50px;
  height: 50px;

  background-color: blue;
}
</style>

<p id="description">
This test verifies the hit test regions are updated correctly when composited
layer are created and destroyed without triggering layout update during fast
path animation.
</p>

<div id="box"></div>

<div id='console' style='display:none;'></div>

<script src="../../../resources/js-test.js"></script>
<script src="resources/compositor-touch-hit-rects.js"></script>
<script>
jsTestIsAsync = true;

window.onload = () => {
  const box = document.getElementById("box");
  box.addEventListener('touchstart', () => {}, false);

  // Box is not composited so its touch rect is on document.
  internals.forceCompositingUpdate(document);
  logRects(box, true);

  // Animating scale causes the element to get composited layer and the touch
  // rect will get attached to this new layer.
  box.classList.add('animate');
  internals.forceCompositingUpdate(document);
  logRects(box, true);

  box.addEventListener('transitionend', () => {
    // Wait one frame for compositing state to get clear. Use setTimeout to
    // prevent setting rAF callback for the current frame.
    setTimeout(() => {
      window.requestAnimationFrame(() => {
        // Ending animation destroys the composited layer without causing any
        // layout. The touch rect should be attached to the document.
        logRects(box, true);

        document.getElementById('console').style.display = 'block';
        finishJSTest();
      });
    }, 0);
  });
};
</script>
chromium/third_party/blink/web_tests/fast/events/touch/compositor-touch-hit-rects-animation.html
