Implement CSSOM Smooth Scroll API

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

+(function() {

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

Please add a comment describing what a scroll behavior test
is and how they work (briefly what a test case needs to provide).

+    var instantTest = async_test('instant scrolls');
+    var smoothTest = async_test('smooth scrolls');
+    var testElement;
+    var testEventTarget;
+    var instantScrolls;
+    var smoothScrolls;
+    var runSingleTestCase;
+    var computeEndX;
+    var computeEndY;
+    var currentSmoothTest = 0;
+    var startX;
+    var startY;
+    var endX;
+    var endY;
+
+    function smoothScrollListener()
+    {
+        if (smoothScrolls[currentSmoothTest].waitForEnd) {

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

This is a bit nitty, but I find the bucket of globals and free functions a
little ugly. It feels like this really wants to be an object. For example, if
smoothScrollListener was part of the test object's prototype, you could bind()
it and attach it and access the test data on |this| in a natural way.

+            if (testElement.scrollLeft == endX && testElement.scrollTop == endY)
+                endSmoothTestCase();
+            return;
+        }
+        // Wait for an intermediate frame.
+        if ((testElement.scrollLeft != startX || testElement.scrollTop != startY) &&
+            (testElement.scrollLeft != endX || testElement.scrollTop != endY)) {
+          testElement.scrollLeft = {x: endX, behavior: "instant"};
+          testElement.scrollTop = {y: endY, behavior: "instant"};
+          endSmoothTestCase();
+        }
+    }
+
+    function runInstantTestCases()
+    {
+        for (var i = 0; i < instantScrolls.length; i++) {
+            startX = testElement.scrollLeft;
+            startY = testElement.scrollTop;
+            endX = computeEndX(instantScrolls[i], startX);
+            endY = computeEndY(instantScrolls[i], startY);
+            testElement.style.scrollBehavior = instantScrolls[i].css;

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

A comment here would be helpful (that explains this function needs to be
implemented by the test case and what it's intended to do).

+            runSingleTestCase(instantScrolls[i]);
+            instantTest.step(function() {
+                assert_equals(testElement.scrollLeft + ", " + testElement.scrollTop, endX + ", " + endY);
+            });
+        }
+        instantTest.done();
+    }
+
+    function startNextSmoothTestCase()
+    {
+        if (currentSmoothTest >= smoothScrolls.length) {
+            smoothTest.done();
+            testEventTarget.removeEventListener("scroll", smoothScrollListener);
+            return;
+        }
+
+        startX = testElement.scrollLeft;
+        startY = testElement.scrollTop;
+        endX = computeEndX(smoothScrolls[currentSmoothTest], startX);
+        endY = computeEndY(smoothScrolls[currentSmoothTest], startY);
+        testElement.style.scrollBehavior = smoothScrolls[currentSmoothTest].css;

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

Ditto.

+        runSingleTestCase(smoothScrolls[currentSmoothTest]);
+        smoothTest.step(function() {
+            assert_equals(testElement.scrollLeft + ", " + testElement.scrollTop, startX + ", " + startY);
+        });
+    }
+
+    function endSmoothTestCase()
+    {
+        currentSmoothTest++;
+        startNextSmoothTestCase();
+    }
+
+    runScrollBehaviorTests = function runScrollBehaviorTests(element,

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

Does this function need to be named?

Please explain what these arguments are (endX and endY in particular -- it's not
obvious at first glance that these are functions that will be used to calculate
the end x and y later. A 'callback' suffix (or something) would really help,
too).

+                                                             eventTarget,
+                                                             instantTestCases,
+                                                             smoothTestCases,
+                                                             runTestCase,
+                                                             endX,
+                                                             endY) {
+        testElement = element;
+        testEventTarget = eventTarget;
+        instantScrolls = instantTestCases;
+        smoothScrolls = smoothTestCases;
+        runSingleTestCase = runTestCase;
+        computeEndX = endX;
+        computeEndY = endY;
+        runInstantTestCases();

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

I'm hoping you go the OO route as I described earlier. If you do, you can attach
the per-test-case listener in startNextSmoothTestCase.

If you don't, please add a comment saying that this is function is responsible
for reporting when smooth scroll tests (which are asynchronous naturally) are
finished so that we can progress to the next test.

+        testEventTarget.addEventListener("scroll", smoothScrollListener);
+        startNextSmoothTestCase();
+    }
+})();