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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html

Issue 2287113004: [css-grid] Implement fit-content track size (Closed)
Patch Set: Created 4 years, 4 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
« third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-rows.html » ('j') | third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html
new file mode 100644
index 0000000000000000000000000000000000000000..9021c37d5b4e5d4c994451769d40c6ff10dbc603
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ justify-content: start;
+ width: 100px;
+ position: relative;
+ padding-top: 10px;
+ margin-bottom: 5px;
+ grid-column-gap: 5px;
+}
+
+.fc0 { grid-template-columns: minmax(auto, 0px);}
Manuel Rego 2016/08/31 07:24:29 The name of the class is not accurate (as it's not
+.fc40 { grid-template-columns: minmax(auto, 40px); }
+.fc80 { grid-template-columns: minmax(auto, 80px); }
+.fc110 { grid-template-columns: auto; }
+
+.fc0x2 { grid-template-columns: repeat(2, minmax(auto, 0px));}
+.fc40x2 { grid-template-columns: repeat(2, minmax(auto, 40px)); }
Manuel Rego 2016/08/31 07:24:29 You're not using this class and maybe other define
+.fc80x2 { grid-template-columns: repeat(2, minmax(auto, 80px)); }
+.fc110x2 { grid-template-columns: auto auto; }
+
+.fc0p { grid-template-columns: minmax(auto, 0%); }
+.fc30p { grid-template-columns: minmax(auto, 30%); }
+.fc90p { grid-template-columns: minmax(auto, 90%); }
+.fc110p { grid-template-columns: auto; }
+
+.fc0px2 { grid-template-columns: repeat(2, minmax(auto, 0%)); }
+.fc30px2 { grid-template-columns: repeat(2, minmax(auto, 30%)); }
+.fc90px2 { grid-template-columns: repeat(2, minmax(auto, 90%)); }
+.fc110px2 { grid-template-columns: auto auto; }
+
+.item {
+ font: 10px/1 Ahem;
+ background: cyan;
+}
+
+.spanningItem {
+ font: 10px/1 Ahem;
+ grid-column: 1 / -1;
+ grid-row: 2;
+ background: salmon;
+}
+
+.test {
+ position: absolute;
+ left: 0; right: 0; top: 0;
+ height: 5px;
+ background: purple;
+}
+.test:nth-child(2n) { background: orange; }
+
+.floatLeft {
+ float: left;
+ width: 190px;
+}
+
+.firstColumn { grid-column: 1 / 2; }
+.secondColumn { grid-column: 2 / 3; }
+.thirdColumn { grid-column: 3 / 4; }
+
+h3 { font-size: 1em; }
+</style>
+
+<p>This test checks that 'fit-content()' works as expected, i.e., it's similar to 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater that the 'auto' minimum).</p>
+
+<div class="floatLeft">
+ <h3>Only fit-content() and with fixed size tracks.</h3>
+ <div class="grid fc0">
Manuel Rego 2016/08/31 07:24:29 I guess "grid-template-columns: auto" could be eno
svillar 2016/08/31 09:50:04 In this case yes, but I'm using exactly the same n
+ <div class="item">XXX</div>
+ <div class="test firstColumn"></div>
+ </div>
+
+ <div class="grid fc0x2">
Manuel Rego 2016/08/31 07:24:29 Same here for "auto auto".
svillar 2016/08/31 09:50:04 Ditto.
+ <div class="item">XXX</div>
+ <div class="spanningItem">XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid fc40">
Manuel Rego 2016/08/31 07:24:28 Maybe here "grid-template-columns: 40px" is more e
svillar 2016/08/31 09:50:04 Ditto.
+ <div class="item">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto auto;">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(auto, 40px) auto;">
Manuel Rego 2016/08/31 07:24:29 Why not "40px auto" instead of "minmax(auto, 40px)
svillar 2016/08/31 09:50:04 Because they are not the same. A 40px track is alw
+ <div class="item">XXX XXX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid fc80">
Manuel Rego 2016/08/31 07:24:28 And here maybe "80px".
svillar 2016/08/31 09:50:04 Ditto about using the exact same class names as in
+ <div class="item">XXX XXX XXX</div>
+ <div class="test firstColumn"></div>
+ </div>
+
+ <div class="grid fc80x2">
Manuel Rego 2016/08/31 07:24:29 This is confusing as you're using "repeat(2, minma
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto minmax(auto, 80px)">
+ <div class="item secondColumn">XXX XXX XXX</div>
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(auto, 20px) 50%;">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(10px, 40px) minmax(auto, 40px);">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto minmax(10%, 200px);">
+ <div class="item secondColumn">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+</div>
+
+<div class="floatLeft">
+ <h3>fit-content() with other content-sized tracks.</h3>
+ <div class="grid" style="grid-template-columns: minmax(auto, 40px) max-content;">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(auto, 40px) max-content;">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(auto, 40px) max-content;">
+ <div class="item secondColumn">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: min-content minmax(auto, 40px);">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: min-content minmax(auto, 40px);">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: min-content minmax(auto, 40px);">
+ <div class="item secondColumn">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(auto, 30px) min-content max-content">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ <div class="test thirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: min-content minmax(auto, 30px) max-content">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ <div class="test thirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: min-content max-content minmax(auto, 30px)">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ <div class="test thirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(auto, 30px) min-content max-content">
+ <div class="item" style="grid-column: 1">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ <div class="test thirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: min-content minmax(auto, 30px) max-content">
+ <div class="item" style="grid-column: 1">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ <div class="test thirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: min-content max-content minmax(auto, 30px)">
+ <div class="item" style="grid-column: 2">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ <div class="test thirdColumn"></div>
+ </div>
+</div>
+
+<div class="floatLeft">
+ <h3>fit-content() with percentage arguments.</h3>
+ <div class="grid fc0p">
+ <div class="item">XXX</div>
+ <div class="test firstColumn"></div>
+ </div>
+
+ <div class="grid fc0px2">
+ <div class="item">XXX</div>
+ <div class="spanningItem">XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid fc30p">
+ <div class="item">XX XX</div>
+ <div class="test firstColumn"></div>
+ </div>
+
+ <div class="grid fc30px2">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid fc30px2">
+ <div class="item secondColumn">X X X</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid fc90p">
+ <div class="item">XXX XXX XXX</div>
+ <div class="test firstColumn"></div>
+ </div>
+
+ <div class="grid fc90px2">
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto minmax(auto, 90%)">
+ <div class="item secondColumn">XXX XXX XXX</div>
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+</div>
+
+<div class="floatLeft">
+ <h3>max-content < fit-content() argument.</h3>
+
+ <div class="grid fc110">
+ <div class="item">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ </div>
+
+ <div class="grid fc110x2">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid fc110x2">
+ <div class="item">XXX XXX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto auto;">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto auto;">
+ <div class="item secondColumn">XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: max-content auto;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto min-content;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: max-content auto max-content;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ <div class="test thirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: min-content auto min-content;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ <div class="test thirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto auto auto;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstColumn"></div>
+ <div class="test secondColumn"></div>
+ <div class="test thirdColumn"></div>
+ </div>
+
+</div>
« third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-rows.html » ('j') | third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698