LayoutTests/ChangeLog

 12019-03-29 Frederic Wang <fwang@igalia.com>
 2
 3 Add more tests for iOS iframe scrolling with fixed/sticky layers
 4 https://bugs.webkit.org/show_bug.cgi?id=196394
 5
 6 This commit adds iOS tests for scrolling iframes containing fixed/sticky layers. They are
 7 extracted from earlier experimental patches for iOS frame scrolling but failed with the
 8 alternative patches initially landed in bug 193539 and follow-up bugs. They now pass again
 9 on trunk, so we can finally import them.
 10
 11 Reviewed by NOBODY (OOPS!).
 12
 13 * fast/scrolling/ios/programmatic-scroll-iframe-010-expected.html: Added.
 14 * fast/scrolling/ios/programmatic-scroll-iframe-010.html: Added.
 15 * fast/scrolling/ios/programmatic-scroll-iframe-011-expected.html: Added.
 16 * fast/scrolling/ios/programmatic-scroll-iframe-011.html: Added.
 17 * fast/scrolling/ios/programmatic-scroll-iframe-012-expected.html: Added.
 18 * fast/scrolling/ios/programmatic-scroll-iframe-012.html: Added.
 19 * fast/scrolling/ios/scroll-iframe-005-expected.html: Added.
 20 * fast/scrolling/ios/scroll-iframe-005.html: Added.
 21 * fast/scrolling/ios/scroll-iframe-006-expected.html: Added.
 22 * fast/scrolling/ios/scroll-iframe-006.html: Added.
 23
1242019-03-29 Cathie Chen <cathiechen@igalia.com>
225
326 Implement ResizeObserver.

LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-010-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <title>Programmatic scrolling of iframe</title>
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 </head>
 7 <body>
 8 <p>This test passes if you see a green square.</p>
 9 <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
 10 </div>
 11 </body>
 12</html>

LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-010.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <title>Programmatic scrolling of iframe</title>
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 <script>
 7 if (window.testRunner)
 8 testRunner.waitUntilDone();
 9 if (window.internals)
 10 internals.settings.setAsyncFrameScrollingEnabled(true);
 11
 12 function runTest() {
 13 // This checks scrolling behavior for position "fixed".
 14 document.getElementById("positionFixed").contentWindow.window.scrollTo(100, 100);
 15
 16 if (window.testRunner)
 17 testRunner.notifyDone();
 18 }
 19 </script>
 20 <style>
 21 iframe {
 22 float: left;
 23 background: linear-gradient(135deg, red, orange);
 24 border: 0;
 25 height: 100px;
 26 width: 100px;
 27 overflow: none;
 28 }
 29 </style>
 30 </head>
 31 <body>
 32 <p>This test passes if you see a green square.</p>
 33 <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
 34 <iframe id="positionFixed" scrolling="yes" srcdoc="
 35 <body style='margin: 0; width: 200px; height: 200px'>
 36 <div style='position: fixed; width: 100px; height: 100px; background: green;'></div>
 37 </body>" onload="runTest()">
 38 </iframe>
 39 </div>
 40 </body>
 41</html>

LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-011-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <title>Programmatic scrolling of iframe</title>
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 </head>
 7 <body>
 8 <p>This test passes if you see a green square.</p>
 9 <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
 10 </div>
 11 </body>
 12</html>

LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-011.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <title>Programmatic scrolling of iframe</title>
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 <script>
 7 if (window.testRunner)
 8 testRunner.waitUntilDone();
 9 if (window.internals)
 10 internals.settings.setAsyncFrameScrollingEnabled(true);
 11
 12 function runTest() {
 13 // This checks scrolling behavior for position "sticky".
 14 document.getElementById("positionStickyBegin").contentWindow.window.scrollTo(0, 50);
 15
 16 if (window.testRunner)
 17 testRunner.notifyDone();
 18 }
 19 </script>
 20 <style>
 21 iframe {
 22 float: left;
 23 background: linear-gradient(135deg, red, orange);
 24 border: 0;
 25 height: 100px;
 26 width: 100px;
 27 overflow: none;
 28 }
 29 </style>
 30 </head>
 31 <body>
 32 <p>This test passes if you see a green square.</p>
 33 <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
 34 <iframe id="positionStickyBegin" scrolling="yes" srcdoc="
 35 <body style='margin: 0; width: 200px; height: 300px'>
 36 <div style='height: 50px'></div>
 37 <div style='width: 100px; height: 50px; background: green;'></div>
 38 <div style='position: -webkit-sticky; position: sticky; left: 0px; top: 0px; width: 100px; height: 50px; background: green;'></div>
 39 </body>" onload="runTest()">
 40 </iframe>
 41 </div>
 42 </body>
 43</html>

LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-012-expected.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <title>Programmatic scrolling of iframe</title>
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 </head>
 7 <body>
 8 <p>This test passes if you see a green square.</p>
 9 <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
 10 </div>
 11 </body>
 12</html>

LayoutTests/fast/scrolling/ios/programmatic-scroll-iframe-012.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <title>Programmatic scrolling of iframe</title>
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 <script>
 7 if (window.testRunner)
 8 testRunner.waitUntilDone();
 9 if (window.internals)
 10 internals.settings.setAsyncFrameScrollingEnabled(true);
 11
 12 function runTest() {
 13 // This checks scrolling behavior for position "sticky".
 14 document.getElementById("positionStickyEnd").contentWindow.window.scrollTo(0, 150);
 15
 16 if (window.testRunner)
 17 testRunner.notifyDone();
 18 }
 19 </script>
 20 <style>
 21 iframe {
 22 float: left;
 23 background: linear-gradient(135deg, red, orange);
 24 border: 0;
 25 height: 100px;
 26 width: 100px;
 27 overflow: none;
 28 }
 29 </style>
 30 </head>
 31 <body>
 32 <p>This test passes if you see a green square.</p>
 33 <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
 34 <iframe id="positionStickyEnd" scrolling="yes" srcdoc="
 35 <body style='margin: 0; width: 200px; height: 300px'>
 36 <div style='height: 100px'></div>
 37 <div style='position: -webkit-sticky; position: sticky; left: 0px; top: 0px; width: 100px; height: 100px; background: green;'></div>
 38 </body>" onload="runTest()">
 39 </iframe>
 40 </div>
 41 </body>
 42</html>

LayoutTests/fast/scrolling/ios/scroll-iframe-005-expected.html

 1<!DOCTYPE html>
 2<html
 3 <head>
 4 <title>Scrolling of iframe</title>
 5 <style>
 6 .testdiv {
 7 float: left;
 8 background: green;
 9 border: 0;
 10 height: 100px;
 11 width: 100px;
 12 }
 13 </style>
 14 </head>
 15 <body>
 16 <p>This test passes if you see a green square.</p>
 17 <div class="testdiv"></div>
 18 </body>
 19</html>

LayoutTests/fast/scrolling/ios/scroll-iframe-005.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <title>Scrolling of iframe</title>
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 <script src="../../../resources/basic-gestures.js"></script>
 7 <script type="text/javascript">
 8 if (window.testRunner)
 9 testRunner.waitUntilDone();
 10 if (window.internals)
 11 internals.settings.setAsyncFrameScrollingEnabled(true);
 12
 13 function centerOf(id)
 14 {
 15 var frameBox = document.getElementById(id).getBoundingClientRect();
 16 return { x: frameBox.left + frameBox.width / 2, y: frameBox.top + frameBox.height / 2 };
 17 }
 18
 19 async function runTest() {
 20 if (!window.testRunner || !testRunner.runUIScript)
 21 return;
 22
 23 // This checks scrolling to the location of the green square.
 24 var c = centerOf("positionFixed");
 25 await touchAndDragFromPointToPoint(c.x, c.y, c.x - 150, c.y - 150);
 26 await liftUpAtPoint(c.x - 150, c.y - 150);
 27
 28 // Wait for scrolling to stabilize and for scrollbars to disappear.
 29 setTimeout(() => {testRunner.notifyDone(); }, 1000);
 30 }
 31 </script>
 32 <style>
 33 iframe {
 34 float: left;
 35 background: linear-gradient(135deg, red, orange);
 36 border: 0;
 37 height: 100px;
 38 width: 100px;
 39 }
 40 </style>
 41 </head>
 42 <body>
 43 <p>This test passes if you see a green square.</p>
 44 <iframe id="positionFixed" scrolling="yes" srcdoc="
 45 <body style='position: relative; margin: 0; width: 300px; height: 300px'>
 46 <div style='position: fixed; width: 100px; height: 50px; background: green;'></div>
 47 <div style='position: absolute; bottom: 0px; right: 0px; width: 100px; height: 50px; background: green;'></div>
 48 </body>" onload="runTest()">
 49 </iframe>
 50 </body>
 51</html>

LayoutTests/fast/scrolling/ios/scroll-iframe-006-expected.html

 1<!DOCTYPE html>
 2<html
 3 <head>
 4 <title>Scrolling of iframe</title>
 5 <style>
 6 .testdiv {
 7 float: left;
 8 background: green;
 9 border: 0;
 10 height: 100px;
 11 width: 100px;
 12 }
 13 </style>
 14 </head>
 15 <body>
 16 <p>This test passes if you see a green square.</p>
 17 <div class="testdiv"></div>
 18 </body>
 19</html>

LayoutTests/fast/scrolling/ios/scroll-iframe-006.html

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <title>Scrolling of iframe</title>
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 <script src="../../../resources/basic-gestures.js"></script>
 7 <script type="text/javascript">
 8 if (window.testRunner)
 9 testRunner.waitUntilDone();
 10 if (window.internals)
 11 internals.settings.setAsyncFrameScrollingEnabled(true);
 12
 13 function centerOf(id)
 14 {
 15 var frameBox = document.getElementById(id).getBoundingClientRect();
 16 return { x: frameBox.left + frameBox.width / 2, y: frameBox.top + frameBox.height / 2 };
 17 }
 18
 19 async function runTest() {
 20 if (!window.testRunner || !testRunner.runUIScript)
 21 return;
 22
 23 // This checks scrolling to the location of the green square
 24 var c = centerOf("positionSticky");
 25 await touchAndDragFromPointToPoint(c.x, c.y, c.x, c.y - 150);
 26 await liftUpAtPoint(c.x, c.y - 150);
 27
 28 // Wait for scrolling to stabilize and for scrollbars to disappear.
 29 setTimeout(() => {testRunner.notifyDone(); }, 1000);
 30 }
 31 </script>
 32 <style>
 33 iframe {
 34 float: left;
 35 background: linear-gradient(135deg, red, orange);
 36 border: 0;
 37 height: 100px;
 38 width: 100px;
 39 }
 40 </style>
 41 </head>
 42 <body>
 43 <p>This test passes if you see a green square.</p>
 44 <iframe id="positionSticky" scrolling="yes" srcdoc="
 45 <body style='position: relative; margin: 0; width: 300px; height: 300px'>
 46 <div style='height: 100px'></div>
 47 <div style='position: -webkit-sticky; position: sticky; left: 0px; top: 0px; width: 100px; height: 50px; background: green;'></div>
 48 <div style='position: absolute; bottom: 0px; width: 100px; height: 50px; background: green;'></div>
 49 </body>" onload="runTest()">
 50 </iframe>
 51 </body>
 52</html>