compositor-touch-hit-rects-many.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="resources/compositor-touch-hit-rects.css">
<style>
#layer {
  will-change: transform;
}
#manychildren {
  height: 10px;
}
.child:first-child {
  margin-top: 20px;
}
.child {
  height: 5px;
  width: 5px;
  margin: 5px;
  margin-left: 300px;
}
</style>
</head>
<body>
<p id="description">
Tests that there is an upper limit on the number of hit rects generated per layer.  http://crbug.com/299177.
</p>

<div id="tests">
  <div id="layer">
    <div id="manychildren" class="testcase">
      <div class="child"></div>
    </div>
  </div>
</div>

<div id="console"></div>
<script src="resources/compositor-touch-hit-rects.js"></script>
<script>

const kMaxRects = 100;
const kFixedRects = 1;

function verifyRectCount(expectedRects) {
  if (!window.internals)
    log('Missing window.internals');

  internals.forceCompositingUpdate(document);
  var rects = internals.touchEventTargetLayerRects(document);
  log('Test node has ' + document.querySelectorAll('.child').length + ' children with ' + rects.length + ' rects');
  if (rects.length != expectedRects) {
    log('FAIL - got ' + rects.length + ' rects, expected ' + expectedRects + '.');
  }
}

preRunHandlerForTest['manychildren'] = function(e) {
  var template = document.querySelector('.child');
  for( var i = 0; i < kMaxRects - kFixedRects - 1; i++) {
    template.parentElement.appendChild(template.cloneNode());
  }

  // Make sure the test is working properly.
  verifyRectCount(kMaxRects);

  // Now push us over the limit.
  template.parentElement.appendChild(template.cloneNode());
  verifyRectCount(1);

  // Verify that any additional rects get subsumed.
  template.parentElement.appendChild(template.cloneNode());
  verifyRectCount(1);
};

</script>
</body>
chromium/third_party/blink/web_tests/fast/events/touch/compositor-touch-hit-rects-many.html
