Bug 1655398 - Don't move the client area rect for the root scroll fra…

…me. r=mats The spec really asks us to put the rect at GetUsedBorder().{top,left} in this case, but I don't think that really makes sense, see w3c/csswg-drafts#5363. Differential Revision: https://phabricator.services.mozilla.com/D84959
xeonchen · Jul 27, 2020 · c9fd5f0 · c9fd5f0
1 parent 3aa5ba9
commit c9fd5f0
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/dom/base/Element.cpp b/dom/base/Element.cpp
@@ -860,8 +860,10 @@ nsRect Element::GetClientAreaRect() {
     MOZ_ASSERT(frame);
     nsRect scrollPort = sf->GetScrollPortRect();
     nsIFrame* scrollableAsFrame = do_QueryFrame(sf);
-    if (frame != scrollableAsFrame) {
-      // We want the offset to be relative to `frame`, not `sf`.
+    // We want the offset to be relative to `frame`, not `sf`... Except for the
+    // root scroll frame, which is an ancestor of frame rather than a descendant
+    // and thus this wouldn't particularly make sense.
+    if (frame != scrollableAsFrame && !sf->IsRootScrollFrameOfDocument()) {
       scrollPort.MoveBy(scrollableAsFrame->GetOffsetTo(frame));
     }
     // The scroll port value might be expanded to the minimum scale size, we

diff --git a/testing/web-platform/tests/css/cssom-view/client-props-root.html b/testing/web-platform/tests/css/cssom-view/client-props-root.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>client* on the scrolling element</title>
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1654769">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+  :root {
+    /* Ensure the width of the root element's box is smaller than the viewport. */
+    margin: 5px;
+    /* Remove the scrollbars so that we can test {Width, Height}. */
+    scrollbar-width: none;
+    /* Would love to add a border but https://github.com/w3c/csswg-drafts/issues/5363 */
+  }
+</style>
+<div style="height: 200vh; width: 200vw"></div>
+<script>
+test(function() {
+  scrollTo(100, 100);
+  assert_not_equals(window.scrollY, 0, "Should have scrolled vertically");
+  assert_not_equals(window.scrollX, 0, "Should have scrolled horizontally");
+  assert_equals(document.documentElement.clientTop, 0, "Client top doesn't depend on scrolling");
+  assert_equals(document.documentElement.clientLeft, 0, "Client left doesn't depend on scrolling");
+  assert_equals(document.documentElement.clientWidth, window.innerWidth, "Without scrollbars, client width should match viewport width");
+  assert_equals(document.documentElement.clientHeight, window.innerHeight, "Without scrollbars, client height should match viewport height");
+}, "client* properties on the root element");
+</script>