Bug 1709491 Part 3 - Fix Subgrid::mMarginBorderPadding when the subgrid is a scroll frame. r=dholbert
authorTing-Yu Lin <tlin@mozilla.com>
Wed, 12 May 2021 06:32:41 +0000
changeset 579447 02aeefba2bce0e142979ec9f8aa8c37b55778306
parent 579446 d90d530ebb5d4fd2a494f0a7a79ecbfdbf1cedce
child 579448 751ef83642004be53cb4c5193e4e7379549525c5
push id38456
push usernbeleuzu@mozilla.com
push dateWed, 12 May 2021 09:42:13 +0000
treeherdermozilla-central@02aeefba2bce [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1709491
milestone90.0a1
first release with
nightly linux32
02aeefba2bce / 90.0a1 / 20210512094213 / files
nightly linux64
02aeefba2bce / 90.0a1 / 20210512094213 / files
nightly mac
02aeefba2bce / 90.0a1 / 20210512094213 / files
nightly win32
02aeefba2bce / 90.0a1 / 20210512094213 / files
nightly win64
02aeefba2bce / 90.0a1 / 20210512094213 / files
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
releases
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1709491 Part 3 - Fix Subgrid::mMarginBorderPadding when the subgrid is a scroll frame. r=dholbert When `aGridFrame.mFrame` is a scroll frame, the inner scrolled frame `subgridFrame` only has padding, but no margin nor border. We should add margin and border from the outer scroll frame to `mMarginBorderPadding` so that the grid area of the subgrid is computed correctly. Differential Revision: https://phabricator.services.mozilla.com/D114546
layout/generic/nsGridContainerFrame.cpp
testing/web-platform/tests/css/css-grid/subgrid/subgrid-mbp-overflow-004-ref.html
testing/web-platform/tests/css/css-grid/subgrid/subgrid-mbp-overflow-004.html
--- a/layout/generic/nsGridContainerFrame.cpp
+++ b/layout/generic/nsGridContainerFrame.cpp
@@ -3426,16 +3426,28 @@ static Subgrid* SubgridComputeMarginBord
                                                    : aPercentageBasis.ISize(wm);
   SizeComputationInput sz(subgridFrame, nullptr, cbWM, pmPercentageBasis);
   subgrid->mMarginBorderPadding =
       sz.ComputedLogicalMargin(cbWM) + sz.ComputedLogicalBorderPadding(cbWM);
 
   if (aGridItem.mFrame != subgridFrame) {
     nsIScrollableFrame* scrollFrame = aGridItem.mFrame->GetScrollTargetFrame();
     if (scrollFrame) {
+      MOZ_ASSERT(
+          sz.ComputedLogicalMargin(cbWM) == LogicalMargin(cbWM) &&
+              sz.ComputedLogicalBorder(cbWM) == LogicalMargin(cbWM),
+          "A scrolled inner frame should not have any margin or border!");
+
+      // Add the margin and border from the (outer) scroll frame.
+      SizeComputationInput szScrollFrame(aGridItem.mFrame, nullptr, cbWM,
+                                         pmPercentageBasis);
+      subgrid->mMarginBorderPadding +=
+          szScrollFrame.ComputedLogicalMargin(cbWM) +
+          szScrollFrame.ComputedLogicalBorder(cbWM);
+
       nsMargin ssz = scrollFrame->GetActualScrollbarSizes();
       subgrid->mMarginBorderPadding += LogicalMargin(cbWM, ssz);
     }
 
     if (aGridItem.mFrame->IsFieldSetFrame()) {
       const auto* f = static_cast<nsFieldSetFrame*>(aGridItem.mFrame);
       const auto* inner = f->GetInner();
       auto wm = inner->GetWritingMode();
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-mbp-overflow-004-ref.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <title>CSS Grid Reference: Subgrid with margin/border/padding and 'overflow' property</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .grid {
+    display: block;
+    border: 2px solid #f76707;
+    background-color: #fff4e6;
+    width: 150px;
+    height: 150px;
+  }
+  .subgrid {
+    /* Mock subgrid with grid. */
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-auto-rows: 1fr;
+    box-sizing: border-box;
+    width: 140px;
+    height: 140px;
+    background-color: #ffd8a8;
+    margin: 5px;
+    border: 7px solid #ffa94d;
+    padding: 11px;
+  }
+  .subitem {
+    grid-area: 1 / 1 / span 1 / span 1;
+    background-color: green;
+    width: 30px;
+    height: 30px;
+    border: 5px solid black;
+  }
+  .top { align-self: start; }
+  .bottom { align-self: end; }
+  .left { justify-self: start; }
+  .right { justify-self: end; }
+  </style>
+
+  <p>All the following grid containers should have the same rendering.</p>
+
+  <p>Test 1: Subgrid has overflow:visible</p>
+  <div class="grid">
+    <div class="subgrid">
+      <div class="subitem top left"></div>
+      <div class="subitem top right"></div>
+      <div class="subitem bottom left"></div>
+      <div class="subitem bottom right"></div>
+    </div>
+  </div>
+
+  <p>Test 2: Subgrid has overflow:auto</p>
+  <div class="grid">
+    <div class="subgrid" style="overflow: auto;">
+      <div class="subitem top left"></div>
+      <div class="subitem top right"></div>
+      <div class="subitem bottom left"></div>
+      <div class="subitem bottom right"></div>
+    </div>
+  </div>
+
+  <p>Test 3: Subgrid has overflow:hidden</p>
+  <div class="grid">
+    <div class="subgrid" style="overflow: hidden;">
+      <div class="subitem top left"></div>
+      <div class="subitem top right"></div>
+      <div class="subitem bottom left"></div>
+      <div class="subitem bottom right"></div>
+    </div>
+  </div>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-mbp-overflow-004.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Subgrid with margin/border/padding and 'overflow' property</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrids">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1709491">
+  <link rel="match" href="subgrid-mbp-overflow-004-ref.html">
+
+  <style>
+  .grid {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-auto-rows: 1fr;
+    border: 2px solid #f76707;
+    background-color: #fff4e6;
+    width: 150px;
+    height: 150px;
+  }
+  .subgrid {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+    background-color: #ffd8a8;
+    margin: 5px;
+    border: 7px solid #ffa94d;
+    padding: 11px;
+  }
+  .subitem {
+    background-color: green;
+    width: 30px;
+    height: 30px;
+    border: 5px solid black;
+  }
+  .top { align-self: start; }
+  .bottom { align-self: end; }
+  .left { justify-self: start; }
+  .right { justify-self: end; }
+  </style>
+
+  <p>All the following grid containers should have the same rendering.</p>
+
+  <p>Test 1: Subgrid has overflow:visible</p>
+  <div class="grid">
+    <div class="subgrid">
+      <div class="subitem top left"></div>
+      <div class="subitem top right"></div>
+      <div class="subitem bottom left"></div>
+      <div class="subitem bottom right"></div>
+    </div>
+  </div>
+
+  <p>Test 2: Subgrid has overflow:auto</p>
+  <div class="grid">
+    <div class="subgrid" style="overflow: auto;">
+      <div class="subitem top left"></div>
+      <div class="subitem top right"></div>
+      <div class="subitem bottom left"></div>
+      <div class="subitem bottom right"></div>
+    </div>
+  </div>
+
+  <p>Test 3: Subgrid has overflow:hidden</p>
+  <div class="grid">
+    <div class="subgrid" style="overflow: hidden;">
+      <div class="subitem top left"></div>
+      <div class="subitem top right"></div>
+      <div class="subitem bottom left"></div>
+      <div class="subitem bottom right"></div>
+    </div>
+  </div>
+</html>