Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(31)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html

Issue 1323053004: [CSS Grid Layout] Flex tracks sizing alg must handle 0fr values (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Function normalizedFlexFraction moved Created 5 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html ('K') | « LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt ('k') | LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html
diff --git a/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html b/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html
index 981585666e69cb4bd697e67a6dee08db2d96b518..47b280866ecd435c5b813b6b90fe11771d945524 100644
--- a/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html
+++ b/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html
@@ -6,6 +6,10 @@
grid-template-columns: 50px;
grid-template-rows: minmax(1fr, 50px);
}
+.gridZeroFlexContent {
+ grid-template-columns: 50px;
+ grid-template-rows: minmax(1fr, 0px);
+}
.gridMaxFlexContent {
grid-template-columns: 50px;
grid-template-rows: minmax(30px, 2fr);
@@ -18,6 +22,27 @@
grid-template-columns: 50px;
grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
}
+.gridRespectBaseSize {
+ grid-template-columns: 50px;
+ grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr);
+}
+.gridRespectProportions {
+ grid-template-columns: 50px;
+ grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
+}
+.gridRespectBaseSizeProportions {
+ grid-template-columns: 50px;
+ grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
+}
+.gridRespectBaseSizeBeforeProportions {
+ grid-template-columns: 50px;
+ grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
+}
+.thirdRowFirstColumn {
+ background-color: yellow;
+ grid-column: 1;
+ grid-row: 3;
+}
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid');">
@@ -31,6 +56,12 @@
</div>
<div style="height: 0px">
+ <div class="grid gridZeroFlexContent">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
+ </div>
+</div>
+
+<div style="height: 0px">
<div class="grid gridMinFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
</div>
@@ -140,7 +171,7 @@
<div class="constrainedContainer">
<div class="grid gridTwoDoubleMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
- <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
svillar 2015/09/08 13:27:07 Shouldn't it be x4 the one in first row?
jfernandez 2015/09/09 09:23:22 Already replied in the other test.
</div>
</div>
@@ -155,7 +186,7 @@
<div style="width: 10px; height: 60px">
<div class="grid gridTwoDoubleMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
- <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
svillar 2015/09/08 13:27:07 Ditto.
jfernandez 2015/09/09 09:23:22 Same answer.
</div>
</div>
@@ -169,7 +200,73 @@
<div style="width: 10px; height: 120px;">
<div class="grid gridTwoDoubleMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
- <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
svillar 2015/09/08 13:27:07 Ditto.
jfernandez 2015/09/09 09:23:22 Same answer.
+ </div>
+</div>
+
+<!-- Flex track length must be at least its baseSize. -->
+<div style="width: 10px; height: 100px;">
+ <div class="grid gridRespectBaseSize" style="height: 100%;">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+ </div>
+</div>
+
+<div style="width: 10px; height: 100px;">
+ <div class="grid gridRespectBaseSize">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="150"></div>
+ </div>
+</div>
+
+<!-- Flex track lengths must be proportional to their flex factors.. -->
+<div style="width: 10px; height: 275px;">
+ <div class="grid gridRespectProportions" style="height: 100%;">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
+ </div>
+</div>
+
+<div style="width: 10px; height: 275px;">
+ <div class="grid gridRespectProportions">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="13"></div>
+ <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+ </div>
+</div>
+
+<!-- Flex track lengths must be proportional but still respecting their base sizes. -->
+<div style="width: 10px; height: 350px;">
+ <div class="grid gridRespectBaseSizeProportions" style="height: 100%;">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
+ </div>
+</div>
+
+<div style="width: 10px; height: 350px;">
+ <div class="grid gridRespectBaseSizeProportions">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+ <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+ </div>
+</div>
+
+<!-- Not enough space to repsect proportions, because minTrackBreadh it's a harder requirement -->
svillar 2015/09/08 13:27:07 Nit: respect
jfernandez 2015/09/09 09:23:22 Done.
+<div style="width: 10px; height: 275px;">
+ <div class="grid gridRespectBaseSizeBeforeProportions" style="height: 100%;">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
+ <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="150"></div>
+ </div>
+</div>
+
+<div style="width: 10px; height: 275px;">
+ <div class="grid gridRespectBaseSizeBeforeProportions">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+ <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
</div>
</div>
« LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html ('K') | « LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt ('k') | LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698