Add overflow scroll-snap tests
authorbfulgham@apple.com <bfulgham@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 May 2015 20:12:10 +0000 (20:12 +0000)
committerbfulgham@apple.com <bfulgham@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 May 2015 20:12:10 +0000 (20:12 +0000)
https://bugs.webkit.org/show_bug.cgi?id=144591

Reviewed by Simon Fraser.

* platform/mac-wk2/TextExpectations: Mark overflow test as flaky while I investigate.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/resources: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/resources/horizontal-mainframe.html: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/resources/vertical-mainframe.html: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe-expected.txt: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe.html: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow-expected.txt: Added.
* platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/platform/mac-wk2/TestExpectations
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/resources/horizontal-mainframe.html [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/resources/vertical-mainframe.html [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe.html [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow.html [new file with mode: 0644]

index 3b2fe11..a92f009 100644 (file)
@@ -1,3 +1,21 @@
+2015-05-05  Brent Fulgham  <bfulgham@apple.com>
+
+        Add overflow scroll-snap tests
+        https://bugs.webkit.org/show_bug.cgi?id=144591
+
+        Reviewed by Simon Fraser.
+
+        * platform/mac-wk2/TextExpectations: Mark overflow test as flaky while I investigate.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/resources: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/resources/horizontal-mainframe.html: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/resources/vertical-mainframe.html: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe-expected.txt: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe.html: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow-expected.txt: Added.
+        * platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow.html: Added.
+
 2015-05-05  Roger Fong  <roger_fong@apple.com>
 
         Media control volume slider is opaque.
index 23375d1..49219c7 100644 (file)
@@ -523,3 +523,10 @@ webkit.org/b/141085 [ Yosemite ] http/tests/media/video-query-url.html [ Pass Ti
 ########################################
 
 http/tests/contentextensions [ Pass ]
+
+########################################
+### START OF (1) New scroll-snap flake
+platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow.html [ Timeout Pass ]
+
+### END OF (1) scroll-snap flake
+########################################
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/resources/horizontal-mainframe.html b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/resources/horizontal-mainframe.html
new file mode 100644 (file)
index 0000000..db222c2
--- /dev/null
@@ -0,0 +1,34 @@
+<!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>
+    </head>
+    <body class="horizontalGallery">
+        <div id="item0" class="colorBox"></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>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/resources/vertical-mainframe.html b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/resources/vertical-mainframe.html
new file mode 100644 (file)
index 0000000..bb7974f
--- /dev/null
@@ -0,0 +1,34 @@
+<!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>
+    </head>
+    <body class="verticalGallery">
+        <div id="item0" class="colorBox"></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>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up-expected.txt
new file mode 100644 (file)
index 0000000..f12e1c9
--- /dev/null
@@ -0,0 +1,20 @@
+This test passes if it doesn't time out.
+Tests infinite loop calculating scroll snap point offsets.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-type'] is ""
+PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type') is "mandatory"
+PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-points-x'] is ""
+PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x') is "repeat(100%)"
+PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-points-y'] is ""
+PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y') is "repeat(100%)"
+PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-destination'] is ""
+PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination') is "100% 100%"
+PASS lockUpSnapCoordinate.style['-webkit-scroll-snap-coordinate'] is ""
+PASS window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate') is "none"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-destination-lock-up.html
new file mode 100644 (file)
index 0000000..8bded57
--- /dev/null
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            .horizontalGallery {
+                width: 400px;
+                height: 50px;
+                overflow-y: hidden;
+                overflow-x: auto;
+            }
+            .horizontalGalleryDrawer {
+                width: 3000px;
+                height: 50px;
+            }
+            .colorBox {
+                height: 50px;
+                width: 400px;
+                float: left;
+            }
+
+            .lockUpSnapCoordinate {
+                -webkit-scroll-snap-type: mandatory;
+                -webkit-scroll-snap-points-x: repeat(100%);
+                -webkit-scroll-snap-points-y: repeat(100%);
+                -webkit-scroll-snap-destination: 100% 100%;
+                -webkit-scroll-snap-coordinate: initial;
+            }
+
+            #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>
+    </head>
+    <body>
+        <div style="width: 400px">
+            <div id="lockUpSnapCoordinate" class="horizontalGallery lockUpSnapCoordinate">
+                <div class="horizontalGalleryDrawer">
+                    <div id="item0" class="colorBox"></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>
+                </div>
+            </div>
+        </div>
+        This test passes if it doesn't time out.
+        <div id="console"></div>
+        <script>
+        description("Tests infinite loop calculating scroll snap point offsets.");
+
+        var lockUpSnapCoordinate = document.getElementById('lockUpSnapCoordinate');
+        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-type']");
+        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
+        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-points-x']");
+        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
+        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-points-y']");
+        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
+        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-destination']");
+        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination')", "100% 100%");
+        shouldBeEmptyString("lockUpSnapCoordinate.style['-webkit-scroll-snap-coordinate']");
+        shouldBeEqualToString("window.getComputedStyle(lockUpSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
+        </script>
+        <script src="../../../../../resources/js-test-post.js"></script>
+    </body>
+</html>
+
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe-expected.txt b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe-expected.txt
new file mode 100644 (file)
index 0000000..b8898b9
--- /dev/null
@@ -0,0 +1,17 @@
+Tests that the scroll-snap feature works properly in iframes.
+PASS successfullyParsed is true
+
+TEST COMPLETE
+Testing scroll-snap glide for horizontalTarget:
+PASS div scrolled to next window.
+Testing scroll-snap snap for horizontalTarget:
+PASS div honored snap points.
+Testing scroll-snap glide for verticalTarget:
+PASS div scrolled to next window.
+Testing scroll-snap snap for verticalTarget:
+PASS div honored snap points.
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe.html b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe.html
new file mode 100644 (file)
index 0000000..f6c0615
--- /dev/null
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            .horizontalGallery {
+                width: 300px;
+                height: 300px;
+                overflow-y: hidden;
+                overflow-x: auto;
+                margin: 2px;
+            }
+            .verticalGallery {
+                width: 300px;
+                height: 300px;
+                display: inline-block;
+                overflow-x: hidden;
+                overflow-y: auto;
+                margin: 2px;
+            }
+        </style>
+        <script src="../../../../../resources/js-test-pre.js"></script>
+        <script>
+        var iframeScrollPositionBeforeGlide;
+        var divScrollPositionBeforeSnap;
+
+        function locationInWindowCoordinates(element)
+        {
+            var position = {};
+            position.x = element.offsetLeft;
+            position.y = element.offsetTop;
+
+            while (element.offsetParent) {
+                position.x = position.x + element.offsetParent.offsetLeft;
+                position.y = position.y + element.offsetParent.offsetTop;
+                if (element == document.getElementsByTagName("body")[0])
+                    break;
+
+                element = element.offsetParent;
+            }
+
+            return position;
+        }
+
+        function finishTest()
+        {
+            finishJSTest();
+            testRunner.notifyDone();            
+        }
+
+        function checkForScrollSnap(targetLabel)
+        {
+            var iframeTarget = document.getElementById(targetLabel);
+
+            var actualPosition = iframeTarget.scrollTop;
+            if (targetLabel == 'horizontalTarget')
+                actualPosition = iframeTarget.scrollLeft;
+
+            // The div should have snapped back to the previous position
+            if (actualPosition != divScrollPositionBeforeSnap)
+                testFailed("div did not snap back to proper location for " + targetLabel +". Expected " + divScrollPositionBeforeSnap + ", but got " + actualPosition);
+            else
+                testPassed("div honored snap points.");
+
+            if (targetLabel == 'horizontalTarget')
+                setTimeout(scrollGlideTest('verticalTarget'), 0);
+            else   
+                finishTest();
+        }
+
+        function scrollSnapTest(targetLabel)
+        {
+            debug("Testing scroll-snap snap for " + targetLabel + ":");
+            var iframeTarget = document.getElementById(targetLabel);
+            var dx = 0;
+            var dy = 0;
+            if (targetLabel == 'horizontalTarget') {
+                divScrollPositionBeforeSnap = iframeTarget.scrollLeft;
+                dx = -1;
+            } else {
+                divScrollPositionBeforeSnap = iframeTarget.scrollTop;
+                dy = -1;
+            }
+
+            var startPosX = iframeTarget.offsetLeft + 20;
+            var startPosY = iframeTarget.offsetTop + 20;
+            eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
+            eventSender.callAfterScrollingCompletes(function() { return checkForScrollSnap(targetLabel); });
+        }
+
+        function checkForScrollGlide(targetLabel)
+        {
+            var iframeTarget = document.getElementById(targetLabel);
+            var iframeBody = window.frames[targetLabel].document.body;
+
+            var actualPosition = iframeBody.scrollTop;
+            var expectedPosition = iframeTarget.clientHeight;
+            if (targetLabel == 'horizontalTarget') {
+                actualPosition = iframeBody.scrollLeft;
+                expectedPosition = iframeTarget.clientWidth;
+            }
+
+            // The div should have scrolled (glided) to the next snap point.
+            if (actualPosition == expectedPosition)
+                testPassed("div scrolled to next window.");
+            else
+                testFailed("div did not honor snap points. Expected " + expectedPosition + ", but got " + actualPosition);
+
+            setTimeout(scrollSnapTest(targetLabel), 0);
+        }
+
+        function scrollGlideTest(targetLabel)
+        {
+            debug("Testing scroll-snap glide for " + targetLabel + ":");
+            var iframeTarget = document.getElementById(targetLabel);
+            var iframeBody = window.frames[targetLabel].document.body;
+            var dx = 0;
+            var dy = 0;
+            if (targetLabel == 'horizontalTarget') {
+                iframeScrollPositionBeforeGlide = iframeBody.scrollLeft;
+                dx = -1;
+            } else {
+                iframeScrollPositionBeforeGlide = iframeBody.scrollTop;
+                dy = -1;
+            }
+
+            var windowPosition = locationInWindowCoordinates(iframeTarget);
+
+            var startPosX = windowPosition.x + iframeTarget.clientWidth - 10;
+            var startPosY = windowPosition.y + 50;
+            eventSender.mouseMoveTo(startPosX, startPosY);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'begin', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end', false);
+            eventSender.callAfterScrollingCompletes(function() { return checkForScrollGlide(targetLabel); });
+        }
+
+        function onLoad()
+        {
+            if (window.eventSender) {
+                window.jsTestIsAsync = true;
+                testRunner.dumpAsText();
+                testRunner.waitUntilDone();
+
+                eventSender.monitorWheelEvents();
+                setTimeout(scrollGlideTest('horizontalTarget'), 0);
+            }
+        }
+        </script>
+    </head>
+    <body onload="onLoad();">
+        <div style="position: relative; width: 300px;">
+            <div>Tests that the scroll-snap feature works properly in iframes.</div>
+            <iframe id="horizontalTarget" class="horizontalGallery" src="resources/horizontal-mainframe.html" style="height: 300px; width: 300px"></iframe>
+            <iframe id="verticalTarget" class="verticalGallery" src="resources/vertical-mainframe.html"  style="height: 300px; width: 300px"></iframe>
+            <div id="console"></div>
+        </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-overflow-expected.txt b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow-expected.txt
new file mode 100644 (file)
index 0000000..31a0666
--- /dev/null
@@ -0,0 +1,16 @@
+Tests that the scroll-snap feature works properly in overflow regions.
+ PASS successfullyParsed is true
+
+TEST COMPLETE
+Testing scroll-snap glide for horizontalTarget:
+PASS div scrolled to next window.
+Testing scroll-snap snap for horizontalTarget:
+PASS div honored snap points.
+Testing scroll-snap glide for verticalTarget:
+PASS div scrolled to next window.
+Testing scroll-snap snap for verticalTarget:
+PASS div honored snap points.
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow.html b/LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-overflow.html
new file mode 100644 (file)
index 0000000..b02cafb
--- /dev/null
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            .horizontalGallery {
+                width: 300px;
+                height: 300px;
+                overflow-y: hidden;
+                overflow-x: auto;
+                margin-bottom: 2px;
+                -webkit-scroll-snap-points-x: repeat(100%);
+                -webkit-scroll-snap-type: mandatory;
+            }
+            .horizontalGalleryDrawer {
+                width: 1800px;
+                height: 300px;
+            }
+            .verticalGallery {
+                width: 300px;
+                height: 300px;
+                display: inline-block;
+                overflow-x: hidden;
+                overflow-y: auto;
+                margin-top: 2px;
+                -webkit-scroll-snap-points-y: repeat(100%);
+                -webkit-scroll-snap-type: mandatory;
+            }
+            .verticalGalleryDrawer {
+                width: 300px;
+                height: 1800px;
+            }
+            .colorBox {
+                height: 300px;
+                width: 300px;
+                float: left;
+            }
+            #itemH0, #itemV0 { background-color: red; }
+            #itemH1, #itemV1 { background-color: green; }
+            #itemH2, #itemV2 { background-color: blue; }
+            #itemH3, #itemV3 { background-color: aqua; }
+            #itemH4, #itemV4 { background-color: yellow; }
+            #itemH5, #itemV5 { background-color: fuchsia; }
+        </style>
+        <script src="../../../../../resources/js-test-pre.js"></script>
+        <script>
+        var divScrollPositionBeforeGlide;
+        var divScrollPositionBeforeSnap;
+
+        function locationInWindowCoordinates(element)
+        {
+            var position = {};
+            position.x = element.offsetLeft;
+            position.y = element.offsetTop;
+
+            while (element.offsetParent) {
+                position.x = position.x + element.offsetParent.offsetLeft;
+                position.y = position.y + element.offsetParent.offsetTop;
+                if (element == document.getElementsByTagName("body")[0])
+                    break;
+
+                element = element.offsetParent;
+            }
+
+            return position;
+        }
+
+        function finishTest()
+        {
+            finishJSTest();
+            testRunner.notifyDone();            
+        }
+
+        function checkForScrollSnap(targetLabel)
+        {
+            var divTarget = document.getElementById(targetLabel);
+
+            var actualPosition = divTarget.scrollTop;
+            if (targetLabel == 'horizontalTarget')
+                actualPosition = divTarget.scrollLeft;
+
+            // The div should have snapped back to the previous position
+            if (actualPosition != divScrollPositionBeforeSnap)
+                testFailed("div did not snap back to proper location for " + targetLabel +". Expected " + divScrollPositionBeforeSnap + ", but got " + actualPosition);
+            else
+                testPassed("div honored snap points.");
+
+            if (targetLabel == 'horizontalTarget')
+                setTimeout(scrollGlideTest('verticalTarget'), 0);
+            else   
+                finishTest();
+        }
+
+        function scrollSnapTest(targetLabel)
+        {
+            debug("Testing scroll-snap snap for " + targetLabel + ":");
+            var divTarget = document.getElementById(targetLabel);
+            var dx = 0;
+            var dy = 0;
+            if (targetLabel == 'horizontalTarget') {
+                divScrollPositionBeforeSnap = divTarget.scrollLeft;
+                dx = -1;
+            } else {
+                divScrollPositionBeforeSnap = divTarget.scrollTop;
+                dy = -1;
+            }
+
+            var startPosX = divTarget.offsetLeft + 20;
+            var startPosY = divTarget.offsetTop + 20;
+            eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
+            eventSender.callAfterScrollingCompletes(function() { return checkForScrollSnap(targetLabel); });
+        }
+
+        function checkForScrollGlide(targetLabel)
+        {
+            var divTarget = document.getElementById(targetLabel);
+
+            var actualPosition = divTarget.scrollTop;
+            var expectedPosition = divTarget.clientHeight;
+            if (targetLabel == 'horizontalTarget') {
+                actualPosition = divTarget.scrollLeft;
+                expectedPosition = divTarget.clientWidth;
+            }
+
+            // The div should have scrolled (glided) to the next snap point.
+            if (actualPosition == expectedPosition)
+                testPassed("div scrolled to next window.");
+            else
+                testFailed("div did not honor snap points. Expected " + expectedPosition + ", but got " + actualPosition);
+
+            setTimeout(scrollSnapTest(targetLabel), 0);
+        }
+
+        function scrollGlideTest(targetLabel)
+        {
+            debug("Testing scroll-snap glide for " + targetLabel + ":");
+            var divTarget = document.getElementById(targetLabel);
+            var dx = 0;
+            var dy = 0;
+            if (targetLabel == 'horizontalTarget') {
+                divScrollPositionBeforeGlide = divTarget.scrollLeft;
+                dx = -1;
+            } else {
+                divScrollPositionBeforeGlide = divTarget.scrollTop;
+                dy = -1;
+            }
+
+            var windowPosition = locationInWindowCoordinates(divTarget);
+
+            var startPosX = windowPosition.x + divTarget.clientWidth - 10;
+            var startPosY = windowPosition.y + 50;
+            eventSender.mouseMoveTo(startPosX, startPosY);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'begin', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
+            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end', false);
+            eventSender.callAfterScrollingCompletes(function() { return checkForScrollGlide(targetLabel); });
+        }
+
+        function onLoad()
+        {
+            if (window.eventSender) {
+                window.jsTestIsAsync = true;
+                testRunner.dumpAsText();
+                testRunner.waitUntilDone();
+
+                eventSender.monitorWheelEvents();
+                setTimeout(scrollGlideTest('horizontalTarget'), 0);
+            } else {
+                var messageLocationH = document.getElementById('itemH0');
+                var message = document.createElement('div');
+                message.innerHTML = "<p>This test is better run under DumpRenderTree.<br/>To manually test it, place the mouse pointer<br/>"
+                    + "inside the red region at the top of the page,<br/>and then use the mouse wheel or a two-finger<br/>swipe to make a"
+                    + "small swipe gesture with<br/>some momentum.<br/><br/>"
+                    + "The region should scroll to show a green region.<br/><br/>"
+                    + "Next, perform a small scroll gesture that does<br/>not involve momentum. You should begin to<br/>see one of the colors "
+                    + "to the side of the current<br/>green box. When you release the wheel, the<br/>region should scroll back to a single color.";
+                messageLocationH.appendChild(message);
+
+                var messageLocationV = document.getElementById('itemV0');
+                var message = document.createElement('div');
+                message.innerHTML = "<p>You should also be able to repeat these tests steps for this vertical region.<br/>"
+                messageLocationV.appendChild(message);
+            }
+        }
+        </script>
+    </head>
+    <body onload="onLoad();">
+        <div style="position: relative; width: 300px">
+            <div>Tests that the scroll-snap feature works properly in overflow regions.</div>
+            <div class="horizontalGallery" id="horizontalTarget">
+                <div class="horizontalGalleryDrawer">
+                    <div id="itemH0" class="colorBox"></div>
+                    <div id="itemH1" class="colorBox"></div>
+                    <div id="itemH2" class="colorBox"></div>
+                    <div id="itemH3" class="colorBox"></div>
+                    <div id="itemH4" class="colorBox"></div>
+                    <div id="itemH5" class="colorBox"></div>
+                </div>
+            </div>
+            <div class="verticalGallery" id="verticalTarget">
+                <div class="verticalGalleryDrawer">
+                    <div id="itemV0" class="colorBox"></div>
+                    <div id="itemV1" class="colorBox"></div>
+                    <div id="itemV2" class="colorBox"></div>
+                    <div id="itemV3" class="colorBox"></div>
+                    <div id="itemV4" class="colorBox"></div>
+                    <div id="itemV5" class="colorBox"></div>
+                </div>
+            </div>
+            <div id="console"></div>
+        </div>
+        <script src="../../../../../resources/js-test-post.js"></script>
+    </body>
+</html>
\ No newline at end of file