LayoutTests/fast/alignment/parse-align-items.html - Issue 363133003: [CSS Grid Layout] Adapting align-self, align-items and justify-self to the last CSS 3 spec.

Side by Side Diff: LayoutTests/fast/alignment/parse-align-items.html

Issue 363133003: [CSS Grid Layout] Adapting align-self, align-items and justify-self to the last CSS 3 spec. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Created 6 years, 5 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

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <head>	3 <head>

4 <style>	4 <style>

5 #alignItemsBaseline {	5 #alignItemsBaseline {

6 align-items: baseline;	6 align-items: baseline;

7 }	7 }

8	8

	9 #alignItemsLastBaseline {

	10 align-items: last-baseline;

	11 }

	12

9 #alignItemsStretch {	13 #alignItemsStretch {

10 align-items: stretch;	14 align-items: stretch;

11 }	15 }

12	16

13 #alignItemsStart {	17 #alignItemsStart {

14 align-items: start;	18 align-items: start;

15 }	19 }

16	20

17 #alignItemsEnd {	21 #alignItemsEnd {

18 align-items: end;	22 align-items: end;

19 }	23 }

20	24

21 #alignItemsCenter {	25 #alignItemsCenter {

22 align-items: center;	26 align-items: center;

23 }	27 }

24	28

25 #alignItemsItemsStart {	29 #alignItemsSelfStart {

26 align-items: self-start;	30 align-items: self-start;

27 }	31 }

28	32

29 #alignItemsItemsEnd {	33 #alignItemsSelfEnd {

30 align-items: self-end;	34 align-items: self-end;

31 }	35 }

32	36

33 #alignItemsLeft {	37 #alignItemsLeft {

34 align-items: left;	38 align-items: left;

35 }	39 }

36	40

37 #alignItemsRight {	41 #alignItemsRight {

38 align-items: right;	42 align-items: right;

39 }	43 }

40	44

	45 #alignItemsFlexStart {

	46 align-items: flex-start;

	47 }

	48

	49 #alignItemsFlexEnd {

	50 align-items: flex-end;

	51 }

	52

41 #alignItemsEndTrue {	53 #alignItemsEndTrue {

42 align-items: end true;	54 align-items: end true;

43 }	55 }

44	56

45 #alignItemsCenterTrue {	57 #alignItemsCenterTrue {

46 align-items: center true;	58 align-items: center true;

47 }	59 }

48	60

49 #alignItemsItemsEndSafe {	61 #alignItemsSelfEndSafe {

50 align-items: self-end safe;	62 align-items: self-end safe;

51 }	63 }

52	64

53 #alignItemsItemsStartSafe {	65 #alignItemsSelfStartSafe {

54 align-items: self-start safe;	66 align-items: self-start safe;

55 }	67 }

56	68

57 #alignItemsRightSafe {	69 #alignItemsRightSafe {

58 align-items: right safe;	70 align-items: right safe;

59 }	71 }

60	72

61 #alignItemsLeftTrue {	73 #alignItemsLeftTrue {

62 align-items: left true;	74 align-items: left true;

63 }	75 }

	76

	77 #alignItemsFlexStartTrue {

	78 align-items: flex-start true;

	79 }

	80

	81 #alignItemsFlexEndSafe {

	82 align-items: flex-end safe;

	83 }

	84

64 </style>	85 </style>

65 <script src="../../resources/js-test.js"></script>	86 <script src="../../resources/js-test.js"></script>

66 </head>	87 </head>

67 <body>	88 <body>

68 <div id="alignItemsBaseline"></div>	89 <div id="alignItemsBaseline"></div>

	90 <div id="alignItemsLastBaseline"></div>

69 <div id="alignItemsStretch"></div>	91 <div id="alignItemsStretch"></div>

70 <div id="alignItemsStart"></div>	92 <div id="alignItemsStart"></div>

71 <div id="alignItemsEnd"></div>	93 <div id="alignItemsEnd"></div>

72 <div id="alignItemsCenter"></div>	94 <div id="alignItemsCenter"></div>

73 <div id="alignItemsItemsStart"></div>	95 <div id="alignItemsSelfStart"></div>

74 <div id="alignItemsItemsEnd"></div>	96 <div id="alignItemsSelfEnd"></div>

75 <div id="alignItemsLeft"></div>	97 <div id="alignItemsLeft"></div>

76 <div id="alignItemsRight"></div>	98 <div id="alignItemsRight"></div>

	99 <div id="alignItemsFlexStart"></div>

	100 <div id="alignItemsFlexEnd"></div>

77	101

78 <div id="alignItemsEndTrue"></div>	102 <div id="alignItemsEndTrue"></div>

79 <div id="alignItemsCenterTrue"></div>	103 <div id="alignItemsCenterTrue"></div>

80 <div id="alignItemsItemsEndSafe"></div>	104 <div id="alignItemsSelfEndSafe"></div>

81 <div id="alignItemsItemsStartSafe"></div>	105 <div id="alignItemsSelfStartSafe"></div>

82 <div id="alignItemsRightSafe"></div>	106 <div id="alignItemsRightSafe"></div>

83 <div id="alignItemsLeftTrue"></div>	107 <div id="alignItemsLeftTrue"></div>

	108 <div id="alignItemsFlexStartTrue"></div>

	109 <div id="alignItemsFlexEndSafe"></div>

	110 <script src="resources/alignment-parsing-utils.js"></script>

84 <script>	111 <script>

85 description('Test that setting and getting align-items works as expected');	112 description('Test that setting and getting align-items works as expected');

86	113

87 debug("Test getting align-items set through CSS");	114 debug("Test getting align-items set through CSS");

88 var alignItemsBaseline = document.getElementById("alignItemsBaseline");	115 var alignItemsBaseline = document.getElementById("alignItemsBaseline");

89 shouldBe("getComputedStyle(alignItemsBaseline, '').getPropertyValue('align-items ')", "'baseline'");	116 shouldBe("getComputedStyle(alignItemsBaseline, '').getPropertyValue('align-items ')", "'baseline'");

90	117

	118 var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline");

	119 shouldBe("getComputedStyle(alignItemsLastBaseline, '').getPropertyValue('align-i tems')", "'last-baseline'");

	120

91 var alignItemsStretch = document.getElementById("alignItemsStretch");	121 var alignItemsStretch = document.getElementById("alignItemsStretch");

92 shouldBe("getComputedStyle(alignItemsStretch, '').getPropertyValue('align-items' )", "'stretch'");	122 shouldBe("getComputedStyle(alignItemsStretch, '').getPropertyValue('align-items' )", "'stretch'");

93	123

94 var alignItemsStart = document.getElementById("alignItemsStart");	124 var alignItemsStart = document.getElementById("alignItemsStart");

95 shouldBe("getComputedStyle(alignItemsStart, '').getPropertyValue('align-items')" , "'start'");	125 shouldBe("getComputedStyle(alignItemsStart, '').getPropertyValue('align-items')" , "'start'");

96	126

97 var alignItemsEnd = document.getElementById("alignItemsEnd");	127 var alignItemsEnd = document.getElementById("alignItemsEnd");

98 shouldBe("getComputedStyle(alignItemsEnd, '').getPropertyValue('align-items')", "'end'");	128 shouldBe("getComputedStyle(alignItemsEnd, '').getPropertyValue('align-items')", "'end'");

99	129

100 var alignItemsCenter = document.getElementById("alignItemsCenter");	130 var alignItemsCenter = document.getElementById("alignItemsCenter");

101 shouldBe("getComputedStyle(alignItemsCenter, '').getPropertyValue('align-items') ", "'center'");	131 shouldBe("getComputedStyle(alignItemsCenter, '').getPropertyValue('align-items') ", "'center'");

102	132

103 var alignItemsItemsEnd = document.getElementById("alignItemsItemsEnd");	133 var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd");

104 shouldBe("getComputedStyle(alignItemsItemsEnd, '').getPropertyValue('align-items ')", "'self-end'");	134 shouldBe("getComputedStyle(alignItemsSelfEnd, '').getPropertyValue('align-items' )", "'self-end'");

105	135

106 var alignItemsItemsStart = document.getElementById("alignItemsItemsStart");	136 var alignItemsSelfStart = document.getElementById("alignItemsSelfStart");

107 shouldBe("getComputedStyle(alignItemsItemsStart, '').getPropertyValue('align-ite ms')", "'self-start'");	137 shouldBe("getComputedStyle(alignItemsSelfStart, '').getPropertyValue('align-item s')", "'self-start'");

108	138

109 var alignItemsLeft = document.getElementById("alignItemsLeft");	139 var alignItemsLeft = document.getElementById("alignItemsLeft");

110 shouldBe("getComputedStyle(alignItemsLeft, '').getPropertyValue('align-items')", "'left'");	140 shouldBe("getComputedStyle(alignItemsLeft, '').getPropertyValue('align-items')", "'left'");

111	141

112 var alignItemsRight = document.getElementById("alignItemsRight");	142 var alignItemsRight = document.getElementById("alignItemsRight");

113 shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('align-items')" , "'right'");	143 shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('align-items')" , "'right'");

114	144

	145 var alignItemsFlexStart = document.getElementById("alignItemsFlexStart");

	146 shouldBe("getComputedStyle(alignItemsFlexStart, '').getPropertyValue('align-item s')", "'flex-start'");

	147

	148 var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");

	149 shouldBe("getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('align-items' )", "'flex-end'");

	150

115 var alignItemsEndTrue = document.getElementById("alignItemsEndTrue");	151 var alignItemsEndTrue = document.getElementById("alignItemsEndTrue");

116 shouldBe("getComputedStyle(alignItemsEndTrue, '').getPropertyValue('align-items' )", "'end true'");	152 shouldBe("getComputedStyle(alignItemsEndTrue, '').getPropertyValue('align-items' )", "'end true'");

117	153

118 var alignItemsCenterTrue = document.getElementById("alignItemsCenterTrue");	154 var alignItemsCenterTrue = document.getElementById("alignItemsCenterTrue");

119 shouldBe("getComputedStyle(alignItemsCenterTrue, '').getPropertyValue('align-ite ms')", "'center true'");	155 shouldBe("getComputedStyle(alignItemsCenterTrue, '').getPropertyValue('align-ite ms')", "'center true'");

120	156

121 var alignItemsItemsEndSafe = document.getElementById("alignItemsItemsEndSafe");	157 var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe");

122 shouldBe("getComputedStyle(alignItemsItemsEndSafe, '').getPropertyValue('align-i tems')", "'self-end safe'");	158 shouldBe("getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('align-it ems')", "'self-end safe'");

123	159

124 var alignItemsItemsStartSafe = document.getElementById("alignItemsItemsStartSafe ");	160 var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe") ;

125 shouldBe("getComputedStyle(alignItemsItemsStartSafe, '').getPropertyValue('align -items')", "'self-start safe'");	161 shouldBe("getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('align- items')", "'self-start safe'");

126	162

127 var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");	163 var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");

128 shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('align-item s')", "'right safe'");	164 shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('align-item s')", "'right safe'");

129	165

130 var alignItemsLeftTrue = document.getElementById("alignItemsLeftTrue");	166 var alignItemsLeftTrue = document.getElementById("alignItemsLeftTrue");

131 shouldBe("getComputedStyle(alignItemsLeftTrue, '').getPropertyValue('align-items ')", "'left true'");	167 shouldBe("getComputedStyle(alignItemsLeftTrue, '').getPropertyValue('align-items ')", "'left true'");

132	168

	169 var alignItemsFlexStartTrue = document.getElementById("alignItemsFlexStartTrue") ;

	170 shouldBe("getComputedStyle(alignItemsFlexStartTrue, '').getPropertyValue('align- items')", "'flex-start true'");

	171

	172 var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe");

	173 shouldBe("getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('align-it ems')", "'flex-end safe'");

	174

133 debug("");	175 debug("");

134 debug("Test initial value of align-items through JS");	176 debug("Test initial value of align-items through JS");

135 element = document.createElement("div");	177 element = document.createElement("div");

136 document.body.appendChild(element);	178 document.body.appendChild(element);

137 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");	179 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'star t'");

138	180

139 debug("");	181 debug("");

140 debug("Test getting and setting align-items through JS");	182 debug("Test getting and setting align-items through JS");

141 element = document.createElement("div");	183 element = document.createElement("div");

142 document.body.appendChild(element);	184 document.body.appendChild(element);

143 element.style.alignItems = "center";	185 element.style.alignItems = "center";

144 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'cent er'");	186 checkValues(element, "alignItems", "align-items", "center", "center");

145	187

	188 element.style.alignItems = "true start";

	189 checkValues(element, "alignItems", "align-items", "start true", "start true");

	190

	191 element.style.alignItems = "flex-end safe";

	192 checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-end sa fe");

	193

	194 element.style.alignItems = "right";

	195 checkValues(element, "alignItems", "align-items", "right", "right");

	196

	197 element.style.alignItems = "center";

	198 checkValues(element, "alignItems", "align-items", "center", "center");

	199

	200 element.style.alignItems = "self-start";

	201 checkValues(element, "alignItems", "align-items", "self-start", "self-start");

	202

	203 element.style.alignItems = "auto";

	204 checkValues(element, "alignItems", "align-items", "auto", "start");

	205

	206 element.style.display = "flex";

	207 element.style.alignItems = "auto";

	208 checkValues(element, "alignItems", "align-items", "auto", "stretch");

	209

	210 element.style.display = "grid";

	211 element.style.alignItems = "auto";

	212 checkValues(element, "alignItems", "align-items", "auto", "stretch");

	213

	214 element.style.alignItems = "self-end";

	215 checkValues(element, "alignItems", "align-items", "self-end", "self-end");

	216

	217 debug("");

	218 debug("Test bad combinations of align-items");

146 element = document.createElement("div");	219 element = document.createElement("div");

147 document.body.appendChild(element);	220 document.body.appendChild(element);

148 element.style.alignItems = "true start";

149 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'star t true'");

150	221

151 element.style.alignItems = "auto";	222 checkBadValues(element, "alignItems", "align-items", "true auto");

152 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'auto '");	223 checkBadValues(element, "alignItems", "align-items", "auto safe");

153	224 checkBadValues(element, "alignItems", "align-items", "auto left");

154 debug("");	225 checkBadValues(element, "alignItems", "align-items", "baseline safe");

155 debug("Test bad combinaisons of align-items");	226 checkBadValues(element, "alignItems", "align-items", "baseline center");

156 element = document.createElement("div");	227 checkBadValues(element, "alignItems", "align-items", "stretch true");

157 document.body.appendChild(element);	228 checkBadValues(element, "alignItems", "align-items", "stretch right");

158 element.style.alignItems = "true auto";	229 checkBadValues(element, "alignItems", "align-items", "true true");

159 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");	230 checkBadValues(element, "alignItems", "align-items", "true safe");

160	231 checkBadValues(element, "alignItems", "align-items", "center start");

161 element.style.alignItems = "auto safe";	232 checkBadValues(element, "alignItems", "align-items", "stretch true");

162 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");	233 checkBadValues(element, "alignItems", "align-items", "safe stretch");

163	234 checkBadValues(element, "alignItems", "align-items", "baseline safe");

164 element.style.alignItems = "auto left";	235 checkBadValues(element, "alignItems", "align-items", "true baseline");

165 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");	236 checkBadValues(element, "alignItems", "align-items", "true safe left");

166	237 checkBadValues(element, "alignItems", "align-items", "true left safe");

167 element.style.alignItems = "baseline safe";	238 checkBadValues(element, "alignItems", "align-items", "left safe true safe");

168 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");	239 checkBadValues(element, "alignItems", "align-items", "legacy start");

169	240 checkBadValues(element, "alignItems", "align-items", "legacy end");

170 element.style.alignItems = "baseline center";	241 checkBadValues(element, "alignItems", "align-items", "legacy right true");

171 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");	242 checkBadValues(element, "alignItems", "align-items", "legacy auto");

172	243 checkBadValues(element, "alignItems", "align-items", "legacy stretch");

173 element.style.alignItems = "stretch true";	244 checkBadValues(element, "alignItems", "align-items", "legacy");

174 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");	245 checkBadValues(element, "alignItems", "align-items", "legacy left right");

175

176 element.style.alignItems = "stretch right";

177 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");

178

179 element.style.alignItems = "true true";

180 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");

181

182 element.style.alignItems = "true safe";

183 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");

184

185 element.style.alignItems = "center start";

186 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");

187

188 element.style.alignItems = "stretch true";

189 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");

190

191 element.style.alignItems = "safe stretch";

192 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");

193

194 element.style.alignItems = "baseline safe";

195 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");

196

197 element.style.alignItems = "true baseline";

198 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");

199

200 element.style.alignItems = "true safe";

201 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");

202

203 element.style.alignItems = "true safe left";

204 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");

205

206 element.style.alignItems = "true left safe";

207 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");

208

209 element.style.alignItems = "left safe true safe";

210 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");

211	246

212 debug("");	247 debug("");

213 debug("Test the value 'initial'");	248 debug("Test the value 'initial'");

214 element.style.alignItems = "center";	249 checkInitialValues(element, "alignItems", "align-items", "", "center");

215 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'cent er'");	250

216 element.style.alignItems = "initial";	251 debug("");

217 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");	252 debug("Test the value 'initial' for grid containers");

	253 checkInitialValues(element, "alignItems", "align-items", "grid", "left safe");

	254

	255 debug("");

	256 debug("Test the value 'initial' for flex containers");

	257 checkInitialValues(element, "alignItems", "align-items", "flex", "right true");

218	258

219 debug("");	259 debug("");

220 debug("Test the value 'inherit'");	260 debug("Test the value 'inherit'");

221 parentElement = document.createElement("div");	261 checkInheritValues(element, "alignItems", "align-items", "end");

222 document.body.appendChild(parentElement);	262 checkInheritValues(element, "alignItems", "align-items", "left safe");

223 parentElement.style.alignItems = "end";	263 checkInheritValues(element, "alignItems", "align-items", "center true");

224 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('align-items')", "'end'");

225	264

226 element = document.createElement("div");

227 parentElement.appendChild(element);

228 element.style.alignItems = "inherit";

229 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'end' ");

230 </script>	265 </script>

231 </body>	266 </body>

232 </html>	267 </html>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/fast/alignment/parse-align-items-expected.txt » ('j') | LayoutTests/fast/alignment/parse-align-items-expected.txt » ('J')