Merge r228661 - [css-grid] Apply automatic minimum size clamping to s…

…panning items too https://bugs.webkit.org/show_bug.cgi?id=182684 Reviewed by Javier Fernandez. LayoutTests/imported/w3c: Update WPT tests related to this change. * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022-expected.txt: * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html: * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023-expected.txt: * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023.html: * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024-expected.txt: Added. * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024.html: Added. * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025-expected.txt: Added. * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025.html: Added. * web-platform-tests/css/css-grid/grid-items/w3c-import.log: Source/WebCore: In r225776 we added the conditions from the spec to apply the automatic minimum size clamping when required but only to non-spanning items. See: https://drafts.csswg.org/css-grid/#min-size-auto This patch moves the code from GridTrackSizingAlgorithm::sizeTrackToFitNonSpanningItem() to GridTrackSizingAlgorithmStrategy::minSizeForChild() that way the clamping is applied for both spanning and non-spanning items. This somehow reverts r225776, as it was adding some duplicated code. All the checks to know if we should use that part of the spec were already present in GridTrackSizingAlgorithmStrategy::minSizeForChild(). Apart from using the previous code, there's a new loop to verify that the max track sizing function is fixed for all the tracks of the item. Tests: imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024.html imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025.html * rendering/GridTrackSizingAlgorithm.cpp: (WebCore::GridTrackSizingAlgorithm::sizeTrackToFitNonSpanningItem): (WebCore::GridTrackSizingAlgorithmStrategy::minSizeForChild const):
WebKit · Feb 20, 2018 · 4274afd · 4274afd
1 parent 7b82a59
commit 4274afd
Show file tree

Hide file tree

Showing 12 changed files with 1,752 additions and 21 deletions.
diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
@@ -1,3 +1,22 @@
+2018-02-19  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [css-grid] Apply automatic minimum size clamping to spanning items too
+        https://bugs.webkit.org/show_bug.cgi?id=182684
+
+        Reviewed by Javier Fernandez.
+
+        Update WPT tests related to this change.
+
+        * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022-expected.txt:
+        * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html:
+        * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023-expected.txt:
+        * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023.html:
+        * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024-expected.txt: Added.
+        * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024.html: Added.
+        * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025-expected.txt: Added.
+        * web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025.html: Added.
+        * web-platform-tests/css/css-grid/grid-items/w3c-import.log:
+
 2018-02-09  Javier Fernandez  <jfernandez@igalia.com>
 
         [css-align] Implement the new behavior of 'legacy' for justify-items

diff --git a/.../web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022-expected.txt b/.../web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022-expected.txt
@@ -14,6 +14,36 @@ PASS .grid 12
 PASS .grid 13 
 PASS .grid 14 
 PASS .grid 15 
+PASS .grid 16 
+PASS .grid 17 
+PASS .grid 18 
+PASS .grid 19 
+PASS .grid 20 
+PASS .grid 21 
+PASS .grid 22 
+PASS .grid 23 
+PASS .grid 24 
+PASS .grid 25 
+PASS .grid 26 
+PASS .grid 27 
+PASS .grid 28 
+PASS .grid 29 
+PASS .grid 30 
+PASS .grid 31 
+PASS .grid 32 
+PASS .grid 33 
+PASS .grid 34 
+PASS .grid 35 
+PASS .grid 36 
+PASS .grid 37 
+PASS .grid 38 
+PASS .grid 39 
+PASS .grid 40 
+PASS .grid 41 
+PASS .grid 42 
+PASS .grid 43 
+PASS .grid 44 
+PASS .grid 45 
 grid-template-columns: auto;
 XXXXXXXXXX
 grid-template-columns: 0px;
@@ -36,4 +66,52 @@ grid-template-columns: minmax(auto, 0px); item border width: 10px;
 grid-template-columns: minmax(auto, 25px); item border width: 10px;
 grid-template-columns: minmax(auto, 0px); item width + margin + border + padding: 10px;
 grid-template-columns: minmax(auto, 25px); item width + margin + border + padding: 10px;
+grid content writing-mode: vertical-lr;
+
+grid-template-columns: auto;
+XXXXXXXXXX
+grid-template-columns: 0px;
+XXXXXXXXXX
+grid-template-columns: 25px;
+XXXXXXXXXX
+grid-template-columns: minmax(auto, 0px);
+XXXXXXXXXX
+grid-template-columns: minmax(auto, 25px);
+XXXXXXXXXX
+grid-template-columns: minmax(auto, 0px); item height: 10px;
+XXXXXXXXXX
+grid-template-columns: minmax(auto, 25px); item height: 10px;
+XXXXXXXXXX
+grid-template-columns: minmax(auto, 0px); item margin height: 10px;
+grid-template-columns: minmax(auto, 25px); item margin height: 10px;
+grid-template-columns: minmax(auto, 0px); item padding height: 10px;
+grid-template-columns: minmax(auto, 25px); item padding height: 10px;
+grid-template-columns: minmax(auto, 0px); item border height: 10px;
+grid-template-columns: minmax(auto, 25px); item border height: 10px;
+grid-template-columns: minmax(auto, 0px); item height + margin + border + padding: 10px;
+grid-template-columns: minmax(auto, 25px); item height + margin + border + padding: 10px;
+grid content writing-mode: vertical-rl;
+
+grid-template-columns: auto;
+XXXXXXXXXX
+grid-template-columns: 0px;
+XXXXXXXXXX
+grid-template-columns: 25px;
+XXXXXXXXXX
+grid-template-columns: minmax(auto, 0px);
+XXXXXXXXXX
+grid-template-columns: minmax(auto, 25px);
+XXXXXXXXXX
+grid-template-columns: minmax(auto, 0px); item height: 10px;
+XXXXXXXXXX
+grid-template-columns: minmax(auto, 25px); item height: 10px;
+XXXXXXXXXX
+grid-template-columns: minmax(auto, 0px); item margin height: 10px;
+grid-template-columns: minmax(auto, 25px); item margin height: 10px;
+grid-template-columns: minmax(auto, 0px); item padding height: 10px;
+grid-template-columns: minmax(auto, 25px); item padding height: 10px;
+grid-template-columns: minmax(auto, 0px); item border height: 10px;
+grid-template-columns: minmax(auto, 25px); item border height: 10px;
+grid-template-columns: minmax(auto, 0px); item height + margin + border + padding: 10px;
+grid-template-columns: minmax(auto, 25px); item height + margin + border + padding: 10px;
 
diff --git a/...rted/w3c/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html b/...rted/w3c/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html
@@ -135,3 +135,217 @@
   <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
   <div data-expected-width="25"></div>
 </div>
+
+<h3>grid content writing-mode: vertical-lr;</h3>
+
+<pre>grid-template-columns: auto;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: auto;">
+  <div data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-columns: 0px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: 0px;">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: 25px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: 25px;">
+  <div data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px);</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px);</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item margin height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="15" style="margin: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item padding height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25" style="padding: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item border height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25" style="border: solid 5px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<h3>grid content writing-mode: vertical-rl;</h3>
+
+<pre>grid-template-columns: auto;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: auto;">
+  <div data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-columns: 0px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: 0px;">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: 25px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: 25px;">
+  <div data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px);</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px);</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item margin height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="15" style="margin: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item padding height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25" style="padding: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item border height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25" style="border: solid 5px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>