gesture-tap-frame-overlap.html | Explore in Territory

<!DOCTYPE html>
<html>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../resources/gesture-util.js"></script>
<style type="text/css">
body {
    margin: 0;
}
#box1{
  position: fixed;
  bottom: 96px;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #1976D2;
  z-index: 101;
}
#box2 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #03A9F4;
  z-index: 100;
}
</style>
<body>
<div id="box1"></div>
<div id="box2"></div>

<script>
var outerCount = 0;
var innerCount = 0;
document.addEventListener("click", function(event) {
    outerCount++;
})
function createIframe() {
    var fr = document.createElement('iframe');
    fr.frameborder="0";
    fr.style.height = (window.innerHeight - 50) + "px";
    fr.style.width = "100%";
    document.body.appendChild(fr);
    fr.contentDocument.body.innerHTML = '<div id="target" style="margin: 0px; width: 100%; height: ' + window.innerHeight + 'px; background-color:red"></div>';
    fr.contentDocument.getElementById("target").addEventListener("click", function(event) {
        innerCount++;
    })
}

promise_test (async() => {
    createIframe();
    await touchTapOn(innerWidth / 2, window.innerHeight - 100);
    assert_equals(innerCount, 0);
    assert_equals(outerCount, 1);
})

</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/events/touch/gesture/gesture-tap-frame-overlap.html
