[css-grid] Fix resolution of percentage paddings and margins of grid …

…items We were not resolving properly percentage paddings and margins for tracks that have something like minmax(auto, 100px). The reason was that while computing the minimum size of a grid item, the percentages were resolved against the inline size of the grid container. But for grid items we shouldn't never use the grid container size, but the grid area size, as that's their containing block. The patch modifies ContainingBlockLogicalWidthForContent() and ContainingBlockLogicalHeightForContent() in LayoutBox, so for grid items we return 0 if the area size hasn't been set yet. We never want to use the grid container's sizes in these cases. BUG=808758 TEST=external/wpt/css/css-grid/grid-items/grid-items-percentage-margins-* TEST=external/wpt/css/css-grid/grid-items/grid-items-percentage-paddings-* Change-Id: Ib142e51aee1fe623d38688469b179f01f82eb07b Reviewed-on: https://chromium-review.googlesource.com/980756 Reviewed-by: Javier Fernandez <[email protected]> Commit-Queue: Manuel Rego Casasnovas <[email protected]> Cr-Commit-Position: refs/heads/master@{#547417}
web-platform-tests · Apr 2, 2018 · e4efc10 · e4efc10
1 parent bc209c3
commit e4efc10
Show file tree

Hide file tree

Showing 12 changed files with 1,148 additions and 0 deletions.
diff --git a/css/css-grid/grid-items/grid-items-percentage-margins-001.html b/css/css-grid/grid-items/grid-items-percentage-margins-001.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track).">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  width: 500px;
+  justify-items: start;
+  position: relative;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 100%;
+  height: 10px;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
diff --git a/css/css-grid/grid-items/grid-items-percentage-margins-002.html b/css/css-grid/grid-items/grid-items-percentage-margins-002.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min).">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  width: 500px;
+  justify-items: start;
+  position: relative;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 100%;
+  height: 10px;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
diff --git a/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html b/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins vertical-lr</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track) in a vertical-lr grid container.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
diff --git a/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html b/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins vertical-lr</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-lr grid container.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>