compositor-touch-hit-rects-update-svg.html

<!DOCTYPE html>
<html>
<head>
<!--
This test verifies correctness of touch regions produced by SVG elements after
their parent update.
-->
<style>
* {
  margin: 0px;
  padding: 0px;
}
svg {
  width: 100px;
  height: 100px;
}
.container {
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<div id="svg-root">
  <div class="container">
    <svg>
      <rect width="50" height="50" id="rect"></rect>
    </svg>
  </div>
  <div class="container">
    <svg>
      <!-- This is a 4 5x5 blocks of solid color, taken from image/pixelated-svg-image.html -->
      <image width="20" height="20" id='image' xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII="/>
    </svg>
  </div>
</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 rect = document.getElementById("rect");
  rect.addEventListener('touchstart', () => {}, false);
  const image = document.getElementById("image");
  image.addEventListener('touchstart', () => {}, false);

  window.requestAnimationFrame(() => {
    const svgRoot = document.getElementById('svg-root');
    logRects(svgRoot, true);
    svgRoot.style.transform = "translate(100px)";

    window.requestAnimationFrame(() => {
      logRects(svgRoot, true);
      document.getElementById('console').style.display = 'block';
      finishJSTest();
    });
   });
};
</script>
</body>
chromium/third_party/blink/web_tests/fast/events/touch/compositor-touch-hit-rects-update-svg.html
