Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / css-grid-layout / percent-of-indefinite-track-size-in-auto.html
blob13c803289524aa35abc1585031e8366be3050489
1 <!DOCTYPE html>
2 <link href="resources/grid.css" rel="stylesheet">
3 <style>
4 .indefiniteSizeGrid {
5 font: 10px/1 Ahem;
7 .gridWithPercent {
8 grid-auto-columns: 25%;
9 grid-auto-rows: 30%;
11 .gridWithPercentInMinOfMinMax {
12 grid-auto-columns: minmax(20%, max-content);
13 grid-auto-rows: minmax(100%, 15px);
15 .gridWithPercentInMinOfMinMax2 {
16 grid-auto-columns: minmax(20%, 50px);
17 grid-auto-rows: minmax(100%, max-content);
19 .gridWithPercentInMaxOfMinMax {
20 grid-auto-columns: minmax(min-content, 25%);
21 grid-auto-rows: minmax(0px, 1%);
23 .gridWithPercentInMaxOfMinMax2 {
24 grid-auto-columns: minmax(20px, 25%);
25 grid-auto-rows: minmax(min-content, 1%);
27 .gridWithPercentsInMinMax {
28 grid-auto-columns: minmax(25%, 50%);
29 grid-auto-rows: minmax(10%, 90%);
31 </style>
32 <script src="../../resources/check-layout.js"></script>
33 <body onload="checkLayout('.indefiniteSizeGrid');">
34 <p>This test checks that percentages of indefinite sizes are treated as min-content (for the min track sizing function) or max-content (for the max track sizing function).</p>
35 <div style="position: relative;">
36 <div class="indefiniteSizeGrid gridWithPercent" data-expected-width="30" data-expected-height="20">
37 <div class="firstRowFirstColumn">XXX<br>XXX</div>
38 </div>
39 </div>
40 <div style="position: relative;">
41 <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax" data-expected-width="30" data-expected-height="20">
42 <div class="firstRowFirstColumn">XXX</div>
43 <div class="firstRowFirstColumn">XX XX</div>
44 </div>
45 </div>
46 <div style="position: relative;">
47 <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax2" data-expected-width="30" data-expected-height="20">
48 <div class="firstRowFirstColumn">XXX</div>
49 <div class="firstRowFirstColumn">XX XX</div>
50 </div>
51 </div>
52 <div style="position: relative;">
53 <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax" data-expected-width="40" data-expected-height="20">
54 <div class="firstRowFirstColumn">XXXX<br>X</div>
55 </div>
56 </div>
57 <div style="position: relative;">
58 <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax2" data-expected-width="20" data-expected-height="20">
59 <div class="firstRowFirstColumn">XXXX<br>X</div>
60 </div>
61 </div>
62 <div style="position: relative;">
63 <div class="indefiniteSizeGrid gridWithPercentsInMinMax" data-expected-width="40" data-expected-height="40">
64 <div class="firstRowFirstColumn">XXX<br>XX XX<br>XXXX</div>
65 </div>
66 </div>
67 </body>