Touch events not received with initial-scale=1 viewport
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 13 Jan 2018 01:03:42 +0000 (01:03 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 13 Jan 2018 01:03:42 +0000 (01:03 +0000)
https://bugs.webkit.org/show_bug.cgi?id=181566
rdar://problem/36460221

Reviewed by Tim Horton.

Add a testcase for this touch event case.

* fast/events/touch/ios/target-taller-than-view-expected.txt: Added.
* fast/events/touch/ios/target-taller-than-view.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@226932 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/events/touch/ios/target-taller-than-view-expected.txt [new file with mode: 0644]
LayoutTests/fast/events/touch/ios/target-taller-than-view.html [new file with mode: 0644]

index b0e0376..8f006da 100644 (file)
@@ -1,3 +1,16 @@
+2018-01-12  Simon Fraser  <simon.fraser@apple.com>
+
+        Touch events not received with initial-scale=1 viewport
+        https://bugs.webkit.org/show_bug.cgi?id=181566
+        rdar://problem/36460221
+
+        Reviewed by Tim Horton.
+
+        Add a testcase for this touch event case.
+
+        * fast/events/touch/ios/target-taller-than-view-expected.txt: Added.
+        * fast/events/touch/ios/target-taller-than-view.html: Added.
+
 2018-01-12  Myles C. Maxfield  <mmaxfield@apple.com>
 
         Data URL fonts split in the middle of an alphabet cause random letters to disappear
diff --git a/LayoutTests/fast/events/touch/ios/target-taller-than-view-expected.txt b/LayoutTests/fast/events/touch/ios/target-taller-than-view-expected.txt
new file mode 100644 (file)
index 0000000..2ba5062
--- /dev/null
@@ -0,0 +1,16 @@
+Checks that touches work on elements that are taller than the view.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+touchstart fired.
+PASS event.touches.length is 1
+PASS event.touches[0].clientX is 113
+PASS event.touches[0].clientY is 178
+touchend fired.
+PASS successfullyParsed is true
+
+TEST COMPLETE
+Test
+
+
diff --git a/LayoutTests/fast/events/touch/ios/target-taller-than-view.html b/LayoutTests/fast/events/touch/ios/target-taller-than-view.html
new file mode 100644 (file)
index 0000000..29589d1
--- /dev/null
@@ -0,0 +1,82 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
+<html>
+<head>
+    <meta name="viewport" content="initial-scale=1">
+    <style>
+        main {
+            display: flex;
+        }
+        .foo {
+            flex-basis: 0;
+        }
+        .map {
+            flex-grow: 2;
+            overflow: hidden;
+            position: relative;
+            outline: 2px solid green;
+        }
+        #container {
+            height: 10px;
+            background-color: silver;
+            outline: 2px solid black;
+        }
+        #target {
+            background-color: blue;
+        }
+    </style>
+    <script src="../../../../resources/js-test-pre.js"></script>
+    <script>
+        description("Checks that touches work on elements that are taller than the view.");
+        window.jsTestIsAsync = true;
+
+        function getUIScript(x, y)
+        {
+            return `
+            (function() {
+                uiController.singleTapAtPoint(${x}, ${y}, function() {
+                    uiController.uiScriptComplete();
+                });
+            })();`
+        }
+
+        function runTest()
+        {
+            var container = document.getElementById('container');
+            target.addEventListener('touchstart', function() {
+                debug("touchstart fired.");
+                shouldBe("event.touches.length", "1");
+                shouldBe("event.touches[0].clientX", "113");
+                shouldBe("event.touches[0].clientY", "178");
+            }, false);
+
+            window.addEventListener("touchend", (event) => {
+                debug("touchend fired.");
+                finishJSTest();
+            });
+
+            var targetRect = document.getElementById('target').getBoundingClientRect();
+            
+            var tapPointX = targetRect.x + targetRect.width / 2;
+            var tapPointY = targetRect.y + 50; // Tap near the top.
+
+            if (window.testRunner)
+                testRunner.runUIScript(getUIScript(tapPointX, tapPointY), function(result) { });
+        }
+        
+        window.addEventListener('load', runTest, false);
+    </script>
+</head>
+<body>
+<main>
+    <div class="foo">
+        <h1>Test</h1>
+    </div>
+    <div class="map">
+        <div id="container">
+            <div id="target" style="position: absolute; width: 100px; height: 800px;"></div>
+        </div>
+    </div>
+</main>
+<script src="../../../../resources/js-test-post.js"></script>
+</body>
+</html>