| <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> |