Don't consider collapsed margins for in-flow line bounds if we're not…

… a BFC. So that our client{Width,Height} and scroll{Width,Height} calculations make sense. Differential Revision: https://phabricator.services.mozilla.com/D231629 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1936156 gecko-commit: a661bff10b1fea7e6d828efad298bbdbe2a8574c gecko-reviewers: dshin
web-platform-tests · Dec 12, 2024 · 36d48df · 36d48df
1 parent e60fed9
commit 36d48df
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 3 deletions.
diff --git a/css/cssom-view/scrollWidthHeight-contain-layout.html b/css/cssom-view/scrollWidthHeight-contain-layout.html
@@ -25,7 +25,7 @@
 for (let overflow of ["hidden", "auto", "scroll", "clip"]) {
   for (let padding of ["0", "2px"]) {
     for (let border of ["0", "3px solid"]) {
-      for (let display of ["flex", "block", "inline-block", "inline-flex", "grid", "inline-grid", "inline"]) {
+      for (let display of ["flex", "block", "flow-root", "inline-block", "inline-flex", "grid", "inline-grid", "inline"]) {
         test(function() {
           target.style.display = display;
           target.style.border = border;

diff --git a/css/cssom-view/scrollWidthHeight-negative-margin-002.html b/css/cssom-view/scrollWidthHeight-negative-margin-002.html
@@ -39,7 +39,7 @@
   width: contentBox.width + 4 + 16,
   height: contentBox.height + 1 + 8,
 };
-for (let display of ["block", "flex", "grid"]) {
+for (let display of ["flow-root", "flex", "grid"]) {
   for (let flexDirection of ["row", "row-reverse", "column", "column-reverse"]) {
     if (flexDirection != "row" && display != "flex") {
       // Don't bother retesting with all flexDirection values unless we're actually a flex container

diff --git a/css/cssom-view/scrollWidthHeight-overflow-visible-margin-collapsing.html b/css/cssom-view/scrollWidthHeight-overflow-visible-margin-collapsing.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:[email protected]">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollwidth">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollheight">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1936156">
+<title>scroll{Width,Height} shouldn't account for collapsed margins, in order not to report unnecessary overflow</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #target div {
+    height: 20px;
+    min-width: 20px;
+    background-color: green;
+    margin: 20px 10px;
+  }
+</style>
+<div id="target">
+  <div>
+    <div></div>
+  </div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+<script>
+let target = document.getElementById("target");
+// "clip" is not really scrollable, but should match as well.
+for (let overflow of ["visible", "hidden", "auto", "scroll", "clip"]) {
+  for (let padding of ["0", "2px"]) {
+    for (let border of ["0", "3px solid"]) {
+      for (let display of ["flex", "block", "flow-root", "inline-block", "inline-flex", "grid", "inline-grid"]) {
+        test(function() {
+          target.style.overflow = overflow;
+          target.style.display = display;
+          target.style.border = border;
+          target.style.padding = padding;
+          let sh = target.scrollHeight;
+          let sw = target.scrollWidth;
+          let ch = target.clientHeight;
+          let cw = target.clientWidth;
+          assert_equals(sh, ch, "scrollHeight should match clientHeight, since there's no overflow");
+          assert_equals(sw, cw, "scrollWidth should match clientWidth, since there's no overflow");
+        }, `scroll{Width,Height} with margins should match client{Width,Height} if there would be no overflow width overflow: ${overflow}, padding: ${padding}, border: ${border}, display: ${display}`);
+      }
+    }
+  }
+}
+</script>
diff --git a/css/cssom-view/scrollWidthHeightWhenNotScrollable.xht b/css/cssom-view/scrollWidthHeightWhenNotScrollable.xht
@@ -79,7 +79,7 @@
 
             test(function(){
                 assert_equals(elemOverflow.scrollHeight, 200);
-            }, "elemOverflow.scrollHeight is the height of its scrolled contents (ignoring padding, since we overflowed)");
+            }, "elemOverflow.scrollHeight is the height of its scrolled contents (plus padding, since we overflowed)");
 
             test(function(){
                 assert_equals(elemOverflow.clientWidth, 240);