[GridNG] Small fix to gap resolution, and abspos container.
Previously we'd just use the intrinsic block-size to resolve gaps, and
abs-pos containing rects when we didn't know the block-size upfront.
This was slightly incorrect as there might be a min/max size constraint
growing or shrinking this final size.
This patch moves the call to ComputeBlockSizeForFragment into
PlaceItems. As a result of this there are a few small fixes:
1) When we have an indefinite available-size, we resolve the grid-gap
against zero. (This was surprising to me grid-gutters-{010,011} was
testing this).
2) Abspos "default" size is correctly calculated based on the final
block-size (not intrinsic block-size).
3) Resolving gaps against the "resolved" available block-size (not the
intrinsic block-size). This correctly respects border/padding as
well.
Bug: 1045599
Change-Id: I6be819b8eb254fe9e8eaee4d5a9caaa500a75601
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2624032
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#842748}
diff --git a/css/css-grid/abspos/positioned-grid-items-018.html b/css/css-grid/abspos/positioned-grid-items-018.html
new file mode 100644
index 0000000..0c9d216
--- /dev/null
+++ b/css/css-grid/abspos/positioned-grid-items-018.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; grid-template-columns: 200px; grid-template-rows: 200px; max-width: 100px; max-height: 100px; position: relative;">
+ <div style="background: green; position: absolute; width: 100%; height: 100%;"></div>
+</div>
diff --git a/css/css-grid/alignment/grid-gutters-015-ref.html b/css/css-grid/alignment/grid-gutters-015-ref.html
new file mode 100644
index 0000000..dd4d8da
--- /dev/null
+++ b/css/css-grid/alignment/grid-gutters-015-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.grid {
+ display: grid;
+ padding: 10px;
+ grid-template-columns: 40px 40px;
+ grid-template-rows: 40px 40px;
+ border: solid;
+ width: 80px;
+ height: 80px;
+ gap: 16px;
+}
+.grid > div {
+ background: green;
+}
+</style>
+<div class="grid">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+</div>
diff --git a/css/css-grid/alignment/grid-gutters-015.html b/css/css-grid/alignment/grid-gutters-015.html
new file mode 100644
index 0000000..ed1048f
--- /dev/null
+++ b/css/css-grid/alignment/grid-gutters-015.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps">
+<link rel="match" href="grid-gutters-015-ref.html">
+<style>
+.grid {
+ display: inline-grid;
+ padding: 10px;
+ grid-template-columns: 40px 40px;
+ grid-template-rows: 40px 40px;
+ border: solid;
+ gap: 20%;
+}
+.grid > div {
+ background: green;
+}
+</style>
+<div class="grid">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+</div>
diff --git a/css/css-grid/alignment/grid-gutters-016-ref.html b/css/css-grid/alignment/grid-gutters-016-ref.html
new file mode 100644
index 0000000..a56ab07
--- /dev/null
+++ b/css/css-grid/alignment/grid-gutters-016-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.grid {
+ display: grid;
+ padding: 10px;
+ grid-template-columns: 40px 40px;
+ grid-template-rows: 40px 40px;
+ border: solid;
+ width: 140px;
+ height: 140px;
+ gap: 28px;
+}
+.grid > div {
+ background: green;
+}
+</style>
+<div class="grid">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+</div>
diff --git a/css/css-grid/alignment/grid-gutters-016.html b/css/css-grid/alignment/grid-gutters-016.html
new file mode 100644
index 0000000..163787c
--- /dev/null
+++ b/css/css-grid/alignment/grid-gutters-016.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps">
+<link rel="match" href="grid-gutters-016-ref.html">
+<style>
+.grid {
+ display: inline-grid;
+ padding: 10px;
+ grid-template-columns: 40px 40px;
+ grid-template-rows: 40px 40px;
+ border: solid;
+ gap: 20%;
+ min-width: 140px;
+ min-height: 140px;
+}
+.grid > div {
+ background: green;
+}
+</style>
+<div class="grid">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+</div>
