Add a basic test for scrollable iframe on iOS
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 21 Jan 2019 12:37:51 +0000 (12:37 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 21 Jan 2019 12:37:51 +0000 (12:37 +0000)
https://bugs.webkit.org/show_bug.cgi?id=193650

Patch by Frederic Wang <fwang@igalia.com> on 2019-01-21
Reviewed by Antti Koivisto.

* fast/scrolling/ios/scroll-iframe-expected.html: Added.
* fast/scrolling/ios/scroll-iframe.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/fast/scrolling/ios/scroll-iframe-expected.html [new file with mode: 0644]
LayoutTests/fast/scrolling/ios/scroll-iframe.html [new file with mode: 0644]

index 2be2f9c..e9e4237 100644 (file)
@@ -1,3 +1,13 @@
+2019-01-21  Frederic Wang  <fwang@igalia.com>
+
+        Add a basic test for scrollable iframe on iOS
+        https://bugs.webkit.org/show_bug.cgi?id=193650
+
+        Reviewed by Antti Koivisto.
+
+        * fast/scrolling/ios/scroll-iframe-expected.html: Added.
+        * fast/scrolling/ios/scroll-iframe.html: Added.
+
 2019-01-20  Michael Catanzaro  <mcatanzaro@igalia.com>
 
         Unreviewed GTK test gardening
diff --git a/LayoutTests/fast/scrolling/ios/scroll-iframe-expected.html b/LayoutTests/fast/scrolling/ios/scroll-iframe-expected.html
new file mode 100644 (file)
index 0000000..28fbc26
--- /dev/null
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html
+  <head>
+    <title>Scrolling of iframe</title>
+    <style>
+        .testdiv {
+            float: left;
+            background: green;
+            border: 0;
+            height: 100px;
+            width: 100px;
+        }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see a green rectangle.</p>
+    <div style="width:300px">
+        <div class=testdiv></div>
+        <div class=testdiv></div>
+        <div class=testdiv></div>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/scroll-iframe.html b/LayoutTests/fast/scrolling/ios/scroll-iframe.html
new file mode 100644 (file)
index 0000000..66c2f0e
--- /dev/null
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Scrolling of iframe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="../../../resources/basic-gestures.js"></script>
+    <script type="text/javascript">
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+        if (window.internals)
+            internals.settings.setAsyncFrameScrollingEnabled(true);
+
+      function centerOf(id)
+      {
+          var frameBox = document.getElementById(id).getBoundingClientRect();
+          return { x: frameBox.left + frameBox.width / 2, y: frameBox.top + frameBox.height / 2 };
+      }
+
+      async function runTest() {
+         if (!window.testRunner || !testRunner.runUIScript)
+             return;
+
+         // This checks scrolling to the location of the green square.
+         var c = centerOf("maxScrollX");
+         await touchAndDragFromPointToPoint(c.x, c.y, c.x - 150, c.y);
+         await liftUpAtPoint(c.x - 150, c.y);
+         c = centerOf("maxScrollY");
+         await touchAndDragFromPointToPoint(c.x, c.y, c.x, c.y - 150);
+         await liftUpAtPoint(c.x, c.y - 150);
+         c = centerOf("maxScrollXY");
+         await touchAndDragFromPointToPoint(c.x, c.y, c.x - 150, c.y - 150);
+         await liftUpAtPoint(c.x - 150, c.y - 150);
+
+         // Wait for scrolling to stabilize and for scrollbars to disappear.
+         setTimeout(() => {testRunner.notifyDone(); }, 2000);
+       }
+
+       var frameToLoadCount = 3;
+       function newFrameLoaded() {
+           frameToLoadCount--;
+           if (frameToLoadCount == 0)
+               runTest();
+       }
+    </script>
+    <style>
+        iframe {
+            float: left;
+            background: linear-gradient(135deg, red, orange);
+            border: 0;
+            height: 100px;
+            width: 100px;
+        }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see a green rectangle.</p>
+    <div style="width:300px">
+        <iframe id="maxScrollX" scrolling="yes" srcdoc="
+            <body style='margin: 0; width: 200px; height: 200px'>
+                <div style='left: 100px; position: absolute; width: 100px; height: 100px; background: green;'></div>
+            </body>" onload="newFrameLoaded()">
+        </iframe>
+        <iframe id="maxScrollY" scrolling="yes" srcdoc="
+            <body style='margin: 0; width: 200px; height: 200px'>
+                <div style='top: 100px; position: absolute; width: 100px; height: 100px; background: green;'></div>
+            </body>" onload="newFrameLoaded()">
+        </iframe>
+        <iframe id="maxScrollXY" scrolling="yes" srcdoc="
+            <body style='margin: 0; width: 200px; height: 200px'>
+                <div style='left: 100px; top: 100px; position: absolute; width: 100px; height: 100px; background: green;'></div>
+            </body>" onload="newFrameLoaded()">
+        </iframe>
+    </div>
+</body>
+</html>