Add more tests for ios programmatic iframe scrolling with fixed/sticky layers
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 25 Apr 2019 18:59:51 +0000 (18:59 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 25 Apr 2019 18:59:51 +0000 (18:59 +0000)
https://bugs.webkit.org/show_bug.cgi?id=197280

This commit adds iOS tests for scrolling iframes containing fixed/sticky layers. They are
extracted from earlier experimental patches for iOS frame scrolling but failed with the
alternative patches initially landed in bug 193539 and follow-up bugs. They now pass again
on trunk, so we can finally import them.

Patch by Frederic Wang <fwang@igalia.com> on 2019-04-25
Reviewed by Darin Adler.

* fast/scrolling/ios/programmatic-scroll-iframe-010-expected.html: Added.
* fast/scrolling/ios/programmatic-scroll-iframe-010.html: Added.
* fast/scrolling/ios/programmatic-scroll-iframe-011-expected.html: Added.
* fast/scrolling/ios/programmatic-scroll-iframe-011.html: Added.
* fast/scrolling/ios/programmatic-scroll-iframe-012-expected.html: Added.
* fast/scrolling/ios/programmatic-scroll-iframe-012.html: Added.

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

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

index 270f2ac..dad5c88 100644 (file)
@@ -1,3 +1,22 @@
+2019-04-25  Frederic Wang  <fwang@igalia.com>
+
+        Add more tests for ios programmatic iframe scrolling with fixed/sticky layers
+        https://bugs.webkit.org/show_bug.cgi?id=197280
+
+        This commit adds iOS tests for scrolling iframes containing fixed/sticky layers. They are
+        extracted from earlier experimental patches for iOS frame scrolling but failed with the
+        alternative patches initially landed in bug 193539 and follow-up bugs. They now pass again
+        on trunk, so we can finally import them.
+
+        Reviewed by Darin Adler.
+
+        * fast/scrolling/ios/programmatic-scroll-iframe-010-expected.html: Added.
+        * fast/scrolling/ios/programmatic-scroll-iframe-010.html: Added.
+        * fast/scrolling/ios/programmatic-scroll-iframe-011-expected.html: Added.
+        * fast/scrolling/ios/programmatic-scroll-iframe-011.html: Added.
+        * fast/scrolling/ios/programmatic-scroll-iframe-012-expected.html: Added.
+        * fast/scrolling/ios/programmatic-scroll-iframe-012.html: Added.
+
 2019-04-25  Shawn Roberts  <sroberts@apple.com>
 
         imported/w3c/web-platform-tests/visual-viewport/viewport-resize-event-on-load-overflowing-page.html is a flaky failure
diff --git a/LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-010-expected.html b/LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-010-expected.html
new file mode 100644 (file)
index 0000000..9b86f0a
--- /dev/null
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Programmatic scrolling of iframe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <p>This test passes if you see a green square.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
+    </div>
+  </body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-010.html b/LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-010.html
new file mode 100644 (file)
index 0000000..563876f
--- /dev/null
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Programmatic scrolling of iframe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+        if (window.internals)
+            internals.settings.setAsyncFrameScrollingEnabled(true);
+
+        function runTest() {
+            // This checks scrolling behavior for position "fixed".
+            document.getElementById("positionFixed").contentWindow.window.scrollTo(100, 100);
+
+            if (window.testRunner)
+                testRunner.notifyDone();
+        }
+     </script>
+    <style>
+        iframe {
+            float: left;
+            background: linear-gradient(135deg, red, orange);
+            border: 0;
+            height: 100px;
+            width: 100px;
+            overflow: none;
+        }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see a green square.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
+        <iframe id="positionFixed" scrolling="yes" srcdoc="
+            <body style='margin: 0; width: 200px; height: 200px'>
+                <div style='position: fixed; width: 100px; height: 100px; background: green;'></div>
+            </body>" onload="runTest()">
+        </iframe>
+    </div>
+  </body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-011-expected.html b/LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-011-expected.html
new file mode 100644 (file)
index 0000000..9b86f0a
--- /dev/null
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Programmatic scrolling of iframe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <p>This test passes if you see a green square.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
+    </div>
+  </body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-011.html b/LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-011.html
new file mode 100644 (file)
index 0000000..2eff48a
--- /dev/null
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Programmatic scrolling of iframe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+        if (window.internals)
+            internals.settings.setAsyncFrameScrollingEnabled(true);
+
+        function runTest() {
+            // This checks scrolling behavior for position "sticky".
+            document.getElementById("positionStickyBegin").contentWindow.window.scrollTo(0, 50);
+
+            if (window.testRunner)
+                testRunner.notifyDone();
+        }
+     </script>
+    <style>
+        iframe {
+            float: left;
+            background: linear-gradient(135deg, red, orange);
+            border: 0;
+            height: 100px;
+            width: 100px;
+            overflow: none;
+        }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see a green square.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
+        <iframe id="positionStickyBegin" scrolling="yes" srcdoc="
+            <body style='margin: 0; width: 200px; height: 300px'>
+                <div style='height: 50px'></div>
+                <div style='width: 100px; height: 50px; background: green;'></div>
+                <div style='position: -webkit-sticky; position: sticky; left: 0px; top: 0px; width: 100px; height: 50px; background: green;'></div>
+            </body>" onload="runTest()">
+        </iframe>
+    </div>
+  </body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-012-expected.html b/LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-012-expected.html
new file mode 100644 (file)
index 0000000..9b86f0a
--- /dev/null
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Programmatic scrolling of iframe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <p>This test passes if you see a green square.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
+    </div>
+  </body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-012.html b/LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-012.html
new file mode 100644 (file)
index 0000000..29452f7
--- /dev/null
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Programmatic scrolling of iframe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+        if (window.internals)
+            internals.settings.setAsyncFrameScrollingEnabled(true);
+
+        function runTest() {
+            // This checks scrolling behavior for position "sticky".
+            document.getElementById("positionStickyEnd").contentWindow.window.scrollTo(0, 150);
+
+            if (window.testRunner)
+                testRunner.notifyDone();
+        }
+     </script>
+    <style>
+        iframe {
+            float: left;
+            background: linear-gradient(135deg, red, orange);
+            border: 0;
+            height: 100px;
+            width: 100px;
+            overflow: none;
+        }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see a green square.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
+        <iframe id="positionStickyEnd" scrolling="yes" srcdoc="
+            <body style='margin: 0; width: 200px; height: 300px'>
+                <div style='height: 100px'></div>
+                <div style='position: -webkit-sticky; position: sticky; left: 0px; top: 0px; width: 100px; height: 100px; background: green;'></div>
+            </body>" onload="runTest()">
+        </iframe>
+    </div>
+  </body>
+</html>