third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html - Issue 1920953002: Revert of [css-grid] Implement auto-repeat computation

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html

Issue 1920953002: Revert of [css-grid] Implement auto-repeat computation (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 8 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/mozilla/grid-repeat-auto-fill-fit-005.html ('k') | third_party/WebKit/Source/build/scripts/templates/StyleBuilderFunctions.cpp.tmpl » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!DOCTYPE HTML>

2 <!--

3 Any copyright is dedicated to the Public Domain.

4 http://creativecommons.org/publicdomain/zero/1.0/

5 -->

6 <html><head>

7 <meta charset="utf-8">

8 <title>Reference: repeat(auto-fill/auto-fit)</title>

9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/sh ow_bug.cgi?id=1118820">

10 <style type="text/css">

11 html,body {

12 color:black; background-color:white; font-size:16px;

13 }

14

15 .grid {

16 display: grid;

17 float: left;

18 position: relative;

19 border: 2px solid;

20 grid-auto-columns: 10px;

21 grid-auto-rows: 10px;

22 grid-auto-flow: column;

23 grid-gap: 2px;

24 margin-right: 2px;

25 padding-top: 3px;

26 padding-bottom: 2px;

27 }

28

29 .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }

30 .r10,.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }

31 .r01 { grid-template-rows: [a] repeat(1, [b] 0 [c]) 20px [d]; grid-gap:0;}

32 .r01 a {grid-row-end:auto; }

33 .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }

34 .r20 { width:22px; grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }

35 .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; }

36 .r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f] ; }

37 .r03 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }

38 .r003 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }

39 /* This is a bug in the original Mozilla tests, auto is not allowed in <auto-tra ck-list> */

40 /* .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] auto [f]; } */

41 .ra { grid-template-rows: none; }

42 .r0a { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] auto [f]; grid- gap:0; padding-bottom:4px;}

43

44 fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }

45 fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }

46 fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }

47 fit .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; grid-gap:0 ;}

48 fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }

49 fit .r03 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; }

50 fit .r003 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; padding-bottom:4px;}

51 fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] auto [f]; }

52

53 .w100 { height: 100px; }

54 .w3 { height: 3px; }

55 .w20 { height: 20px; }

56 .w50 { height: 50px; }

57 .w80 { height: 80px; }

58 .mw100 { min-height: 100px; }

59 .mw3 { height: 3px; }

60 .mw20 { height: 20px; }

61 .mw50 { min-height: 50px; }

62 .mw80 { min-height: 80px; }

63 .xw100 { max-height: 100px; }

64 .xw3 { height: 3px; }

65 .xw20 { height: 20px; }

66 .xw50 { max-height: 50px; }

67 .xw80 { max-height: 80px; }

68

69 .w { width:10px}

70

71 x {

72 height: 10px;

73 background: grey;

74 }

75 a {

76 position: absolute;

77 left:0; top:0; bottom:0; width: 3px;

78 background: black;

79 grid-row: c / c -1;

80 }

81 b {

82 position: absolute;

83 right:0; top:0; bottom:0; width: 3px;

84 background: brown;

85 grid-row: auto / c -1;

86 }

87

88 x:first-child {

89 background: lime;

90 }

91 x:last-child {

92 background: blue;

93 }

94

95 fill,fit {

96 float: left;

97 height: 400px;

98 }

99 </style>

100 </head>

101 <body>

102

103 <fill>

104

105 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>

106 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>

107 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>

108 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>

109 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>

110 <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>

111 <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>

112 <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>

113 <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>

114 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>

115 <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>

116 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>

117

118 <br clear="all">

119 <br clear="all">

120

121 <div class="grid r1 w w20"><a></a><b></b></div>

122 <div class="grid r1 w w3"><a></a><b></b></div>

123 <div class="grid r1 w xw20"><a></a><b></b></div>

124 <div class="grid r1 w xw3"><a></a><b></b></div>

125 <div class="grid r1 w mw20"><a></a><b></b></div>

126 <div class="grid r1 w mw3"><a></a><b></b></div>

127 <div class="grid r1 w w20 xw3"><a></a><b></b></div>

128 <div class="grid r1 w w3 mw20"><a></a><b></b></div>

129 <div class="grid r1 w w3 mw3"><a></a><b></b></div>

130 <div class="grid r1 w xw20"><a></a><b></b></div>

131 <div class="grid r1 w xw3 mw20"><a></a><b></b></div>

132 <div class="grid r1 w mw20"><a></a><b></b></div>

133

134 <div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></d iv>

135 <div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>

136 <div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b> <x></x></div>

137 <div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></d iv>

138 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>

139 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>

140

141 <div class="grid w r1" style="min-height:0"><a></a><b></b></div>

142 <div class="grid w r1" style="height:0"><a></a><b></b></div>

143 <div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>

144 <div class="grid w r1" style="max-height:0"><a></a><b></b></div>

145 <div class="grid w r0"><a></a><b></b></div>

146 <div class="grid w ra"><a></a><b></b></div>

147

148 <br clear="all">

149 <br clear="all">

150

151 <div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div>

152 <div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div>

153 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>

154 <div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div>

155 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>

156 <div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div>

157 <div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>

158 <div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>

159 <div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>

160 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>

161 <div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>

162 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>

163

164 <br clear="all">

165 <br clear="all">

166

167 <div class="grid r20 w w20"><a></a><b></b></div>

168 <div class="grid r20 w w3"><a></a><b></b></div>

169 <div class="grid r20 w xw20"><a></a><b></b></div>

170 <div class="grid r20 w xw3"><a></a><b></b></div>

171 <div class="grid r20 w mw20"><a></a><b></b></div>

172 <div class="grid r20 w mw3"><a></a><b></b></div>

173 <div class="grid r20 w w20 xw3"><a></a><b></b></div>

174 <div class="grid r20 w w3 mw20"><a></a><b></b></div>

175 <div class="grid r20 w w3 mw3"><a></a><b></b></div>

176 <div class="grid r20 w xw20"><a></a><b></b></div>

177 <div class="grid r20 w xw3 mw20"><a></a><b></b></div>

178 <div class="grid r20 w mw20"><a></a><b></b></div>

179

180 <div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></ div>

181 <div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>

182 <div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><b></b ><x></x></div>

183 <div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></ div>

184 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>

185 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>

186

187 <div class="grid w r20" style="min-height:0"><a></a><b></b></div>

188 <div class="grid w r20" style="height:0"><a></a><b></b></div>

189 <div class="grid w r20" style="min-height:0; height:0"><a></a><b></b></div>

190 <div class="grid w r20" style="max-height:0"><a></a><b></b></div>

191 <div class="grid w r02"><a></a><b></b></div>

192

193

194 <br clear="all">

195 <br clear="all">

196

197 <div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div>

198 <div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div>

199 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>

200 <div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div>

201 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>

202 <div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div>

203 <div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>

204 <div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>

205 <div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>

206 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>

207 <div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>

208 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>

209

210 <br clear="all">

211 <br clear="all">

212

213 <div class="grid r30 w w20"><a></a><b></b></div>

214 <div class="grid r30 w w3"><a></a><b></b></div>

215 <div class="grid r30 w xw20"><a></a><b></b></div>

216 <div class="grid r30 w xw3"><a></a><b></b></div>

217 <div class="grid r30 w mw20"><a></a><b></b></div>

218 <div class="grid r30 w mw3"><a></a><b></b></div>

219 <div class="grid r30 w w20 xw3"><a></a><b></b></div>

220 <div class="grid r30 w w3 mw20"><a></a><b></b></div>

221 <div class="grid r30 w w3 mw3"><a></a><b></b></div>

222 <div class="grid r30 w xw20"><a></a><b></b></div>

223 <div class="grid r30 w xw3 mw20"><a></a><b></b></div>

224 <div class="grid r30 w mw20"><a></a><b></b></div>

225

226 <div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x></x> </div>

227 <div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x></di v>

228 <div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a><b>< /b><x></x></div>

229 <div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x></x> </div>

230 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>

231 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>

232

233 <div class="grid w r30" style="min-height:0"><a></a><b></b></div>

234 <div class="grid w r30" style="height:0"><a></a><b></b></div>

235 <div class="grid w r30" style="min-height:0; height:0"><a></a><b></b></div>

236 <div class="grid w r30" style="max-height:0"><a></a><b></b></div>

237 <div class="grid w r003"><a></a><b></b></div>

238

239

240 </fill>

241

242 <!-- <fit>

243

244 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>

245 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>

246 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>

247 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>

248 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>

249 <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>

250 <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>

251 <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>

252 <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>

253 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>

254 <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>

255 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>

256

257 <br clear="all">

258 <br clear="all">

259

260 <div class="grid r01 w w20"><a></a><b></b></div>

261 <div class="grid r01 w w3"><a></a><b></b></div>

262 <div class="grid r01 w xw20"><a></a><b></b></div>

263 <div class="grid r01 w xw3"><a></a><b></b></div>

264 <div class="grid r01 w mw20"><a></a><b></b></div>

265 <div class="grid r01 w mw3"><a></a><b></b></div>

266 <div class="grid r01 w w20 xw3"><a></a><b></b></div>

267 <div class="grid r01 w w3 mw20"><a></a><b></b></div>

268 <div class="grid r01 w w3 mw3"><a></a><b></b></div>

269 <div class="grid r01 w xw20"><a></a><b></b></div>

270 <div class="grid r01 w xw3 mw20"><a></a><b></b></div>

271 <div class="grid r01 w mw20"><a></a><b></b></div>

272

273 <div class="grid r10" style="min-height:0"><x></x><x></x><a></a><b></b><x>< /x></div>

274 <div class="grid r10" style="height:0"><x></x><x></x><a></a><b></b><x></x>< /div>

275 <div class="grid r10" style="min-height:0; height:0"><x></x><x></x><a></a>< b></b><x></x></div>

276 <div class="grid r10" style="max-height:0"><x></x><x></x><a></a><b></b><x>< /x></div>

277 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>

278 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>

279

280 <div class="grid w r01" style="max-height:0"><a></a><b></b></div>

281 <div class="grid w r01" style="height:0"><a></a><b></b></div>

282 <div class="grid w r01" style="min-height:0; height:0"><a></a><b></b></div>

283 <div class="grid w r01" style="max-height:0"><a></a><b></b></div>

284 <div class="grid w r01" style="max-height:0"><a></a><b></b></div>

285 <div class="grid w r0a"><a></a><b></b></div>

286

287 <br clear="all">

288 <br clear="all">

289

290 <div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div>

291 <div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div>

292 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>

293 <div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div>

294 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>

295 <div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div>

296 <div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>

297 <div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>

298 <div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>

299 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>

300 <div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>

301 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>

302

303 <br clear="all">

304 <br clear="all">

305

306 <div class="grid r02 w w20"><a></a><b></b></div>

307 <div class="grid r02 w w3"><a></a><b></b></div>

308 <div class="grid r02 w xw20"><a></a><b></b></div>

309 <div class="grid r02 w xw3"><a></a><b></b></div>

310 <div class="grid r02 w mw20"><a></a><b></b></div>

311 <div class="grid r02 w mw3"><a></a><b></b></div>

312 <div class="grid r02 w w20 xw3"><a></a><b></b></div>

313 <div class="grid r02 w w3 mw20"><a></a><b></b></div>

314 <div class="grid r02 w w3 mw3"><a></a><b></b></div>

315 <div class="grid r02 w xw20"><a></a><b></b></div>

316 <div class="grid r02 w xw3 mw20"><a></a><b></b></div>

317 <div class="grid r02 w mw20"><a></a><b></b></div>

318

319 <div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x>< /x></div>

320 <div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x>< /div>

321 <div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a>< b></b><x></x></div>

322 <div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x>< /x></div>

323 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>

324 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>

325

326 <div class="grid w r02" style="min-height:0"><a></a><b></b></div>

327 <div class="grid w r02" style="height:0"><a></a><b></b></div>

328 <div class="grid w r02" style="min-height:0; height:0"><a></a><b></b></div>

329 <div class="grid w r02" style="max-height:0"><a></a><b></b></div>

330 <div class="grid w r02"><a></a><b></b></div>

331

332

333 <br clear="all">

334 <br clear="all">

335

336 <div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div>

337 <div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div>

338 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>

339 <div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div>

340 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>

341 <div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div>

342 <div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>

343 <div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>

344 <div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>

345 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>

346 <div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>

347 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>

348

349 <br clear="all">

350 <br clear="all">

351

352 <div class="grid r03 w w20"><a></a><b></b></div>

353 <div class="grid r03 w w3"><a></a><b></b></div>

354 <div class="grid r03 w xw20"><a></a><b></b></div>

355 <div class="grid r03 w xw3"><a></a><b></b></div>

356 <div class="grid r03 w mw20"><a></a><b></b></div>

357 <div class="grid r03 w mw3"><a></a><b></b></div>

358 <div class="grid r03 w w20 xw3"><a></a><b></b></div>

359 <div class="grid r03 w w3 mw20"><a></a><b></b></div>

360 <div class="grid r03 w w3 mw3"><a></a><b></b></div>

361 <div class="grid r03 w xw20"><a></a><b></b></div>

362 <div class="grid r03 w xw3 mw20"><a></a><b></b></div>

363 <div class="grid r03 w mw20"><a></a><b></b></div>

364

365 <div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x ></x></div>

366 <div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x ></div>

367 <div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a ><b></b><x></x></div>

368 <div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x ></x></div>

369 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>

370 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>

371

372 <div class="grid w r003" style="min-height:0"><a></a><b></b></div>

373 <div class="grid w r03" style="height:0"><a></a><b></b></div>

374 <div class="grid w r03" style="min-height:0; height:0"><a></a><b></b></div>

375 <div class="grid w r03" style="max-height:0"><a></a><b></b></div>

376 <div class="grid w r003"><a></a><b></b></div>

377

378

379

380 </fit> -->

381

382

383 </body>

384 </html>

OLD	NEW