Add tests mixing programmatic and user frame scrolling on iOS
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 25 Feb 2019 18:26:09 +0000 (18:26 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 25 Feb 2019 18:26:09 +0000 (18:26 +0000)
https://bugs.webkit.org/show_bug.cgi?id=194900

This patch adds tests initially written for bug 182868 but eventually
fixed by bug 194886. They involve mixing user and programmatic
scrolling.

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

* fast/scrolling/ios/mixing-user-and-programmatic-scroll-001-expected.html: Added.
* fast/scrolling/ios/mixing-user-and-programmatic-scroll-001.html: Added.
* fast/scrolling/ios/mixing-user-and-programmatic-scroll-002-expected.html: Added.
* fast/scrolling/ios/mixing-user-and-programmatic-scroll-002.html: Added.
* fast/scrolling/ios/mixing-user-and-programmatic-scroll-003-expected.html: Added.
* fast/scrolling/ios/mixing-user-and-programmatic-scroll-003.html: Added.
* fast/scrolling/ios/mixing-user-and-programmatic-scroll-004-expected.html: Added.
* fast/scrolling/ios/mixing-user-and-programmatic-scroll-004.html: Added.
* fast/scrolling/ios/mixing-user-and-programmatic-scroll-005-expected.html: Added.
* fast/scrolling/ios/mixing-user-and-programmatic-scroll-005.html: Added.
* fast/scrolling/ios/mixing-user-and-programmatic-scroll-006-expected.html: Added.
* fast/scrolling/ios/mixing-user-and-programmatic-scroll-006.html: Added.

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

13 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-001-expected.html [new file with mode: 0644]
LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-001.html [new file with mode: 0644]
LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-002-expected.html [new file with mode: 0644]
LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-002.html [new file with mode: 0644]
LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-003-expected.html [new file with mode: 0644]
LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-003.html [new file with mode: 0644]
LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-004-expected.html [new file with mode: 0644]
LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-004.html [new file with mode: 0644]
LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-005-expected.html [new file with mode: 0644]
LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-005.html [new file with mode: 0644]
LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-006-expected.html [new file with mode: 0644]
LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-006.html [new file with mode: 0644]

index d8808e0..84aebde 100644 (file)
@@ -1,3 +1,27 @@
+2019-02-25  Frederic Wang  <fwang@igalia.com>
+
+        Add tests mixing programmatic and user frame scrolling on iOS
+        https://bugs.webkit.org/show_bug.cgi?id=194900
+
+        This patch adds tests initially written for bug 182868 but eventually
+        fixed by bug 194886. They involve mixing user and programmatic
+        scrolling.
+
+        Reviewed by Antti Koivisto.
+
+        * fast/scrolling/ios/mixing-user-and-programmatic-scroll-001-expected.html: Added.
+        * fast/scrolling/ios/mixing-user-and-programmatic-scroll-001.html: Added.
+        * fast/scrolling/ios/mixing-user-and-programmatic-scroll-002-expected.html: Added.
+        * fast/scrolling/ios/mixing-user-and-programmatic-scroll-002.html: Added.
+        * fast/scrolling/ios/mixing-user-and-programmatic-scroll-003-expected.html: Added.
+        * fast/scrolling/ios/mixing-user-and-programmatic-scroll-003.html: Added.
+        * fast/scrolling/ios/mixing-user-and-programmatic-scroll-004-expected.html: Added.
+        * fast/scrolling/ios/mixing-user-and-programmatic-scroll-004.html: Added.
+        * fast/scrolling/ios/mixing-user-and-programmatic-scroll-005-expected.html: Added.
+        * fast/scrolling/ios/mixing-user-and-programmatic-scroll-005.html: Added.
+        * fast/scrolling/ios/mixing-user-and-programmatic-scroll-006-expected.html: Added.
+        * fast/scrolling/ios/mixing-user-and-programmatic-scroll-006.html: Added.
+
 2019-02-25  Truitt Savell  <tsavell@apple.com>
 
         fast/mediastream/MediaStream-video-element.html is flaky after r241821, marking as failure while waiting for fix.
diff --git a/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-001-expected.html b/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-001-expected.html
new file mode 100644 (file)
index 0000000..6cfacb8
--- /dev/null
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mixing user and programmatic scroll of iframe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <p>This test passes if you see a green rectangle.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-001.html b/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-001.html
new file mode 100644 (file)
index 0000000..7ebf460
--- /dev/null
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mixing user and programmatic scroll 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 getFrameData(id)
+      {
+          var result = {};
+          var f = document.getElementById(id);
+          result.w = f.contentWindow.window;
+          var frameBox = f.getBoundingClientRect();
+          result.x = frameBox.left + frameBox.width / 2;
+          result.y = frameBox.top + frameBox.height / 2;
+          return result;
+      }
+
+      function waitPromise(delay)
+      {
+          return new Promise((resolve) => { setTimeout(resolve, delay); });
+      }
+
+      async function runTest() {
+          if (!window.testRunner || !testRunner.runUIScript)
+              return;
+
+          // This verifies user scroll followed by orthogonal programmatic scroll.
+          var d = getFrameData("userYAndProgrammaticX");
+          await touchAndDragFromPointToPoint(d.x, d.y, d.x, d.y - 150);
+          await liftUpAtPoint(d.x, d.y - 150);
+          await waitPromise(1000); // Wait for scrolling to stabilize.
+          d.w.scrollBy(100, 0);
+
+          testRunner.notifyDone();
+       }
+    </script>
+    <style>
+        iframe {
+            position: absolute;
+            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 rectangle.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
+        <iframe id="userYAndProgrammaticX" style="left: 0px; top: 0px;" 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="runTest()">
+        </iframe>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-002-expected.html b/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-002-expected.html
new file mode 100644 (file)
index 0000000..6cfacb8
--- /dev/null
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mixing user and programmatic scroll of iframe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <p>This test passes if you see a green rectangle.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-002.html b/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-002.html
new file mode 100644 (file)
index 0000000..cdff09e
--- /dev/null
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mixing user and programmatic scroll 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 getFrameData(id)
+      {
+          var result = {};
+          var f = document.getElementById(id);
+          result.w = f.contentWindow.window;
+          var frameBox = f.getBoundingClientRect();
+          result.x = frameBox.left + frameBox.width / 2;
+          result.y = frameBox.top + frameBox.height / 2;
+          return result;
+      }
+
+      function waitPromise(delay)
+      {
+          return new Promise((resolve) => { setTimeout(resolve, delay); });
+      }
+
+      async function runTest() {
+          if (!window.testRunner || !testRunner.runUIScript)
+              return;
+
+          // This verifies programmatic scroll followed by orthogonal user scroll.
+          d = getFrameData("programmaticXAndUserY");
+          d.w.scrollBy(100, 0);
+          await touchAndDragFromPointToPoint(d.x, d.y, d.x, d.y - 150);
+          await liftUpAtPoint(d.x, d.y - 150);
+          await waitPromise(1000); // Wait for scrolling to stabilize.
+
+          testRunner.notifyDone();
+       }
+    </script>
+    <style>
+        iframe {
+            position: absolute;
+            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 rectangle.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
+        <iframe id="programmaticXAndUserY" style="left: 0px; top: 0px;" 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="runTest()">
+        </iframe>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-003-expected.html b/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-003-expected.html
new file mode 100644 (file)
index 0000000..6cfacb8
--- /dev/null
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mixing user and programmatic scroll of iframe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <p>This test passes if you see a green rectangle.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-003.html b/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-003.html
new file mode 100644 (file)
index 0000000..95f941f
--- /dev/null
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mixing user and programmatic scroll 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 getFrameData(id)
+      {
+          var result = {};
+          var f = document.getElementById(id);
+          result.w = f.contentWindow.window;
+          var frameBox = f.getBoundingClientRect();
+          result.x = frameBox.left + frameBox.width / 2;
+          result.y = frameBox.top + frameBox.height / 2;
+          return result;
+      }
+
+      function waitPromise(delay)
+      {
+          return new Promise((resolve) => { setTimeout(resolve, delay); });
+      }
+
+      async function runTest() {
+          if (!window.testRunner || !testRunner.runUIScript)
+              return;
+
+          // This verifies programmatic scroll followed by user scroll in the same direction.
+          d = getFrameData("programmaticXAndUserX");
+          d.w.scrollBy(150, 0);
+          await touchAndDragFromPointToPoint(d.x, d.y, d.x - 100, d.y);
+          await liftUpAtPoint(d.x - 100, d.y);
+          await waitPromise(1000); // Wait for scrolling to stabilize.
+
+          testRunner.notifyDone();
+       }
+    </script>
+    <style>
+        iframe {
+            position: absolute;
+            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 rectangle.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
+        <iframe id="programmaticXAndUserX" style="left: 0px; top: 0px;" scrolling="yes" srcdoc="
+            <body style='margin: 0; width: 300px; height: 200px'>
+                <div style='left: 200px; top: 0px; position: absolute; width: 100px; height: 100px; background: green;'></div>
+            </body>" onload="runTest()">
+        </iframe>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-004-expected.html b/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-004-expected.html
new file mode 100644 (file)
index 0000000..6cfacb8
--- /dev/null
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mixing user and programmatic scroll of iframe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <p>This test passes if you see a green rectangle.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-004.html b/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-004.html
new file mode 100644 (file)
index 0000000..d33889b
--- /dev/null
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mixing user and programmatic scroll 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 getFrameData(id)
+      {
+          var result = {};
+          var f = document.getElementById(id);
+          result.w = f.contentWindow.window;
+          var frameBox = f.getBoundingClientRect();
+          result.x = frameBox.left + frameBox.width / 2;
+          result.y = frameBox.top + frameBox.height / 2;
+          return result;
+      }
+
+      function waitPromise(delay)
+      {
+          return new Promise((resolve) => { setTimeout(resolve, delay); });
+      }
+
+      async function runTest() {
+          if (!window.testRunner || !testRunner.runUIScript)
+              return;
+
+          // This verifies user scroll followed by programmatic scroll in the same direction.
+          d = getFrameData("userXAndProgrammaticX");
+          await touchAndDragFromPointToPoint(d.x, d.y, d.x - 100, d.y);
+          await liftUpAtPoint(d.x - 100, d.y);
+          await waitPromise(1000); // Wait for scrolling to stabilize.
+          d.w.scrollBy(150, 0);
+
+          testRunner.notifyDone();
+       }
+    </script>
+    <style>
+        iframe {
+            position: absolute;
+            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 rectangle.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
+        <iframe id="userXAndProgrammaticX" style="left: 0px; top: 0px;" scrolling="yes" srcdoc="
+            <body style='margin: 0; width: 300px; height: 200px'>
+                <div style='left: 200px; top: 0px; position: absolute; width: 100px; height: 100px; background: green;'></div>
+            </body>" onload="runTest()">
+        </iframe>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-005-expected.html b/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-005-expected.html
new file mode 100644 (file)
index 0000000..6cfacb8
--- /dev/null
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mixing user and programmatic scroll of iframe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <p>This test passes if you see a green rectangle.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-005.html b/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-005.html
new file mode 100644 (file)
index 0000000..44d975e
--- /dev/null
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mixing user and programmatic scroll 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 getFrameData(id)
+      {
+          var result = {};
+          var f = document.getElementById(id);
+          result.w = f.contentWindow.window;
+          var frameBox = f.getBoundingClientRect();
+          result.x = frameBox.left + frameBox.width / 2;
+          result.y = frameBox.top + frameBox.height / 2;
+          return result;
+      }
+
+      function waitPromise(delay)
+      {
+          return new Promise((resolve) => { setTimeout(resolve, delay); });
+      }
+
+      async function runTest() {
+          if (!window.testRunner || !testRunner.runUIScript)
+              return;
+
+          // This verifies mixing several user/programmatic scrolls in various directions.
+          d = getFrameData("programmaticYAndUserXAndProgrammaticXAndUserY");
+          await touchAndDragFromPointToPoint(d.x, d.y, d.x, d.y - 100);
+          await liftUpAtPoint(d.x, d.y - 100);
+          await waitPromise(1000); // Wait for scrolling to stabilize.
+          d.w.scrollBy(150, 0);
+          await touchAndDragFromPointToPoint(d.x, d.y, d.x - 100, d.y);
+          await liftUpAtPoint(d.x - 100, d.y);
+          await waitPromise(1000); // Wait for scrolling to stabilize.
+          d.w.scrollBy(0, 150);
+
+          testRunner.notifyDone();
+       }
+    </script>
+    <style>
+        iframe {
+            position: absolute;
+            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 rectangle.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
+        <iframe id="programmaticYAndUserXAndProgrammaticXAndUserY" style="left: 0px; top: 0px;" scrolling="yes" srcdoc="
+            <body style='margin: 0; width: 300px; height: 300px'>
+                <div style='left: 200px; top: 200px; position: absolute; width: 100px; height: 100px; background: green;'></div>
+            </body>" onload="runTest()">
+        </iframe>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-006-expected.html b/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-006-expected.html
new file mode 100644 (file)
index 0000000..6cfacb8
--- /dev/null
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mixing user and programmatic scroll of iframe</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <p>This test passes if you see a green rectangle.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-006.html b/LayoutTests/fast/scrolling/ios/mixing-user-and-programmatic-scroll-006.html
new file mode 100644 (file)
index 0000000..b89300c
--- /dev/null
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mixing user and programmatic scroll 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 getFrameData(id)
+      {
+          var result = {};
+          var f = document.getElementById(id);
+          result.w = f.contentWindow.window;
+          var frameBox = f.getBoundingClientRect();
+          result.x = frameBox.left + frameBox.width / 2;
+          result.y = frameBox.top + frameBox.height / 2;
+          return result;
+      }
+
+      function waitPromise(delay)
+      {
+          return new Promise((resolve) => { setTimeout(resolve, delay); });
+      }
+
+      async function runTest() {
+          if (!window.testRunner || !testRunner.runUIScript)
+              return;
+
+          // This verifies hit testing after user and programmatic scroll.
+          d = getFrameData("programmaticYAndUserXAndHitTesting");
+          d.w.scrollBy(0, 100);
+          await touchAndDragFromPointToPoint(d.x, d.y, d.x - 150, d.y);
+          await liftUpAtPoint(d.x - 150, d.y);
+          await waitPromise(1500); // Wait for scrolling to stabilize and for scrollbar to disappear.
+          await tapAtPoint(d.x, d.y);
+
+          testRunner.notifyDone();
+       }
+    </script>
+    <style>
+        iframe {
+            position: absolute;
+            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 rectangle.</p>
+    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
+        <iframe id="programmaticYAndUserXAndHitTesting" style="left: 0px; top: 0px;" scrolling="yes" srcdoc="
+            <body style='margin: 0; width: 200px; height: 200px'>
+                <div style='left: 100px; top: 100px; position: absolute; width: 100px; height: 100px; background: red;' onclick='this.style.background=&quot;green&quot;'></div>
+            </body>" onload="runTest()">
+        </iframe>
+    </div>
+</body>
+</html>