Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-rows.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-rows.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-rows.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..a8813b156be37d9a3c90e72c19dbb1b40e46d4d1 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-rows.html |
@@ -0,0 +1,347 @@ |
+<!DOCTYPE html> |
+<link href="resources/grid.css" rel="stylesheet"> |
+<style> |
+.grid { |
+ justify-content: start; |
+ align-content: start; |
+ height: 100px; |
+ width: 40px; |
+ position: relative; |
+ padding-left: 10px; |
+ margin-right: 5px; |
+ grid-row-gap: 5px; |
+ float: left; |
+} |
+ |
+.fc0 { grid-template-rows: fit-content(0px);} |
+.fc40 { grid-template-rows: fit-content(40px); } |
+.fc80 { grid-template-rows: fit-content(80px); } |
+.fc110 { grid-template-rows: fit-content(110px); } |
+ |
+.fc0x2 { grid-template-rows: repeat(2, fit-content(0px));} |
+.fc40x2 { grid-template-rows: repeat(2, fit-content(40px)); } |
+.fc80x2 { grid-template-rows: repeat(2, fit-content(80px)); } |
+.fc110x2 { grid-template-rows: repeat(2, fit-content(110px)); } |
+ |
+.fc0p { grid-template-rows: fit-content(0%); } |
+.fc30p { grid-template-rows: fit-content(30%); } |
+.fc90p { grid-template-rows: fit-content(90%); } |
+.fc110p { grid-template-rows: fit-content(110%); } |
+ |
+.fc0px2 { grid-template-rows: repeat(2, fit-content(0%)); } |
+.fc30px2 { grid-template-rows: repeat(2, fit-content(30%)); } |
+.fc90px2 { grid-template-rows: repeat(2, fit-content(90%)); } |
+.fc110px2 { grid-template-rows: repeat(2, fit-content(110%)); } |
+ |
+div.grid > div { writing-mode: vertical-lr; } |
+ |
+.item { |
+ font: 10px/1 Ahem; |
+ background: cyan; |
+} |
+ |
+.spanningItem { |
+ font: 10px/1 Ahem; |
+ grid-row: 1 / -1; |
+ grid-column: 2; |
+ background: salmon; |
+} |
+ |
+.test { |
+ position: absolute; |
+ left: 0; bottom: 0; top: 0; |
+ width: 5px; |
+ background: purple; |
+} |
+.test:nth-child(2n) { background: orange; } |
+ |
+.firstRow { grid-row: 1 / 2; } |
+.secondRow { grid-row: 2 / 3; } |
+.thirdRow { grid-row: 3 / 4; } |
+ |
+h3 { font-size: 1em; } |
+.container { float: left; height: 110px;} |
+ |
+</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="grid fc0"> |
+ <div class="item">XXX</div> |
+ <div class="test firstRow"></div> |
+</div> |
+ |
+<div class="grid fc0x2"> |
+ <div class="item">XXX</div> |
+ <div class="spanningItem">XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid fc40"> |
+ <div class="item">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+</div> |
+ |
+<div class="grid fc40x2"> |
+ <div class="spanningItem">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid fc40x2"> |
+ <div class="item">XXX XXX</div> |
+ <div class="spanningItem">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid fc80"> |
+ <div class="item">XXX XXX XXX</div> |
+ <div class="test firstRow"></div> |
+</div> |
+ |
+<div class="grid fc80x2"> |
+ <div class="spanningItem">XXX XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid fc80x2"> |
+ <div class="item secondRow">XXX XXX XXX</div> |
+ <div class="spanningItem">XXX XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: fit-content(20px) 50%;"> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: minmax(10px, 40px) fit-content(40px);"> |
+ <div class="item">XXXXX</div> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: fit-content(40px) minmax(10%, 200px);"> |
+ <div class="item secondRow">XXXXX</div> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+</div> |
+ |
+<br clear ="all"> |
+<br clear ="all"> |
+ |
+<div class="grid" style="grid-template-rows: fit-content(40px) max-content;"> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: fit-content(40px) max-content;"> |
+ <div class="item">XXXXX</div> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: fit-content(40px) max-content;"> |
+ <div class="item secondRow">XXXXX</div> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: min-content fit-content(40px);"> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: min-content fit-content(40px);"> |
+ <div class="item">XXXXX</div> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: min-content fit-content(40px);"> |
+ <div class="item secondRow">XXXXX</div> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: fit-content(30px) min-content max-content"> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+ <div class="test thirdRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: min-content fit-content(30px) max-content"> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+ <div class="test thirdRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: min-content max-content fit-content(30px)"> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+ <div class="test thirdRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: fit-content(30px) min-content max-content"> |
+ <div class="item" style="grid-row: 1">XXX XX</div> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+ <div class="test thirdRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: min-content fit-content(30px) max-content"> |
+ <div class="item" style="grid-row: 1">XXX XX</div> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+ <div class="test thirdRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: min-content max-content fit-content(30px)"> |
+ <div class="item" style="grid-row: 2">XXX XX</div> |
+ <div class="spanningItem">XXX XX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+ <div class="test thirdRow"></div> |
+</div> |
+ |
+<br clear="all"> |
+<br clear="all"> |
+ |
+<div class="grid fc0p"> |
+ <div class="item">XXX</div> |
+ <div class="test firstRow"></div> |
+</div> |
+ |
+<div class="grid fc0px2"> |
+ <div class="item">XXX</div> |
+ <div class="spanningItem">XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid fc30p"> |
+ <div class="item">XX XX</div> |
+ <div class="test firstRow"></div> |
+</div> |
+ |
+<div class="grid fc30px2"> |
+ <div class="spanningItem">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid fc30px2"> |
+ <div class="item secondRow">X X X</div> |
+ <div class="spanningItem">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid fc90p"> |
+ <div class="item">XXX XXX XXX</div> |
+ <div class="test firstRow"></div> |
+</div> |
+ |
+<div class="grid fc90px2"> |
+ <div class="spanningItem">XXX XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid fc90px2"> |
+ <div class="item secondRow">XXX XXX XXX</div> |
+ <div class="spanningItem">XXX XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<br clear="all"> |
+<br clear="all"> |
+ |
+<div class="grid fc110"> |
+ <div class="item">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+</div> |
+ |
+<div class="grid fc110x2"> |
+ <div class="spanningItem">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid fc110x2"> |
+ <div class="item">XXX XXX</div> |
+ <div class="spanningItem">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: fit-content(110px) fit-content(40px);"> |
+ <div class="spanningItem">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: fit-content(110px) fit-content(40px);"> |
+ <div class="item secondRow">XX</div> |
+ <div class="spanningItem">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: max-content fit-content(110px);"> |
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> |
+ <div class="spanningItem">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: fit-content(110px) min-content;"> |
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> |
+ <div class="spanningItem">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: max-content fit-content(110px) max-content;"> |
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> |
+ <div class="spanningItem">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+ <div class="test thirdRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: min-content fit-content(110px) min-content;"> |
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> |
+ <div class="spanningItem">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+ <div class="test thirdRow"></div> |
+</div> |
+ |
+<div class="grid" style="grid-template-rows: auto fit-content(110px) auto;"> |
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> |
+ <div class="spanningItem">XXX XXX</div> |
+ <div class="test firstRow"></div> |
+ <div class="test secondRow"></div> |
+ <div class="test thirdRow"></div> |
+</div> |