Create a set of initial scroll snap point tests
authorbfulgham@apple.com <bfulgham@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 2 May 2015 01:44:54 +0000 (01:44 +0000)
committerbfulgham@apple.com <bfulgham@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 2 May 2015 01:44:54 +0000 (01:44 +0000)
https://bugs.webkit.org/show_bug.cgi?id=142358

Reviewed by Simon Fraser.

* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal-expected.txt: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal.html: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal-expected.txt: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical-expected.txt: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical-expected.txt: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal.html [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical.html [new file with mode: 0644]

index 6d32a3e..9bdb71d 100644 (file)
@@ -1,3 +1,20 @@
+2015-05-01  Brent Fulgham  <bfulgham@apple.com>
+
+        Create a set of initial scroll snap point tests
+        https://bugs.webkit.org/show_bug.cgi?id=142358
+
+        Reviewed by Simon Fraser.
+
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal-expected.txt: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal.html: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal-expected.txt: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical-expected.txt: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical-expected.txt: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical.html: Added.
+
 2015-05-01  Andreas Kling  <akling@apple.com>
 
         Reproducible crash removing name attribute from <img> node
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal-expected.txt b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal-expected.txt
new file mode 100644 (file)
index 0000000..9776a67
--- /dev/null
@@ -0,0 +1,6 @@
+PASS successfullyParsed is true
+
+TEST COMPLETE
+PASS div scrolled to next window.
+PASS div honored snap points.
+
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal.html b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-horizontal.html
new file mode 100644 (file)
index 0000000..acdeaab
--- /dev/null
@@ -0,0 +1,123 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <style>
+            .horizontalGallery {
+                width: 600vw;
+                height: 100vh;
+                margin: 0;
+                padding: 0;
+                -webkit-scroll-snap-points-x: repeat(100vw);
+                -webkit-scroll-snap-type: mandatory;
+            }
+            .colorBox {
+                height: 100vh;
+                width: 100vw;
+                float: left;
+            }
+            #item0 { background-color: red; }
+            #item1 { background-color: green; }
+            #item2 { background-color: blue; }
+            #item3 { background-color: aqua; }
+            #item4 { background-color: yellow; }
+            #item5 { background-color: fuchsia; }
+        </style>
+        <script src="../../../../../resources/js-test-pre.js"></script>
+        <script>
+        var divTarget;
+        var divScrollPositionBeforeGlide;
+        var divScrollPositionBeforeSnap;
+
+        function checkForScrollSnap() {
+            // The div should have snapped back to the previous position
+            if (divTarget.scrollLeft != divScrollPositionBeforeSnap)
+                testFailed("div did not snap back to proper location. Expected " + divScrollPositionBeforeSnap + ", but got " + divTarget.scrollLeft);
+            else
+                testPassed("div honored snap points.");
+
+            testRunner.notifyDone();
+        }
+
+        function scrollSnapTest() {
+            // See where our div lives:
+            pageScrollPositionBefore = document.body.scrollLeft;
+
+            divTarget = document.getElementById('target');
+            divScrollPositionBeforeSnap = divTarget.scrollLeft;
+
+            var startPosX = divTarget.offsetLeft + 20;
+            var startPosY = divTarget.offsetTop + 20;
+            eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'began', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
+            eventSender.callAfterScrollingCompletes(checkForScrollSnap);
+        }
+
+        function checkForScrollGlide() {
+            // The div should have scrolled (glided) to the next snap point.
+            if (divTarget.scrollLeft == window.innerWidth)
+                testPassed("div scrolled to next window.");
+            else
+                testFailed("div did not honor snap points. Expected " + window.innerWidth + ", but got " + divTarget.scrollLeft);
+
+            setTimeout(scrollSnapTest, 0);
+        }
+
+        function scrollGlideTest() {
+            divTarget = document.getElementById('target');
+            divScrollPositionBeforeGlide = divTarget.scrollLeft;
+
+            var startPosX = divTarget.offsetLeft + 20;
+            var startPosY = divTarget.offsetTop + 20;
+            eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'began', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'begin', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end', false);
+            eventSender.callAfterScrollingCompletes(checkForScrollGlide);
+        }
+
+        function onLoad() {
+
+            if (window.eventSender) {
+                testRunner.waitUntilDone();
+
+                eventSender.monitorWheelEvents();
+                setTimeout(scrollGlideTest, 0);
+            } else {
+                var messageLocation = document.getElementById('item0');
+                var message = document.createElement('div');
+                message.innerHTML = "<p>This test is better run under DumpRenderTree. To manually test it, place the mouse pointer<br/>"
+                    + "inside the red region at the top of the page, and then use the mouse wheel or a two-finger swipe to make a<br/>"
+                    + "small swipe gesture with some momentum.<br/><br/>"
+                    + "The region should scroll to show a green region.<br/><br/>"
+                    + "Next, perform a small scroll gesture that does not involve momentum. You should begin to see one of the colors<br/>"
+                    + "to the left (or right) of the current green box. When you release the wheel, the region should scroll back so<br/>"
+                    + "that the region is a single color.<br/><br/>"
+                    + "You should also be able to repeat these test steps for the vertical region below.</p>";
+                messageLocation.appendChild(message);
+            }
+        }
+        </script>
+    </head>
+    <body onload="onLoad();" class="horizontalGallery" id="target">
+        <div id="item0" class="colorBox"><div id="console"></div></div>
+        <div id="item1" class="colorBox"></div>
+        <div id="item2" class="colorBox"></div>
+        <div id="item3" class="colorBox"></div>
+        <div id="item4" class="colorBox"></div>
+        <div id="item5" class="colorBox"></div>
+        <script src="../../../../../resources/js-test-post.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal-expected.txt b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal-expected.txt
new file mode 100644 (file)
index 0000000..9776a67
--- /dev/null
@@ -0,0 +1,6 @@
+PASS successfullyParsed is true
+
+TEST COMPLETE
+PASS div scrolled to next window.
+PASS div honored snap points.
+
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-horizontal.html
new file mode 100644 (file)
index 0000000..73df925
--- /dev/null
@@ -0,0 +1,123 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <style>
+            .horizontalGallery {
+                width: 600vw;
+                height: 100vh;
+                margin: 0;
+                padding: 0;
+                -webkit-scroll-snap-points-x: repeat(100vw);
+                -webkit-scroll-snap-type: mandatory;
+            }
+            .colorBox {
+                height: 100vh;
+                width: 100vw;
+                float: left;
+            }
+            #item0 { background-color: red; background-image: url('../../resources/green-blue.png'); background-attachment: fixed;}
+            #item1 { background-color: green; }
+            #item2 { background-color: blue; }
+            #item3 { background-color: aqua; }
+            #item4 { background-color: yellow; }
+            #item5 { background-color: fuchsia; }
+        </style>
+        <script src="../../../../../resources/js-test-pre.js"></script>
+        <script>
+        var divTarget;
+        var divScrollPositionBeforeGlide;
+        var divScrollPositionBeforeSnap;
+
+        function checkForScrollSnap() {
+            // The div should have snapped back to the previous position
+            if (divTarget.scrollLeft != divScrollPositionBeforeSnap)
+                testFailed("div did not snap back to proper location.");
+            else
+                testPassed("div honored snap points.");
+
+            testRunner.notifyDone();
+        }
+
+        function scrollSnapTest() {
+            // See where our div lives:
+            pageScrollPositionBefore = document.body.scrollLeft;
+
+            divTarget = document.getElementById('target');
+            divScrollPositionBeforeSnap = divTarget.scrollLeft;
+
+            var startPosX = divTarget.offsetLeft + 20;
+            var startPosY = divTarget.offsetTop + 20;
+            eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'began', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
+            eventSender.callAfterScrollingCompletes(checkForScrollSnap);
+        }
+
+        function checkForScrollGlide() {
+            // The div should have scrolled (glided) to the next snap point.
+            if (divTarget.scrollLeft == window.innerWidth)
+                testPassed("div scrolled to next window.");
+            else
+                testFailed("div did not honor snap points.");
+
+            setTimeout(scrollSnapTest, 0);
+        }
+
+        function scrollGlideTest() {
+            divTarget = document.getElementById('target');
+            divScrollPositionBeforeGlide = divTarget.scrollLeft;
+
+            var startPosX = divTarget.offsetLeft + 20;
+            var startPosY = divTarget.offsetTop + 20;
+            eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'began', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'begin', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end', false);
+            eventSender.callAfterScrollingCompletes(checkForScrollGlide);
+        }
+
+        function onLoad() {
+
+            if (window.eventSender) {
+                testRunner.waitUntilDone();
+
+                eventSender.monitorWheelEvents();
+                setTimeout(scrollGlideTest, 0);
+            } else {
+                var messageLocation = document.getElementById('item0');
+                var message = document.createElement('div');
+                message.innerHTML = "<p>This test is better run under DumpRenderTree. To manually test it, place the mouse pointer<br/>"
+                    + "inside the red region at the top of the page, and then use the mouse wheel or a two-finger swipe to make a<br/>"
+                    + "small swipe gesture with some momentum.<br/><br/>"
+                    + "The region should scroll to show a green region.<br/><br/>"
+                    + "Next, perform a small scroll gesture that does not involve momentum. You should begin to see one of the colors<br/>"
+                    + "to the left (or right) of the current green box. When you release the wheel, the region should scroll back so<br/>"
+                    + "that the region is a single color.<br/><br/>"
+                    + "You should also be able to repeat these test steps for the vertical region below.</p>";
+                messageLocation.appendChild(message);
+            }
+        }
+        </script>
+    </head>
+    <body onload="onLoad();" class="horizontalGallery" id="target">
+        <div id="item0" class="colorBox"><div id="console"></div></div>
+        <div id="item1" class="colorBox"></div>
+        <div id="item2" class="colorBox"></div>
+        <div id="item3" class="colorBox"></div>
+        <div id="item4" class="colorBox"></div>
+        <div id="item5" class="colorBox"></div>
+        <script src="../../../../../resources/js-test-post.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical-expected.txt b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical-expected.txt
new file mode 100644 (file)
index 0000000..9776a67
--- /dev/null
@@ -0,0 +1,6 @@
+PASS successfullyParsed is true
+
+TEST COMPLETE
+PASS div scrolled to next window.
+PASS div honored snap points.
+
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-slow-vertical.html
new file mode 100644 (file)
index 0000000..1915928
--- /dev/null
@@ -0,0 +1,123 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <style>
+            .verticalGallery {
+                width: 100vw;
+                height: 600vh;
+                margin: 0;
+                padding: 0;
+                -webkit-scroll-snap-points-y: repeat(100vh);
+                -webkit-scroll-snap-type: mandatory;
+            }
+            .colorBox {
+                height: 100vh;
+                width: 100vw;
+                float: left;
+            }
+            #item0 { background-color: red; background-image: url('../../resources/green-blue.png'); background-attachment: fixed;}
+            #item1 { background-color: green; }
+            #item2 { background-color: blue; }
+            #item3 { background-color: aqua; }
+            #item4 { background-color: yellow; }
+            #item5 { background-color: fuchsia; }
+        </style>
+        <script src="../../../../../resources/js-test-pre.js"></script>
+        <script>
+        var divTarget;
+        var divScrollPositionBeforeGlide;
+        var divScrollPositionBeforeSnap;
+
+        function checkForScrollSnap() {
+            // The div should have snapped back to the previous position
+            if (divTarget.scrollTop != divScrollPositionBeforeSnap)
+                testFailed("div did not snap back to proper location.");
+            else
+                testPassed("div honored snap points.");
+
+            testRunner.notifyDone();
+        }
+
+        function scrollSnapTest() {
+            // See where our div lives:
+            pageScrollPositionBefore = document.body.scrollTop;
+
+            divTarget = document.getElementById('target');
+            divScrollPositionBeforeSnap = divTarget.scrollTop;
+
+            var startPosX = divTarget.offsetLeft + 20;
+            var startPosY = divTarget.offsetTop + 20;
+            eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'began', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
+            eventSender.callAfterScrollingCompletes(checkForScrollSnap);
+        }
+
+        function checkForScrollGlide() {
+            // The div should have scrolled (glided) to the next snap point.
+            if (divTarget.scrollTop == window.innerHeight)
+                testPassed("div scrolled to next window.");
+            else
+                testFailed("div did not honor snap points.");
+
+            setTimeout(scrollSnapTest, 0);
+        }
+
+        function scrollGlideTest() {
+            divTarget = document.getElementById('target');
+            divScrollPositionBeforeGlide = divTarget.scrollTop;
+
+            var startPosX = divTarget.offsetLeft + 20;
+            var startPosY = divTarget.offsetTop + 20;
+            eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'began', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'begin', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end', false);
+            eventSender.callAfterScrollingCompletes(checkForScrollGlide);
+        }
+
+        function onLoad() {
+
+            if (window.eventSender) {
+                testRunner.waitUntilDone();
+
+                eventSender.monitorWheelEvents();
+                setTimeout(scrollGlideTest, 0);
+            } else {
+                var messageLocation = document.getElementById('item0');
+                var message = document.createElement('div');
+                message.innerHTML = "<p>This test is better run under DumpRenderTree. To manually test it, place the mouse pointer<br/>"
+                    + "inside the red region at the top of the page, and then use the mouse wheel or a two-finger swipe to make a<br/>"
+                    + "small swipe gesture with some momentum.<br/><br/>"
+                    + "The region should scroll to show a green region.<br/><br/>"
+                    + "Next, perform a small scroll gesture that does not involve momentum. You should begin to see one of the colors<br/>"
+                    + "to the left (or right) of the current green box. When you release the wheel, the region should scroll back so<br/>"
+                    + "that the region is a single color.<br/><br/>"
+                    + "You should also be able to repeat these test steps for the vertical region below.</p>";
+                messageLocation.appendChild(message);
+            }
+        }
+        </script>
+    </head>
+    <body onload="onLoad();" class="verticalGallery" id="target">
+        <div id="item0" class="colorBox"><div id="console"></div></div>
+        <div id="item1" class="colorBox"></div>
+        <div id="item2" class="colorBox"></div>
+        <div id="item3" class="colorBox"></div>
+        <div id="item4" class="colorBox"></div>
+        <div id="item5" class="colorBox"></div>
+        <script src="../../../../../resources/js-test-post.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical-expected.txt b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical-expected.txt
new file mode 100644 (file)
index 0000000..9776a67
--- /dev/null
@@ -0,0 +1,6 @@
+PASS successfullyParsed is true
+
+TEST COMPLETE
+PASS div scrolled to next window.
+PASS div honored snap points.
+
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical.html b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-mainframe-vertical.html
new file mode 100644 (file)
index 0000000..5b7dcbb
--- /dev/null
@@ -0,0 +1,123 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <style>
+            .verticalGallery {
+                width: 100vw;
+                height: 600vh;
+                margin: 0;
+                padding: 0;
+                -webkit-scroll-snap-points-y: repeat(100vh);
+                -webkit-scroll-snap-type: mandatory;
+            }
+            .colorBox {
+                height: 100vh;
+                width: 100vw;
+                float: left;
+            }
+            #item0 { background-color: red; }
+            #item1 { background-color: green; }
+            #item2 { background-color: blue; }
+            #item3 { background-color: aqua; }
+            #item4 { background-color: yellow; }
+            #item5 { background-color: fuchsia; }
+        </style>
+        <script src="../../../../../resources/js-test-pre.js"></script>
+        <script>
+        var divTarget;
+        var divScrollPositionBeforeGlide;
+        var divScrollPositionBeforeSnap;
+
+        function checkForScrollSnap() {
+            // The div should have snapped back to the previous position
+            if (divTarget.scrollTop != divScrollPositionBeforeSnap)
+                testFailed("div did not snap back to proper location.");
+            else
+                testPassed("div honored snap points.");
+
+            testRunner.notifyDone();
+        }
+
+        function scrollSnapTest() {
+            // See where our div lives:
+            pageScrollPositionBefore = document.body.scrollTop;
+
+            divTarget = document.getElementById('target');
+            divScrollPositionBeforeSnap = divTarget.scrollTop;
+
+            var startPosX = divTarget.offsetLeft + 20;
+            var startPosY = divTarget.offsetTop + 20;
+            eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'began', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
+            eventSender.callAfterScrollingCompletes(checkForScrollSnap);
+        }
+
+        function checkForScrollGlide() {
+            // The div should have scrolled (glided) to the next snap point.
+            if (divTarget.scrollTop == window.innerHeight)
+                testPassed("div scrolled to next window.");
+            else
+                testFailed("div did not honor snap points.");
+
+            setTimeout(scrollSnapTest, 0);
+        }
+
+        function scrollGlideTest() {
+            divTarget = document.getElementById('target');
+            divScrollPositionBeforeGlide = divTarget.scrollTop;
+
+            var startPosX = divTarget.offsetLeft + 20;
+            var startPosY = divTarget.offsetTop + 20;
+            eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'began', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'begin', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end', false);
+            eventSender.callAfterScrollingCompletes(checkForScrollGlide);
+        }
+
+        function onLoad() {
+
+            if (window.eventSender) {
+                testRunner.waitUntilDone();
+
+                eventSender.monitorWheelEvents();
+                setTimeout(scrollGlideTest, 0);
+            } else {
+                var messageLocation = document.getElementById('item0');
+                var message = document.createElement('div');
+                message.innerHTML = "<p>This test is better run under DumpRenderTree. To manually test it, place the mouse pointer<br/>"
+                    + "inside the red region at the top of the page, and then use the mouse wheel or a two-finger swipe to make a<br/>"
+                    + "small swipe gesture with some momentum.<br/><br/>"
+                    + "The region should scroll to show a green region.<br/><br/>"
+                    + "Next, perform a small scroll gesture that does not involve momentum. You should begin to see one of the colors<br/>"
+                    + "to the left (or right) of the current green box. When you release the wheel, the region should scroll back so<br/>"
+                    + "that the region is a single color.<br/><br/>"
+                    + "You should also be able to repeat these test steps for the vertical region below.</p>";
+                messageLocation.appendChild(message);
+            }
+        }
+        </script>
+    </head>
+    <body onload="onLoad();" class="verticalGallery" id="target">
+        <div id="item0" class="colorBox"><div id="console"></div></div>
+        <div id="item1" class="colorBox"></div>
+        <div id="item2" class="colorBox"></div>
+        <div id="item3" class="colorBox"></div>
+        <div id="item4" class="colorBox"></div>
+        <div id="item5" class="colorBox"></div>
+        <script src="../../../../../resources/js-test-post.js"></script>
+    </body>
+</html>
\ No newline at end of file