<script src='../../../../resources/gesture-util.js'></script>
<script src='../../../../resources/testharness.js'></script>
<script src='../../../../resources/testharnessreport.js'></script>
<style>
html,body {
margin: 0;
width: 100%;
height: 100%;
touch-action: none;
/* Checkerboard pattern for manual testing, so zooming is easily seen. */
background-image:
linear-gradient(45deg, #808080 25%, transparent 25%),
linear-gradient(-45deg, #808080 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #808080 75%),
linear-gradient(-45deg, transparent 75%, #808080 75%);
background-size:80px 80px;
}
.message {
width: 100%;
text-align: center;
background-color: aliceblue;
font-size: xx-large;
}
</style>
<div class="message">
touch-action: none should prevent zooming on double-tap. Test manually by
double-tapping anywhere. The page must not zoom-in.
</div>
<script>
// Test that double-tapping on a region that's declared touch-action: none
// doesn't cause the double-tap zoom gesture. This gesture is only supported
// on some (Android and CrOS tablet-mode) platforms.
promise_test(async () => {
await waitForCompositorCommit();
await doubleTapAt(400, 300);
await conditionHolds(
() => { return visualViewport.scale == 1; },
"Double-tap causes zoom despite 'touch-action:none'!");
}, "'touch-action: none' prevents double-tap zoom");
</script>