Make rootScroller the layout viewport.

third_party/WebKit/LayoutTests/fast/scrolling/set-root-scroller.html

Index: third_party/WebKit/LayoutTests/fast/scrolling/set-root-scroller.html
diff --git a/third_party/WebKit/LayoutTests/fast/scrolling/set-root-scroller.html b/third_party/WebKit/LayoutTests/fast/scrolling/set-root-scroller.html
index ca9cdd4e8a6ceef29d12ef09d334aad0dee2b805..5b2ab42d1df1772a0bb1e6331bc51c088701494d 100644
--- a/third_party/WebKit/LayoutTests/fast/scrolling/set-root-scroller.html
+++ b/third_party/WebKit/LayoutTests/fast/scrolling/set-root-scroller.html
@@ -20,7 +20,13 @@
     overflow: auto;
   }
 
-  #spacer {
+  #parent {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+
+  .spacer {
     width: 2000px;
     height: 2000px;
   }
@@ -35,10 +41,13 @@
   }
 </style>
 
-<div id="container">
-  <div id="spacer">
-    <span id="spanner">TEST</span>
+<div id="parent">
+  <div id="container">
+    <div class="spacer">
+      <span id="spanner">TEST</span>
+    </div>
   </div>
+  <div class="spacer"></div>
 </div>
 <div id="rootspacer"></div>
 
@@ -46,77 +55,112 @@
 <script src="../../resources/testharnessreport.js"></script>
 
 <script>
+  var parentScroller = document.querySelector('#parent');
+  var container = document.querySelector('#container');
+  var spanner = document.querySelector('#spanner');
+
   test(function() {
       assert_false(typeof document.rootScroller === 'undefined');
   }, 'setRootScroller API enabled');
 
-  // TODO(bokan): Break this test up, failing asserts are hard to find.
   test(function() {
-    // Setting the container object should succeed.
-    assert_equals(document.rootScroller, null);
-    var container = document.querySelector('#container');
-    document.rootScroller = container;
-    assert_equals(document.rootScroller, container);
-
-    // Trying to set the <span> should succeed even though it's not a valid
-    // scroller.
-    var spanner = document.querySelector('#spanner');
-    document.rootScroller = spanner;
-    assert_equals(document.rootScroller, spanner);
-
-    // Scroll the container <div> past the end. The scrolls should not chain
-    // past the rootScroller to the scrollingElement.
-    document.rootScroller = container;
-    if (typeof eventSender !== 'undefined') {
-        eventSender.gestureScrollBegin(500, 500);
-        eventSender.gestureScrollUpdate(-300, -300);
-        eventSender.gestureScrollEnd(0, 0);
-        eventSender.gestureScrollBegin(500, 500);
-        eventSender.gestureScrollUpdate(-300, -300);
-        eventSender.gestureScrollEnd(0, 0);
-        eventSender.gestureScrollBegin(500, 500);
-        eventSender.gestureScrollUpdate(-300, -300);
-        eventSender.gestureScrollEnd(0, 0);
-        eventSender.gestureScrollBegin(500, 500);
-        eventSender.gestureScrollUpdate(-300, -300);
-        eventSender.gestureScrollUpdate(-300, -300);
-        eventSender.gestureScrollUpdate(-300, -300);
-        eventSender.gestureScrollEnd(0, 0);
-
-        assert_equals(container.scrollTop, 2000 - 600);
-        assert_equals(container.scrollLeft, 2000 - 800);
-        assert_equals(document.scrollingElement.scrollTop, 0);
-        assert_equals(document.scrollingElement.scrollLeft, 0);
-    }
-
-    // Making the current rootScroller an invalid scroller should fallback to
-    // the default element, the documentElement, but the rootScroller property
-    // should remain the same.
-    container.style.width = "95%";
-    assert_equals(document.rootScroller, container);
-
-    // Now scrolling over the <div> should scroll the scrollingElement since the
-    // rootElement is invalid (doesn't fill the viewport).
-    if (typeof eventSender !== 'undefined') {
-        eventSender.gestureScrollBegin(500, 500);
-        eventSender.gestureScrollUpdate(-300, -300);
-        eventSender.gestureScrollEnd(0, 0);
-        eventSender.gestureScrollBegin(500, 500);
-        eventSender.gestureScrollUpdate(-300, -300);
-        eventSender.gestureScrollEnd(0, 0);
-        eventSender.gestureScrollBegin(500, 500);
-        eventSender.gestureScrollUpdate(-300, -300);
-        eventSender.gestureScrollEnd(0, 0);
-        eventSender.gestureScrollBegin(500, 500);
-        eventSender.gestureScrollUpdate(-300, -300);
-        eventSender.gestureScrollEnd(0, 0);
-
-        assert_equals(document.scrollingElement.scrollTop, 400);
-        assert_equals(document.scrollingElement.scrollLeft, 200);
-    }
-
-    // Don't output the text in spanner.
-    document.querySelector('#spanner').style.display = 'none';
-
-  }, 'Test the setRootScroller API basic functionality');
+      // Setting the container object should succeed.
+      assert_equals(document.rootScroller, null);
+      document.rootScroller = container;
+      assert_equals(document.rootScroller, container);
+      document.rootScroller = null;
+      assert_equals(document.rootScroller, null);
+  }, 'Setter and getter on a valid element works');
+
+  test(function() {
+      // Trying to set the <span> should succeed even though it's not a valid
+      // scroller.
+      document.rootScroller = spanner;
+      assert_equals(document.rootScroller, spanner);
+  }, 'Can set a non-scrolling element as the rootScroller');
+
+  test(function() {
+      // Scroll the container <div> past the end. The scrolls should not chain
+      // past the rootScroller to the parentScroller element.
+      document.rootScroller = container;
+      if (typeof eventSender !== 'undefined') {
+          eventSender.gestureScrollBegin(500, 500);
+          eventSender.gestureScrollUpdate(-300, -300);
+          eventSender.gestureScrollEnd(0, 0);
+          eventSender.gestureScrollBegin(500, 500);
+          eventSender.gestureScrollUpdate(-300, -300);
+          eventSender.gestureScrollEnd(0, 0);
+          eventSender.gestureScrollBegin(500, 500);
+          eventSender.gestureScrollUpdate(-300, -300);
+          eventSender.gestureScrollEnd(0, 0);
+          eventSender.gestureScrollBegin(500, 500);
+          eventSender.gestureScrollUpdate(-300, -300);
+          eventSender.gestureScrollUpdate(-300, -300);
+
+          assert_equals(container.scrollTop, 2000 - 600);
+          assert_equals(container.scrollLeft, 2000 - 800);
+
+          // The container is now fully scrolled. Normally, further scroll
+          // events would chain up to the parent element but, because the
+          // container is the root scroller, we shouldn't chain up past it.
+          eventSender.gestureScrollUpdate(-300, -300);
+          eventSender.gestureScrollEnd(0, 0);
+          eventSender.gestureScrollBegin(500, 500);
+          eventSender.gestureScrollUpdate(-300, -300);
+          eventSender.gestureScrollEnd(0, 0);
+
+          assert_equals(container.scrollTop, 2000 - 600);
+          assert_equals(container.scrollLeft, 2000 - 800);
+          assert_equals(parentScroller.scrollTop, 0);
+          assert_equals(parentScroller.scrollLeft, 0);
+      }
+  }, "Scrolls don't chain past root scroller element");
+
+  test(function() {
+      document.rootScroller = container;
+      container.scrollTop = 999;
+      container.scrollLeft = 998;
+
+      // Window.scrollX and scrollY should reflect the scroll offset of the
+      // rootScroller
+      assert_equals(container.scrollTop, 999);
+      assert_equals(container.scrollLeft, 998);
+      assert_equals(window.scrollY, container.scrollTop);
+      assert_equals(window.scrollX, container.scrollLeft);
+      assert_equals(document.scrollingElement.scrollTop, container.scrollTop);
+      assert_equals(document.scrollingElement.scrollLeft, container.scrollLeft);
+
+  }, "document.scrollingElement and window scroll API reflect rootScroller offsets");
+
+  test(function() {
+      // Making the current rootScroller an invalid scroller (by making it not
+      // fill the viewport) should fallback to the default element, the
+      // documentElement, but the rootScroller property should remain the same.

[tdresser, 2016/07/07 16:37:33]

Woah, that's kinda weird. Why did we decide to keep the rootScroller property
the same?

[bokan, 2016/07/07 16:45:47]

This was actually some feedback I got from Elliott:

"...it means if you display: none the root scroller, force a layout, and then
display: block it again the scroller is reset. I don't think this feature should
work that way."

I think it makes sense. We don't want transient changes to reset the
rootScroller. Specifically since you'll want to do things like animate in the
root scroller, this makes that kind of case much simpler. Instead, we always try
to use element set as the rootScroller but if it's invalid we (silently)
fallback to the default. We'll see if we need some kind of feedback to the
developer since I'm a little worried about the silent part, but I'm also weary
of warning spam. 

[tdresser, 2016/07/07 16:51:59]

Maybe you should provide developer feedback if they try to programmatically
scroll when there is an invalid root scroller?

I think it would be easy to accidentally have your scroll not be applied
correctly.

+      document.rootScroller = container;
+      container.style.width = "95%";
+      assert_equals(document.rootScroller, container);
+
+      // Reset #parent's scrolling, make container fully scrolled.

[tdresser, 2016/07/07 16:37:33]

I'd prefer to refer to the variable name, instead of the id.

[bokan, 2016/07/07 16:45:47]

Done.

+      parentScroller.scrollTop = 0;
+      parentScroller.scrollLeft = 0;
+      container.scrollTop = 10000;
+      container.scrollLeft = 10000;
+
+      // Now scrolling over the #container should scroll the scrollingElement
+      // since the rootElement is invalid (doesn't fill the viewport).
+      if (typeof eventSender !== 'undefined') {
+          eventSender.gestureScrollBegin(500, 500);
+          eventSender.gestureScrollUpdate(-300, -300);
+          eventSender.gestureScrollEnd(0, 0);
+          eventSender.gestureScrollBegin(500, 500);
+          eventSender.gestureScrollUpdate(-300, -300);
+          eventSender.gestureScrollEnd(0, 0);
+          eventSender.gestureScrollBegin(500, 500);
+          eventSender.gestureScrollUpdate(-300, -300);
+          eventSender.gestureScrollEnd(0, 0);
+
+          assert_equals(parentScroller.scrollTop, 900);
+          assert_equals(parentScroller.scrollLeft, 900);
+      }
+    }, "Setting an invalid rootScroller should reset to using the documentElement.");
 </script>