Implement CSSOM Smooth Scroll API

LayoutTests/fast/scroll-behavior/resources/scroll-interruption-test.js

+(function() {
+    var instantTest = async_test('interrupt with instant scroll');
+    var smoothTest = async_test('interrupt with smooth scroll');
+    var touchTest = async_test('interrupt with touch scroll');
+    var wheelTest = async_test('interrupt with mouse wheel');
+    var testElement;
+    var testCase;
+    var testInnerPoint;
+    var previousScrollTop;
+    var previousTimestamp;
+
+
+    function verifyScrollOffsetUnchangedAfterInstantScroll()
+    {
+        instantTest.step(function() {
+            assert_equals(testElement.scrollTop, testCase.y3);

[Ian Vollick, 2014/02/06 16:02:31]

I don't like the assumptions about the contents of testCase. The implicit
dependency a bit brittle and undocumented. Please define a test case class here,
expose it to the global scope, and have the layout tests instantiate instances
explicitly. Comments describing the fields in the case would be very helpful. y1
y2 and y3 are a bit terse.

Same for the scroll behavior test case.

+        });
+        instantTest.done();
+        window.requestAnimationFrame(startSmoothTest);
+    }
+
+    function verifyProgressTowardsNewDestination()
+    {
+        var previousDelta = testCase.y3 - previousScrollTop;
+        var currentDelta = testCase.y3 - testElement.scrollTop;
+        if (Math.abs(currentDelta) < Math.abs(previousDelta)) {
+            smoothTest.done();
+            window.requestAnimationFrame(startTouchTest);
+            return;
+        }
+        previousScrollTop = testElement.scrollTop;
+        window.requestAnimationFrame(verifyProgressTowardsNewDestination);
+    }
+
+    function verifyScrollOffsetStopsChangingAfterTouchScroll(timestamp)
+    {
+        if (previousScrollTop == testElement.scrollTop) {
+            // Ensure that the animation has really stopped, not that we just have
+            // two frames that are so close together that the animation only seems to
+            // have stopped.
+            if (timestamp - previousTimestamp > 16) {
+                touchTest.done();
+                window.requestAnimationFrame(startWheelTest);
+            } else {
+                window.requestAnimationFrame(verifyScrollOffsetStopsChangingAfterTouchScroll);
+            }
+            return;
+        }
+
+        previousTimestamp = timestamp;
+        previousScrollTop = testElement.scrollTop;
+        touchTest.step(function() {
+            assert_not_equals(previousScrollTop, testCase.y2);
+        });
+        window.requestAnimationFrame(verifyScrollOffsetStopsChangingAfterTouchScroll);
+    }
+
+    function verifyScrollOffsetStopsChangingAfterWheelScroll(timestamp)
+    {
+        if (previousScrollTop == testElement.scrollTop) {
+            // Ensure that the animation has really stopped, not that we just have
+            // two frames that are so close together that the animation only seems to
+            // have stopped.
+            if (timestamp - previousTimestamp > 16) {
+                wheelTest.done();
+            } else {
+                window.requestAnimationFrame(verifyScrollOffsetStopsChangingAfterWheelScroll);
+            }
+            return;
+        }
+
+        previousTimestamp = timestamp;
+        previousScrollTop = testElement.scrollTop;
+        wheelTest.step(function() {
+            assert_not_equals(previousScrollTop, testCase.y2);
+        });
+        window.requestAnimationFrame(verifyScrollOffsetStopsChangingAfterWheelScroll);
+    }
+
+    function interruptWithInstantScroll()
+    {
+        if (testElement.scrollTop == testCase.y1) {
+            window.requestAnimationFrame(interruptWithInstantScroll);
+            return;
+        }
+
+        instantlyScrollTo(testCase.y3);
+        instantTest.step(function() {
+            assert_equals(testElement.scrollTop, testCase.y3);
+        });
+        window.requestAnimationFrame(verifyScrollOffsetUnchangedAfterInstantScroll);
+    }
+
+    function interruptWithSmoothScroll()
+    {
+        if (testElement.scrollTop == testCase.y1) {
+            window.requestAnimationFrame(interruptWithSmoothScroll);
+            return;
+        }
+
+        previousScrollTop = testElement.scrollTop;
+        smoothlyScrollTo(testCase.y3);
+        smoothTest.step(function() {
+            assert_equals(testElement.scrollTop, previousScrollTop);
+        });
+        window.requestAnimationFrame(verifyProgressTowardsNewDestination);
+    }
+
+    function interruptWithTouchScroll(timestamp)
+    {
+        if (testElement.scrollTop == testCase.y1) {
+            window.requestAnimationFrame(interruptWithTouchScroll);
+            return;
+        }
+
+        previousScrollTop = testElement.scrollTop;
+        previousTimestamp = timestamp;
+        if (window.eventSender) {
+            eventSender.gestureScrollBegin(testInnerPoint.x, testInnerPoint.y);
+            eventSender.gestureScrollUpdate(0, -10);
+            eventSender.gestureScrollEnd(0, 0);
+        } else {
+            document.write("This test does not work in manual mode.");
+        }
+
+        window.requestAnimationFrame(verifyScrollOffsetStopsChangingAfterTouchScroll);
+    }
+
+    function interruptWithWheelScroll(timestamp)
+    {
+        if (testElement.scrollTop == testCase.y1) {
+            window.requestAnimationFrame(interruptWithWheelScroll);
+            return;
+        }
+
+        previousScrollTop = testElement.scrollTop;
+        previousTimestamp = timestamp;
+        if (window.eventSender) {
+            eventSender.mouseMoveTo(testInnerPoint.x, testInnerPoint.y);
+            eventSender.mouseScrollBy(0, -10);
+        } else {
+            document.write("This test does not work in manual mode.");
+        }
+
+        window.requestAnimationFrame(verifyScrollOffsetStopsChangingAfterWheelScroll);
+    }
+
+    function smoothlyScrollTo(y)
+    {
+        testElement.style.scrollBehavior = "smooth";
+        testElement.scrollTop = y;
+    }
+
+    function instantlyScrollTo(y)
+    {
+        testElement.style.scrollBehavior = "instant";
+        testElement.scrollTop = y;
+    }
+
+    function startInstantTest()
+    {
+        instantlyScrollTo(testCase.y1);
+        smoothlyScrollTo(testCase.y2);
+        window.requestAnimationFrame(interruptWithInstantScroll);
+    }
+
+    function startSmoothTest()
+    {
+        instantlyScrollTo(testCase.y1);
+        smoothlyScrollTo(testCase.y2);
+        window.requestAnimationFrame(interruptWithSmoothScroll);
+    }
+
+    function startTouchTest()
+    {
+        instantlyScrollTo(testCase.y1);
+        smoothlyScrollTo(testCase.y2);
+        window.requestAnimationFrame(interruptWithTouchScroll);
+    }
+
+    function startWheelTest()
+    {
+        instantlyScrollTo(testCase.y1);
+        smoothlyScrollTo(testCase.y2);
+        window.requestAnimationFrame(interruptWithWheelScroll);
+    }
+
+    runScrollInterruptionTests = function runScrollInterruptionTests(element,

[Ian Vollick, 2014/02/06 16:02:31]

Does this function need to be named?

+                                                                     scrolls,
+                                                                     innerPoint) {
+        testElement = element;
+        testCase = scrolls;
+        testInnerPoint = innerPoint;

[Ian Vollick, 2014/02/06 16:02:31]

It's a bit funky that startInstantTest does more than just starting an instant
test, it sets up a cascade of tests starting with the instant test.

Perhaps you could go the OO route again here. The object would be responsible
for managing the invokation of the sub tests. So rather than having
startInstantTest directly start the next type of test, it could call the objects
iAmDoneMySubTest member function which would get the next one started.

It would have been much easier for me to understand if you'd done something like
this.
var runner = new InterruptionTestsRunner(element, scrolls, innerPoint);
runner.start();

+        startInstantTest();
+    }
+})();