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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1488493003: [css-grid] refactoring of layout tests (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years 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
« third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/justify-self-cell.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.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="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
4 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">
3 <link href="resources/grid.css" rel="stylesheet"> 5 <link href="resources/grid.css" rel="stylesheet">
4 <style> 6 <style>
5 .columnsSmallerThanContentBox { grid-template-columns: 80px; } 7 .columnsSmallerThanContentBox { grid-template-columns: 80px; }
6 .columnsSameAsContentBox { grid-template-columns: 100px; } 8 .columnsSameAsContentBox { grid-template-columns: 100px; }
7 .columnsBiggerThanContentBox { grid-template-columns: 120px; } 9 .columnsBiggerThanContentBox { grid-template-columns: 120px; }
8 .columnsSameAsMarginBox { grid-template-columns: 140px; } 10 .columnsSameAsMarginBox { grid-template-columns: 140px; }
9 .columnsBiggerThanMarginBox { grid-template-columns: 150px; } 11 .columnsBiggerThanMarginBox { grid-template-columns: 150px; }
10 12
11 .rowsSmallerThanContentBox { grid-template-rows: 20px; } 13 .rowsSmallerThanContentBox { grid-template-rows: 20px; }
12 .rowsEqualAsContentBox { grid-template-rows: 25px; } 14 .rowsEqualAsContentBox { grid-template-rows: 25px; }
13 .rowsBiggerThanContentBox { grid-template-rows: 50px; } 15 .rowsBiggerThanContentBox { grid-template-rows: 50px; }
14 .rowsSameAsMarginBox { grid-template-rows: 65px; } 16 .rowsSameAsMarginBox { grid-template-rows: 65px; }
15 .rowsBiggerThanMarginBox { grid-template-rows: 100px; } 17 .rowsBiggerThanMarginBox { grid-template-rows: 100px; }
16 18
17 .container { 19 .container {
18 position: relative; 20 position: relative;
19 width: 200px; 21 width: 200px;
20 height: 100px; 22 height: 100px;
21 border: 1px solid black; 23 border: 1px solid black;
22 } 24 }
23 25
24 .item { 26 .item {
25 font: 25px/1 Ahem; 27 font: 25px/1 Ahem;
26 margin: 20px; 28 margin: 20px;
27 background-color: blue; 29 background-color: blue;
28 } 30 }
29 31
30 .fitContentHeight { align-items: start; } 32 .fitContentOnlyHeight { width: auto; align-items: start; }
31 .fitContentWidth { justify-items: start; } 33 .fitContentOnlyWidth { height: auto; justify-items: start; }
32 34
33 </style> 35 </style>
34 <script src="../../resources/check-layout.js"></script> 36 <script src="../../resources/check-layout.js"></script>
35 <body onload="checkLayout('.grid')"> 37 <body onload="checkLayout('.grid')">
36 38
37 <p>This test checks min-width|height auto does not interfere in margins computat ion, properly placing items inside their grid area.</p> 39 <p>This test checks min-width|height auto does not interfere in margins computat ion, properly placing items inside their grid area.</p>
38 40
39 <!-- Checking min-width: auto logic --> 41 <!-- Checking min-width: auto logic -->
40 <p>Stretching allowed in both axis | column smaller than content-box, row bigger than margin-box</p> 42 <p>Stretching allowed in both axis | column smaller than content-box, row bigger than margin-box</p>
41 <div class="container"> 43 <div class="container">
(...skipping 26 matching lines...) Expand all
68 <p>Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box</p> 70 <p>Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box</p>
69 <div class="container"> 71 <div class="container">
70 <div class="grid columnsBiggerThanMarginBox rowsBiggerThanMarginBox"> 72 <div class="grid columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
71 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="60">XXXX</div> 73 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="60">XXXX</div>
72 </div> 74 </div>
73 </div> 75 </div>
74 76
75 <!-- Checking shrink-to-fit in row-axis --> 77 <!-- Checking shrink-to-fit in row-axis -->
76 <p>Stretching allowed in column axis, fitContent in row-axis | column smaller th an content-box, row bigger than margin-box</p> 78 <p>Stretching allowed in column axis, fitContent in row-axis | column smaller th an content-box, row bigger than margin-box</p>
77 <div class="container"> 79 <div class="container">
78 <div class="grid fitContentWidth columnsSmallerThanContentBox rowsBiggerThan MarginBox"> 80 <div class="grid fit-content fitContentOnlyWidth columnsSmallerThanContentBo x rowsBiggerThanMarginBox">
Manuel Rego 2015/12/02 09:31:02 This was not using "-webkit-fit-content" before, w
jfernandez 2015/12/03 15:06:11 Yes, it was actually. The fitContentWidth class wa
Manuel Rego 2015/12/04 13:12:43 Sorry but I don't see it. It was only: .fitContent
svillar 2015/12/04 13:18:31 I also find it terribly confusing. It's pretty wei
79 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="100" data-expected-height="60">XXXX</div> 81 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="100" data-expected-height="60">XXXX</div>
80 </div> 82 </div>
81 </div> 83 </div>
82 84
83 <p>Stretching allowed in column axis, fitContent in row-axis | column of same si ze than content-box, row bigger than margin-box</p> 85 <p>Stretching allowed in column axis, fitContent in row-axis | column of same si ze than content-box, row bigger than margin-box</p>
84 <div class="container"> 86 <div class="container">
85 <div class="grid fitContentWidth columnsSameAsContentBox rowsBiggerThanMargi nBox"> 87 <div class="grid fit-content fitContentOnlyWidth columnsSameAsContentBox row sBiggerThanMarginBox">
86 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="100" data-expected-height="60">XXXX</div> 88 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="100" data-expected-height="60">XXXX</div>
87 </div> 89 </div>
88 </div> 90 </div>
89 91
90 <p>Stretching allowed in column axis, fitContent in row-axis | column bigger tha n content-box, row bigger than margin-box</p> 92 <p>Stretching allowed in column axis, fitContent in row-axis | column bigger tha n content-box, row bigger than margin-box</p>
91 <div class="container"> 93 <div class="container">
92 <div class="grid fitContentWidth columnsBiggerThanContentBox rowsBiggerThanM arginBox"> 94 <div class="grid fit-content fitContentOnlyWidth columnsBiggerThanContentBox rowsBiggerThanMarginBox">
93 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="100" data-expected-height="60">XXXX</div> 95 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="100" data-expected-height="60">XXXX</div>
94 </div> 96 </div>
95 </div> 97 </div>
96 98
97 <p>Stretching allowed in column axis, fitContent in row-axis | column of same si ze as margin-box, row bigger than margin-box</p> 99 <p>Stretching allowed in column axis, fitContent in row-axis | column of same si ze as margin-box, row bigger than margin-box</p>
98 <div class="container"> 100 <div class="container">
99 <div class="grid fitContentWidth columnsSameAsMarginBox rowsBiggerThanMargin Box"> 101 <div class="grid fit-content fitContentOnlyWidth columnsSameAsMarginBox rows BiggerThanMarginBox">
100 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="100" data-expected-height="60">XXXX</div> 102 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="100" data-expected-height="60">XXXX</div>
101 </div> 103 </div>
102 </div> 104 </div>
103 105
104 <p>Stretching allowed in column axis, fitContent in row-axis | column bigger tha n content-box, row bigger than margin-box</p> 106 <p>Stretching allowed in column axis, fitContent in row-axis | column bigger tha n content-box, row bigger than margin-box</p>
105 <div class="container"> 107 <div class="container">
106 <div class="grid fitContentWidth columnsBiggerThanMarginBox rowsBiggerThanMa rginBox"> 108 <div class="grid fit-content fitContentOnlyWidth columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
107 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="100" data-expected-height="60">XXXX</div> 109 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="100" data-expected-height="60">XXXX</div>
108 </div> 110 </div>
109 </div> 111 </div>
110 112
111 <!-- Checking stretch in column-axis --> 113 <!-- Checking stretch in column-axis -->
112 <p>Stretching allowed in both axis | row smaller than content-box, column bigger than margin-box</p> 114 <p>Stretching allowed in both axis | row smaller than content-box, column bigger than margin-box</p>
113 <div class="container"> 115 <div class="container">
114 <div class="grid rowsSmallerThanContentBox columnsBiggerThanMarginBox"> 116 <div class="grid rowsSmallerThanContentBox columnsBiggerThanMarginBox">
115 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> 117 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div>
116 </div> 118 </div>
(...skipping 23 matching lines...) Expand all
140 <p>Stretching allowed in both axis | row bigger than margin-box, column bigger c olumn margin-box</p> 142 <p>Stretching allowed in both axis | row bigger than margin-box, column bigger c olumn margin-box</p>
141 <div class="container"> 143 <div class="container">
142 <div class="grid rowsBiggerThanMarginBox columnsBiggerThanMarginBox"> 144 <div class="grid rowsBiggerThanMarginBox columnsBiggerThanMarginBox">
143 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="60">XXXX</div> 145 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="60">XXXX</div>
144 </div> 146 </div>
145 </div> 147 </div>
146 148
147 <!-- Checking min-height: auto logic --> 149 <!-- Checking min-height: auto logic -->
148 <p>Stretching allowed in row axis, fitContent in column-axis | row smaller than content-box, column bigger than margin-box</p> 150 <p>Stretching allowed in row axis, fitContent in column-axis | row smaller than content-box, column bigger than margin-box</p>
149 <div class="container"> 151 <div class="container">
150 <div class="grid fitContentHeight rowsSmallerThanContentBox columnsBiggerTha nMarginBox"> 152 <div class="grid fit-content fitContentOnlyHeight rowsSmallerThanContentBox columnsBiggerThanMarginBox">
151 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> 153 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div>
152 </div> 154 </div>
153 </div> 155 </div>
154 156
155 <p>Stretching allowed in row axis, fitContent in column-axis | row of same size than content-box, column bigger than margin-box</p> 157 <p>Stretching allowed in row axis, fitContent in column-axis | row of same size than content-box, column bigger than margin-box</p>
156 <div class="container"> 158 <div class="container">
157 <div class="grid fitContentHeight rowsSameAsContentBox columnsBiggerThanMarg inBox"> 159 <div class="grid fit-content fitContentOnlyHeight rowsSameAsContentBox colum nsBiggerThanMarginBox">
158 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> 160 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div>
159 </div> 161 </div>
160 </div> 162 </div>
161 163
162 <p>Stretching allowed in column axis, fitContent in row-axis | row bigger than c ontent-box, column bigger than margin-box</p> 164 <p>Stretching allowed in column axis, fitContent in row-axis | row bigger than c ontent-box, column bigger than margin-box</p>
163 <div class="container"> 165 <div class="container">
164 <div class="grid fitContentHeight rowsBiggerThanContentBox columnsBiggerThan MarginBox"> 166 <div class="grid fit-content fitContentOnlyHeight rowsBiggerThanContentBox c olumnsBiggerThanMarginBox">
165 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> 167 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div>
166 </div> 168 </div>
167 </div> 169 </div>
168 170
169 <p>Stretching allowed in row axis, fitContent in column-axis | row of same size as margin-box, column bigger than margin-box</p> 171 <p>Stretching allowed in row axis, fitContent in column-axis | row of same size as margin-box, column bigger than margin-box</p>
170 <div class="container"> 172 <div class="container">
171 <div class="grid fitContentHeight rowsSameAsMarginBox columnsBiggerThanMargi nBox"> 173 <div class="grid fit-content fitContentOnlyHeight rowsSameAsMarginBox column sBiggerThanMarginBox">
172 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> 174 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div>
173 </div> 175 </div>
174 </div> 176 </div>
175 177
176 <p>Stretching allowed in column axis, fitContent in row-axis | row bigger than m argin-box, column bigger than margin-box</p> 178 <p>Stretching allowed in column axis, fitContent in row-axis | row bigger than m argin-box, column bigger than margin-box</p>
177 <div class="container"> 179 <div class="container">
178 <div class="grid fitContentHeight rowsBiggerThanMarginBox columnsBiggerThanM arginBox"> 180 <div class="grid fit-content fitContentOnlyHeight rowsBiggerThanMarginBox co lumnsBiggerThanMarginBox">
179 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div> 181 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-wi dth="110" data-expected-height="25">XXXX</div>
180 </div> 182 </div>
181 </div> 183 </div>
OLDNEW
« third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/justify-self-cell.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698