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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2398043002: [css-grid] Stretch should grow and shrink items to fit its grid area (Closed)
Patch Set: Created 4 years, 2 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 | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html » ('J')
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 <link href="resources/grid-alignment.css" rel="stylesheet"> 4 <link href="resources/grid-alignment.css" rel="stylesheet">
5 <style> 5 <style>
6 .grid { 6 .grid {
7 grid-template-columns: 5px; 7 grid-template-columns: 5px;
8 grid-template-rows: 5px; 8 grid-template-rows: 5px;
9 } 9 }
10 10
(...skipping 29 matching lines...) Expand all
40 .minHeightSmaller { min-height: 12px; } 40 .minHeightSmaller { min-height: 12px; }
41 .minWidthSmaller { min-width: 12px; } 41 .minWidthSmaller { min-width: 12px; }
42 </style> 42 </style>
43 <script src="../../resources/check-layout.js"></script> 43 <script src="../../resources/check-layout.js"></script>
44 <body onload="checkLayout('.grid')"> 44 <body onload="checkLayout('.grid')">
45 45
46 <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>
47 47
48 <div class="container"> 48 <div class="container">
49 <div class="grid"> 49 <div class="grid">
50 <div class="ahem" data-expected-width="100" data-expected-height="25">XX XX</div> 50 <div class="ahem" data-expected-width="5" data-expected-height="5">XXXX< /div>
51 </div> 51 </div>
52 </div> 52 </div>
53 53
54 <div class="container"> 54 <div class="container">
55 <div class="grid"> 55 <div class="grid">
56 <div class="ahem minSmaller" data-expected-width="10" data-expected-heig ht="10">XXXX</div> 56 <div class="ahem minSmaller" data-expected-width="10" data-expected-heig ht="10">XXXX</div>
57 </div> 57 </div>
58 </div> 58 </div>
59 59
60 <div class="container"> 60 <div class="container">
61 <div class="grid"> 61 <div class="grid">
62 <div class="ahem minBigger" data-expected-width="150" data-expected-heig ht="75">XXXX</div> 62 <div class="ahem minBigger" data-expected-width="150" data-expected-heig ht="75">XXXX</div>
63 </div> 63 </div>
64 </div> 64 </div>
65 65
66 <div class="container"> 66 <div class="container">
67 <div class="grid"> 67 <div class="grid">
68 <div class="ahem maxSmaller" data-expected-width="10" data-expected-heig ht="10">XXXX</div> 68 <div class="ahem maxSmaller" data-expected-width="5" data-expected-heigh t="5">XXXX</div>
69 </div> 69 </div>
70 </div> 70 </div>
71 71
72 <div class="container"> 72 <div class="container">
73 <div class="grid"> 73 <div class="grid">
74 <div class="ahem maxBigger" data-expected-width="100" data-expected-heig ht="25">XXXX</div> 74 <div class="ahem maxBigger" data-expected-width="5" data-expected-height ="5">XXXX</div>
75 </div> 75 </div>
76 </div> 76 </div>
77 77
78 <!-- Verify that the same cases without 'stretch' work as expected as well. --> 78 <!-- Verify that the same cases without 'stretch' work as expected as well. -->
79 <div class="container"> 79 <div class="container">
80 <div class="grid itemsStart"> 80 <div class="grid itemsStart">
81 <div class="ahem" data-expected-width="100" data-expected-height="25">XX XX</div> 81 <div class="ahem" data-expected-width="100" data-expected-height="25">XX XX</div>
82 </div> 82 </div>
83 </div> 83 </div>
84 84
(...skipping 17 matching lines...) Expand all
102 102
103 <div class="container"> 103 <div class="container">
104 <div class="grid itemsStart"> 104 <div class="grid itemsStart">
105 <div class="ahem maxBigger" data-expected-width="100" data-expected-heig ht="25">XXXX</div> 105 <div class="ahem maxBigger" data-expected-width="100" data-expected-heig ht="25">XXXX</div>
106 </div> 106 </div>
107 </div> 107 </div>
108 108
109 <!-- Verify we are applying correctly the min-content size. --> 109 <!-- Verify we are applying correctly the min-content size. -->
110 <div class="container"> 110 <div class="container">
111 <div class="grid"> 111 <div class="grid">
112 <div class="ahem" data-expected-width="75" data-expected-height="50">XXX X</div> 112 <div class="ahem" data-expected-width="5" data-expected-height="5">XXX X </div>
113 </div> 113 </div>
114 </div> 114 </div>
115 115
116 <div class="container"> 116 <div class="container">
117 <div class="grid itemsStart"> 117 <div class="grid itemsStart">
118 <div class="ahem" data-expected-width="75" data-expected-height="50">XXX X</div> 118 <div class="ahem" data-expected-width="75" data-expected-height="50">XXX X</div>
119 </div> 119 </div>
120 </div> 120 </div>
121 121
122 <!-- Check that min-width min-height behavior is preserved when using vertical w riting modes --> 122 <!-- Check that min-width min-height behavior is preserved when using vertical w riting modes -->
123 <div class="container"> 123 <div class="container">
124 <div class="grid verticalLR"> 124 <div class="grid verticalLR">
125 <div class="ahem" data-expected-width="25" data-expected-height="100">XX XX</div> 125 <div class="ahem" data-expected-width="5" data-expected-height="5">XXXX< /div>
126 </div> 126 </div>
127 </div> 127 </div>
128 128
129 <div class="container"> 129 <div class="container">
130 <div class="grid verticalLR"> 130 <div class="grid verticalLR">
131 <div class="ahem minHeightSmaller" data-expected-width="25" data-expecte d-height="12">XXXX</div> 131 <div class="ahem minHeightSmaller" data-expected-width="5" data-expected -height="12">XXXX</div>
132 </div> 132 </div>
133 </div> 133 </div>
134 134
135 <div class="container"> 135 <div class="container">
136 <div class="grid verticalLR"> 136 <div class="grid verticalLR">
137 <div class="ahem minWidthSmaller" data-expected-width="12" data-expected -height="100">XXXX</div> 137 <div class="ahem minWidthSmaller" data-expected-width="12" data-expected -height="5">XXXX</div>
138 </div> 138 </div>
139 </div> 139 </div>
140 140
141 </body> 141 </body>
142 </html> 142 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698