Part 2 - Incorporate grid items' margins and grid container's paddings when computing grid container's overflow area.
This patch updated the grid container's scrollable overflow areas to
match the spec. This also fixed Bug 1532383 - include space in empty
explicit grid tracks in the scrollable overflow area.
Note: this patch can make overflow areas reported by grid container
overflow off the top or left, but the overflow areas won't be scrollable
because they are clipped once `nsHTMLScrollFrame` calls
`nsLayoutUtils::GetScrolledRect()`.
Differential Revision: https://phabricator.services.mozilla.com/D111995
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1527539
gecko-commit: adc96c7ed2683738cbaa2e54610c7862069da902
gecko-reviewers: dholbert
diff --git a/css/css-grid/alignment/grid-content-alignment-overflow-002.html b/css/css-grid/alignment/grid-content-alignment-overflow-002.html
new file mode 100644
index 0000000..e358c7b
--- /dev/null
+++ b/css/css-grid/alignment/grid-content-alignment-overflow-002.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and overflow alignment.</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1527539">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<meta name="assert" content="Test that the overflow alignment mode is applied correctly for content alignment properties." />
+
+<style>
+body {
+ margin: 0;
+}
+
+.container {
+ position: relative;
+ float: left;
+}
+
+.grid {
+ grid-template-columns: 50px 50px;
+ grid-template-rows: 100px 100px;
+ padding: 30px;
+ box-sizing: border-box;
+ overflow: hidden;
+}
+
+.contentSizedTracks {
+ grid-template: max-content 100px / max-content 50px;
+}
+
+.overflowWidth {
+ width: 60px;
+ height: 300px;
+}
+
+.overflowHeight {
+ width: 200px;
+ height: 150px;
+}
+
+.item1 {
+ width: 50px;
+ height: 150px;
+}
+
+.item2 {
+ width: 150px;
+ height: 100px;
+}
+
+.minSize {
+ min-width: 300px;
+ min-height: 400px;
+}
+
+.maxSize {
+ max-width: 100px;
+ max-height: 100px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+
+<body onload="checkLayout('.grid')">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+ <div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="110" data-expected-scroll-height="300">
+ <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+ <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>default</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+ <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="205">
+ <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
+ <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+ <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="160" data-expected-scroll-height="300">
+ <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+ <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
+ <div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="260">
+ <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+ <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+ <div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="60" data-expected-scroll-height="300">
+ <div class="firstRowFirstColumn" data-offset-x="-70" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="-70" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
+ <div class="firstRowSecondColumn" data-offset-x="-20" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowSecondColumn" data-offset-x="-20" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>default</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+ <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="150">
+ <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="-80" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="70" data-offset-y="20" data-expected-width="50" data-expected-height="100"></div>
+ <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="-80" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="50" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+ <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="160" data-expected-scroll-height="300">
+ <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
+ <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
+ <div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="260">
+ <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="70" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+ <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+ <div class="grid fit-content contentEndUnsafe" data-expected-width="160" data-expected-height="260" data-expected-scroll-width="160" data-expected-scroll-height="260">
+ <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+ <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 200px; margin-right: 25px;">
+ <div class="grid fit-content contentCenterUnsafe" data-expected-width="160" data-expected-height="260" data-expected-scroll-width="160" data-expected-scroll-height="260">
+ <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+ <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 25px;">
+ <div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" data-expected-width="100" data-expected-height="100" data-expected-scroll-width="100" data-expected-scroll-height="100">
+ <div class="item1 firstRowSecondColumn" data-offset-x="20" data-offset-y="-180" data-expected-width="50" data-expected-height="150"></div>
+ <div class="item2 secondRowFirstColumn" data-offset-x="-130" data-offset-y="-30" data-expected-width="150" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 75px;">
+ <div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe" data-expected-width="100" data-expected-height="100" data-expected-scroll-width="180" data-expected-scroll-height="205">
+ <div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-y="-75" data-expected-width="50" data-expected-height="150"></div>
+ <div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-y="75" data-expected-width="150" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+ <div class="grid contentSizedTracks fit-content minSize contentEndUnsafe" data-expected-width="300" data-expected-height="400" data-expected-scroll-width="300" data-expected-scroll-height="400">
+ <div class="item1 firstRowSecondColumn" data-offset-x="220" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
+ <div class="item2 secondRowFirstColumn" data-offset-x="70" data-offset-y="270" data-expected-width="150" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-right: 25px;">
+ <div class="grid contentSizedTracks fit-content minSize contentCenterUnsafe" data-expected-width="300" data-expected-height="400" data-expected-scroll-width="300" data-expected-scroll-height="400">
+ <div class="item1 firstRowSecondColumn" data-offset-x="200" data-offset-y="75" data-expected-width="50" data-expected-height="150"></div>
+ <div class="item2 secondRowFirstColumn" data-offset-x="50" data-offset-y="225" data-expected-width="150" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+</body>
+</html>
diff --git a/css/css-grid/grid-model/grid-areas-overflowing-grid-container-009.html b/css/css-grid/grid-model/grid-areas-overflowing-grid-container-009.html
new file mode 100644
index 0000000..d1ab96e
--- /dev/null
+++ b/css/css-grid/grid-model/grid-areas-overflowing-grid-container-009.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item that has large margins placed inside the boundaries of the grid container, if there are grid areas which exceed the grid container size.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+ .grid {
+ grid: 120px / 120px;
+ width: 100px;
+ height: 100px;
+ overflow: auto;
+ }
+ .item {
+ width: 100px;
+ height: 100px;
+ margin-right: 50px;
+ margin-bottom: 50px;
+ }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"><div class="item"></div></div>
