third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-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-004-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-004.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html » ('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; padding:0; margin:0;

13 }

14

15 .grid {

16 display: grid;

17 float: left;

18 position: relative;

19 border: 1px 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 }

27 /* Original Mozilla tests set a fixed width for their grids, that's due to a bug they have computing

28 repetitions with indefinite sizes. */

29 .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; /width:34px;/ }

30 .r12 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d]; /width:34px;/ }

31 .r13 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d]; /width:34px;/ }

32 .r14 { grid-template-rows: [a] repeat(4, [b] 20px [c]) [d]; /width:34px;/ }

33

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

35 .r22 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; /width:22p x;/ }

36 .r23 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; /width:22p x;/ }

37

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

39 .r32 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e] 30px [f]; /* width:10px;*/ }

40 .r33 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; /* width:10px;*/ }

41

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

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

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

45

46 .w100 { height: 100px; }

47 .w50 { height: 50px; }

48 .w80 { height: 80px; }

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

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

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

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

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

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

55 .float { float: left; }

56

57 wrap { float:left; height: 100px; }

58

59 x {

60 width: 10px;

61 background: grey;

62 }

63 a {

64 position: absolute;

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

66 background: black;

67 grid-row: c / c -1;

68 }

69 b {

70 position: absolute;

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

72 background: brown;

73 grid-row: auto / c -1;

74 }

75

76 x:first-child {

77 background: lime;

78 }

79 x:last-child {

80 background: blue;

81 }

82

83 </style>

84 </head>

85 <body>

86

87 <fill>

88

89 <wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap>

90 <wrap><div class="grid r14 float w100"><x></x><x></x><a></a><b></b><x></x></div> </wrap>

91 <wrap><div class="grid r14 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap >

92 <wrap><div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>

93 <wrap><div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>

94 <wrap><div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap >

95 <wrap><div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap >

96 <wrap><div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

97 <wrap><div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> </wrap>

98 <wrap><div class="grid r14 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> </wrap>

99 <wrap><div class="grid r14 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

100 <wrap><div class="grid r14 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

101

102 <br clear="all">

103 <br clear="all">

104

105 <wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>

106 <wrap><div class="grid r23 float w100"><x></x><x></x><a></a><b></b><x></x></div> </wrap>

107 <wrap><div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap >

108 <wrap><div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>

109 <wrap><div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>

110 <wrap><div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap >

111 <wrap><div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap >

112 <wrap><div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

113 <wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

114 <wrap><div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> </wrap>

115 <wrap><div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

116 <wrap><div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

117

118 <br clear="all">

119 <br clear="all">

120

121 <wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap>

122 <wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

123 <wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>

124 <wrap><div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>

125 <wrap><div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>

126 <wrap><div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap >

127 <wrap><div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap >

128 <wrap><div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

129 <wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

130 <wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

131 <wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

132 <wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

133

134 </fill>

135

136 <br clear="all">

137 <br clear="all">

138

139 <!-- <fit>

140

141 <wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap>

142 <wrap><div class="grid r13 float w100"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

143 <wrap><div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

144 <wrap><div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

145 <wrap><div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

146 <wrap><div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

147 <wrap><div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

148 <wrap><div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

149 <wrap><div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

150 <wrap><div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

151 <wrap><div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x> </x></div></wrap>

152 <wrap><div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x> </x></div></wrap>

153

154 <br clear="all">

155 <br clear="all">

156

157 <wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>

158 <wrap><div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

159 <wrap><div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

160 <wrap><div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

161 <wrap><div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

162 <wrap><div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

163 <wrap><div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

164 <wrap><div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

165 <wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

166 <wrap><div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x>< /div></wrap>

167 <wrap><div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x> </x></div></wrap>

168 <wrap><div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x> </x></div></wrap>

169

170 <br clear="all">

171 <br clear="all">

172

173 <wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap>

174 <wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

175 <wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

176 <wrap><div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

177 <wrap><div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div></ wrap>

178 <wrap><div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

179 <wrap><div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div>< /wrap>

180 <wrap><div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

181 <wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

182 <wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></ div></wrap>

183 <wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x>< /x></div></wrap>

184 <wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x>< /x></div></wrap>

185

186 <br clear="all">

187 <br clear="all">

188

189 </fit> -->

190

191

192 </body>

193 </html>

OLD	NEW