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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/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: Applied last suggested changes. 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
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt ('k') | third_party/WebKit/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: third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html
index 981585666e69cb4bd697e67a6dee08db2d96b518..2a16081d1343a40bf03d517d4804e835158a3321 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html
+++ b/third_party/WebKit/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>
@@ -137,10 +168,11 @@
</div>
</div>
+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
<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>
</div>
</div>
@@ -152,10 +184,11 @@
</div>
</div>
+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
<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>
</div>
</div>
@@ -166,10 +199,77 @@
</div>
</div>
+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
<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>
+ </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 respect proportions, because minTrackBreadh it's a harder requirement -->
+<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>
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt ('k') | third_party/WebKit/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