Bug 1507988 [wpt PR 14100] - [css-grid] Fix grid container sizing under min-content height, a=testonly
authorManuel Rego Casasnovas <rego@igalia.com>
Sat, 24 Nov 2018 10:29:14 +0000
changeset 504481 6777091c9f3d765300d73ae7e31a1bca861f8035
parent 504480 c5784af6c27e93a3ac02eac5406b43d4fa619580
child 504482 34463bf22296fa3c324cbd969c63d3b765f37050
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1507988, 14100, 906039, 1340311, 610059
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1507988 [wpt PR 14100] - [css-grid] Fix grid container sizing under min-content height, a=testonly Automatic update from web-platform-tests[css-grid] Fix grid container sizing under min-content height The spec is quite clear (https://drafts.csswg.org/css-sizing/#valdef-width-min-content): "min-content If specified for the inline axis, use the min-content inline size; otherwise behaves as the property’s initial value." So if a grid container has "height: min-content" it should behave the same than with "height: auto". The patch removes ComputeIntrinsicLogicalContentHeightUsing() in LayoutGrid as we don't need a custom one anymore. We can also get rid of min_content_height_ and max_content_height_ attributes that were only used for this logic. BUG=906039 TEST=fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html TEST=fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html Change-Id: Ia67d1dac16fbb04e3225115c3f34c67975dc6f94 Reviewed-on: https://chromium-review.googlesource.com/c/1340311 Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#610059} -- wpt-commits: dff98e8b5907a5355d9832901e78e4250011360c wpt-pr: 14100
testing/web-platform/tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: min|max-content sizing constraints on grid containers</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#intrinsic-sizes">
+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#sizing-values">
+<meta name="assert" content="The test checks the intrinsic size of a grid container when sized under different constraints. In inline axis min|max-content have some effect, however in block axis they behave as auto.">
+<style>
+  .grid {
+    display: grid;
+    float: left;
+    background: lime;
+  }
+
+  .grid-columns-minmax-50-100 {
+    grid-template-columns: minmax(50px, 100px);
+  }
+
+  .grid-columns-minmax-100-200 {
+    grid-template-columns: minmax(100px, 200px);
+  }
+
+  .grid-rows-minmax-50-100 {
+    grid-template-rows: minmax(50px, 100px);
+  }
+
+  .min-content {
+    width: min-content;
+    height: min-content;
+  }
+
+  .max-content {
+    width: max-content;
+    height: max-content;
+  }
+</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>
+
+  <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+    data-expected-width="100" data-expected-height="100"></div>
+
+  <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+    data-expected-width="100" data-expected-height="100"></div>
+
+  <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+    data-expected-width="100" data-expected-height="100"></div>
+
+  <div class="min-content">
+    <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+  </div>
+
+  <div class="max-content">
+    <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+  </div>
+
+  <div style="writing-mode: vertical-lr;">
+
+    <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="min-content">
+      <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+        data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="max-content">
+      <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+        data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+  </div>
+
+  <div style="writing-mode: vertical-rl;">
+
+    <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="min-content">
+      <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+        data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="max-content">
+      <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+        data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+  </div>
+
+</body>