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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html

Issue 1979603002: [css-grid] Fix behavior of flexible track breadths (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: New version fixing comment Created 4 years, 7 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 unified diff | Download patch
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <link href="resources/grid.css" rel="stylesheet"> 3 <link href="resources/grid.css" rel="stylesheet">
4 <style> 4 <style>
5 .gridMinFlexContent { 5 .gridFlexContent {
6 grid-template-columns: 50px; 6 grid-template-columns: 50px;
7 grid-template-rows: minmax(1fr, 50px); 7 grid-template-rows: 1fr 1fr;
8 }
9 .gridZeroFlexContent {
10 grid-template-columns: 50px;
11 grid-template-rows: minmax(1fr, 0px);
12 } 8 }
13 .gridMaxFlexContent { 9 .gridMaxFlexContent {
14 grid-template-columns: 50px; 10 grid-template-columns: 50px;
15 grid-template-rows: minmax(30px, 2fr); 11 grid-template-rows: minmax(30px, 2fr);
16 } 12 }
17 .gridTwoMaxFlexContent { 13 .gridTwoMaxFlexContent {
18 grid-template-columns: 50px; 14 grid-template-columns: 50px;
19 grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr); 15 grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr);
20 } 16 }
21 .gridTwoDoubleMaxFlexContent { 17 .gridTwoDoubleMaxFlexContent {
(...skipping 20 matching lines...) Expand all
42 background-color: yellow; 38 background-color: yellow;
43 grid-column: 1; 39 grid-column: 1;
44 grid-row: 3; 40 grid-row: 3;
45 } 41 }
46 </style> 42 </style>
47 <script src="../../resources/check-layout.js"></script> 43 <script src="../../resources/check-layout.js"></script>
48 <body onload="checkLayout('.grid');"> 44 <body onload="checkLayout('.grid');">
49 45
50 <p>Test that resolving auto tracks on grid items works properly.</p> 46 <p>Test that resolving auto tracks on grid items works properly.</p>
51 47
52 <div style="height: 0px"> 48
53 <div class="grid gridMinFlexContent" style="height: 100%"> 49 <div class="grid gridFlexContent constrainedContainer" style="position: relative ;">
54 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="0"></div> 50 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offs et-y="0" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div>
55 </div> 51 <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-off set-y="30" data-expected-width="50" data-expected-height="50">X<br>X<br>X<br>X<b r>X</div>
56 </div> 52 </div>
57 53
58 <div style="height: 0px">
59 <div class="grid gridZeroFlexContent">
60 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="0"></div>
61 </div>
62 </div>
63
64 <div style="height: 0px">
65 <div class="grid gridMinFlexContent">
66 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
67 </div>
68 </div>
69
70 <!-- Allow the extra logical space distribution to occur. -->
71 <div style="width: 10px; height: 40px">
72 <div class="grid gridMinFlexContent" style="height: 100%">
73 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="40"></div>
74 </div>
75 </div>
76
77 <div style="width: 10px; height: 40px">
78 <div class="grid gridMinFlexContent">
79 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
80 </div>
81 </div>
82
83 <div style="width: 10px; height: 100px;">
84 <div class="grid gridMinFlexContent">
85 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
86 </div>
87 </div>
88
89
90 <div class="constrainedContainer"> 54 <div class="constrainedContainer">
91 <div class="grid gridMaxFlexContent"> 55 <div class="grid gridMaxFlexContent">
92 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="30"></div> 56 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="30"></div>
93 </div> 57 </div>
94 </div> 58 </div>
95 59
96 <!-- Allow the extra logical space distribution to occur. --> 60 <!-- Allow the extra logical space distribution to occur. -->
97 <div style="width: 10px; height: 40px"> 61 <div style="width: 10px; height: 40px">
98 <div class="grid gridMaxFlexContent" style="height: 100%;"> 62 <div class="grid gridMaxFlexContent" style="height: 100%;">
99 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="40"></div> 63 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="40"></div>
(...skipping 168 matching lines...) Expand 10 before | Expand all | Expand 10 after
268 <div style="width: 10px; height: 275px;"> 232 <div style="width: 10px; height: 275px;">
269 <div class="grid gridRespectBaseSizeBeforeProportions"> 233 <div class="grid gridRespectBaseSizeBeforeProportions">
270 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div> 234 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
271 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="25"></div> 235 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="25"></div>
272 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div> 236 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
273 </div> 237 </div>
274 </div> 238 </div>
275 239
276 </body> 240 </body>
277 </html> 241 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698