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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/min-width-height-auto.html

Issue 1228983003: [CSS Grid Layout] Do not stretch always grid items with auto width (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Applied suggested changes. Created 5 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 unified diff | Download patch
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change-expected.txt ('k') | LayoutTests/fast/css-grid-layout/min-width-height-auto-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 .grid { 5 .grid {
6 grid-template-columns: 5px; 6 grid-template-columns: 5px;
7 grid-template-rows: 5px; 7 grid-template-rows: 5px;
8 } 8 }
9 9
10 .container { 10 .container {
(...skipping 17 matching lines...) Expand all
28 28
29 .maxSmaller { 29 .maxSmaller {
30 max-width: 10px; 30 max-width: 10px;
31 max-height: 10px; 31 max-height: 10px;
32 } 32 }
33 33
34 .maxBigger { 34 .maxBigger {
35 max-width: 150px; 35 max-width: 150px;
36 max-height: 75px; 36 max-height: 75px;
37 } 37 }
38
39 .noStretch {
40 justify-items: start;
41 }
38 </style> 42 </style>
39 <script src="../../resources/check-layout.js"></script> 43 <script src="../../resources/check-layout.js"></script>
40 <body onload="checkLayout('.grid')"> 44 <body onload="checkLayout('.grid')">
41 45
42 <p>This test checks min-width|height auto behavior for grids</p> 46 <p>This test checks min-width|height auto behavior for grids</p>
43 47
44 <div class="container"> 48 <div class="container">
45 <div class="grid"> 49 <div class="grid">
46 <div class="ahem" data-expected-width="100" data-expected-height="25">XX XX</div> 50 <div class="ahem" data-expected-width="100" data-expected-height="25">XX XX</div>
47 </div> 51 </div>
(...skipping 16 matching lines...) Expand all
64 <div class="ahem maxSmaller" data-expected-width="10" data-expected-heig ht="10">XXXX</div> 68 <div class="ahem maxSmaller" data-expected-width="10" data-expected-heig ht="10">XXXX</div>
65 </div> 69 </div>
66 </div> 70 </div>
67 71
68 <div class="container"> 72 <div class="container">
69 <div class="grid"> 73 <div class="grid">
70 <div class="ahem maxBigger" data-expected-width="100" data-expected-heig ht="25">XXXX</div> 74 <div class="ahem maxBigger" data-expected-width="100" data-expected-heig ht="25">XXXX</div>
71 </div> 75 </div>
72 </div> 76 </div>
73 77
78 <!-- Verify that the same cases without 'stretch' work as expected as well. -->
79 <div class="container">
80 <div class="grid noStretch">
81 <div class="ahem" data-expected-width="100" data-expected-height="25">XX XX</div>
82 </div>
83 </div>
84
85 <div class="container">
86 <div class="grid noStretch">
87 <div class="ahem minSmaller" data-expected-width="100" data-expected-hei ght="10">XXXX</div>
88 </div>
89 </div>
90
91 <div class="container">
92 <div class="grid noStretch">
93 <div class="ahem minBigger" data-expected-width="150" data-expected-heig ht="75">XXXX</div>
94 </div>
95 </div>
96
97 <div class="container">
98 <div class="grid noStretch">
99 <div class="ahem maxSmaller" data-expected-width="10" data-expected-heig ht="10">XXXX</div>
100 </div>
101 </div>
102
103 <div class="container">
104 <div class="grid noStretch">
105 <div class="ahem maxBigger" data-expected-width="100" data-expected-heig ht="25">XXXX</div>
106 </div>
107 </div>
108
109 <!-- Verify we are applying correctly the min-content size. -->
110 <div class="container">
111 <div class="grid">
112 <div class="ahem" data-expected-width="75" data-expected-height="50">XXX X</div>
113 </div>
114 </div>
115
116 <div class="container">
117 <div class="grid noStretch">
118 <div class="ahem" data-expected-width="75" data-expected-height="50">XXX X</div>
119 </div>
120 </div>
121
74 </body> 122 </body>
75 </html> 123 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change-expected.txt ('k') | LayoutTests/fast/css-grid-layout/min-width-height-auto-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698