Reviewed by Darin.
[WebKit-https.git] / LayoutTests / css1 / conformance / forward_compatible_parsing.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
2 <HTML>
3 <HEAD>
4 <TITLE>CSS1 Test Suite: 7.1 Forward-Compatible Parsing</TITLE>
5 <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
6 <META http-equiv="Content-Style-Type" content="text/css">
7
8 <LINK rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
9 <STYLE type="text/css">
10 P.one {color: green; rotation: 70deg;}
11 P.oneb {color: green;}
12 P.oneb {color: invalidValue;}
13 P.two {background-color: inherit;}
14 H1 + P.three {color: blue;}
15 P.four + H1 {color: red;}
16 P.five {background-color: "red";}
17 P.sixa {border-width: medium; border-style: solid;}
18 P.sixb {border-width: funny; border-style: solid;}
19 P.sixc {border-width: 50zu; border-style: solid;}
20 P.sixd {border-width: px; border-style: solid;}
21 @three-dee {
22  @background-lighting {
23   azimuth: 30deg;
24   elevation: 190deg;
25   }
26  P.seven { color: red }
27  }
28 P.eight {COLOR: GREEN;}
29 OL:wait {color: maroon;}
30 P.ten:first-child {color: maroon;}
31 UL:lang(fr) {color: gray;}
32 BLOCKQUOTE[href] {color: navy;}
33 ACRONYM[href="foo"] {color: purple;}
34 ADDRESS[href~="foo"] {color: purple;}
35 SPAN[lang|="fr"] {color: #c37;}
36 @media tty {
37  H1 {color: red;}
38  P.sixteen {color: red;}
39  }
40 @three-dee {
41  P.seventeen {color: red }
42  }
43 P.eighteena {text-decoration: underline overline line-through diagonal;
44             font: bold highlighted 100% sans-serif;}
45 P.eighteenb {text-decoration: underline overline line-through diagonal;
46             font: bold highlighted 100% serif;}
47 EM, P.nineteena ! EM, STRONG {font-size: 200%; }
48
49 // UL.nineteenb,
50 P.nineteenb {color: red;}
51
52 P.twentya {rotation-code: "}"; color: blue;} 
53 P.twentyb {rotation-code: "\"}\""; color: green;}
54 P.twentyonea {rotation-code: '}'; color: purple;} 
55 P.twentyoneb {rotation-code: '\'}\''; color: green;}
56 P.twentytwo {
57  type-display: @threedee {rotation-code: '}';};
58  color: green;
59  }
60 P.twentythree {text-indent: 0.5in;}
61  color: maroon
62 P.twentyfour {color: red;}
63 </STYLE>
64
65 </HEAD>
66
67 <BODY><P>The style declarations which apply to the text below are:</P>
68 <PRE>P.one {color: green; rotation: 70deg;}
69 P.oneb {color: green;}
70 P.oneb {color: invalidValue;}
71 P.two {background-color: inherit;}
72 H1 + P.three {color: blue;}
73 P.four + H1 {color: red;}
74 P.five {background-color: "red";}
75 P.sixa {border-width: medium; border-style: solid;}
76 P.sixb {border-width: funny; border-style: solid;}
77 P.sixc {border-width: 50zu; border-style: solid;}
78 P.sixd {border-width: px; border-style: solid;}
79 @three-dee {
80  @background-lighting {
81   azimuth: 30deg;
82   elevation: 190deg;
83   }
84  P.seven { color: red }
85  }
86 P.eight {COLOR: GREEN;}
87 OL:wait {color: maroon;}
88 P.ten:first-child {color: maroon;}
89 UL:lang(fr) {color: gray;}
90 BLOCKQUOTE[href] {color: navy;}
91 ACRONYM[href="foo"] {color: purple;}
92 ADDRESS[href~="foo"] {color: purple;}
93 SPAN[lang|="fr"] {color: #c37;}
94 @media tty {
95  H1 {color: red;}
96  P.sixteen {color: red;}
97  }
98 @three-dee {
99  P.seventeen {color: red }
100  }
101 P.eighteena {text-decoration: underline overline line-through diagonal;
102             font: bold highlighted 100% sans-serif;}
103 P.eighteenb {text-decoration: underline overline line-through diagonal;
104             font: bold highlighted 100% serif;}
105 EM, P.nineteena ! EM, STRONG {font-size: 200%; }
106
107 // UL.nineteenb,
108 P.nineteenb {color: red;}
109
110 P.twentya {rotation-code: "}"; color: blue;} 
111 P.twentyb {rotation-code: "\"}\""; color: green;}
112 P.twentyonea {rotation-code: '}'; color: purple;} 
113 P.twentyoneb {rotation-code: '\'}\''; color: green;}
114 P.twentytwo {
115  type-display: @threedee {rotation-code: '}';};
116  color: green;
117  }
118 P.twentythree {text-indent: 0.5in;}
119  color: maroon
120 P.twentyfour {color: red;}
121
122 </PRE>
123 <HR>
124 <P CLASS="one">
125 This paragraph should be green, because only the rotation should be ignored.
126 </P>
127 <P CLASS="oneb">
128 This paragraph should be green, since error-checking should be done before calculating specificity.
129 </P>
130 <P CLASS="two">
131 This paragraph should have a solid gray background (or a white grid), because in CSS1, <CODE>inherit</CODE> is an invalid keyword, and in CSS2, it will cause the gray background (not the white grid) to be inherited.
132 </P>
133 <P CLASS="three">
134 This paragraph should be black, since in CSS1, the selector is invalid, and
135 in CSS2, it does not apply.
136 </P>
137 <P CLASS="four">
138 This paragraph should be black, since in CSS1, the selector is invalid, and
139 in CSS2, it does not apply.
140 </P>
141 <P CLASS="five">
142 This paragraph should have a white background, since keywords cannot be quoted.
143 </P>
144 <P CLASS="sixa">
145 This paragraph should have a medium-width border around it (the same as the next three paragraphs).  This should cause the user agent to use the default value of 'medium'.
146 </P>
147 <P CLASS="sixb">
148 This paragraph should have a medium-width border around it (the same as the previous and the next two paragraphs), because the border-width is invalid.  This should cause the user agent to use the default value of 'medium'.
149 </P>
150 <P CLASS="sixc">
151 This paragraph should have a medium-width border around it (the same as the next and the previous two paragraphs), because the border-width units are invalid, and therefore the border-width should be ignored.  This should cause the user agent to use the default value of 'medium'.
152 </P>
153 <P CLASS="sixd">
154 This paragraph should have a medium-width border around it (the same as the previous three paragraphs), because the border-width does not have any value to go with its pixel unit, and is therefore invalid.  This should cause the user agent to use the default value of 'medium'.
155 </P>
156 <P CLASS="seven">
157 This paragraph should be black, because the style declaration that applies
158 to it is within an invalid at-rule.
159 </P>
160 <P CLASS="eight">
161 This paragraph should be green.  CSS is case-insensitive, unless required
162 to be case sensitive due to interaction with other standards (e.g., font
163 names or URLs.)
164 </P>
165
166 <OL>
167 <LI>This ordered list item should be black, because the declaration has
168 an invalid pseudo-class selector.</LI>
169 </OL>
170
171 <P CLASS="ten">
172 This paragraph should be black, because, in CSS1, :first-child is an
173 invalid pseudo-class, and in CSS2, this paragraph is not the first child.
174 </P>
175
176 <UL>
177 <LI>This unordered list item should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.</LI> 
178 </UL>
179
180 <BLOCKQUOTE>This blockquote should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.</BLOCKQUOTE>
181
182 <P><ACRONYM>This acronym should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not
183 apply.</ACRONYM></P>
184
185 <ADDRESS>This address should be black, because, according to CSS1,
186 the selector is invalid, and according to CSS2, the selector should not
187 apply.</ADDRESS>
188
189 <P><SPAN>This span should be black, because, according to CSS1,
190 the selector is invalid, and according to CSS2, the selector should not
191 apply.</SPAN></P>
192
193 <P CLASS="sixteen">
194 This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule.  However, it is valid in CSS2, so if this is being viewed on a tty browser that supports CSS2, it should be red.
195 </P>
196 <P CLASS="seventeen">
197 This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule.
198 </P>
199 <P CLASS="eighteena">
200 The text of this paragraph should be normal (that is, it should not be
201 underlined, overlined, stricken, or bold), because <CODE>diagonal</CODE> is not a valid keyword, making the <CODE>text-decoration</CODE> invalid.  In addition, <CODE>highlighted</CODE> is not a valid part of the <CODE>font</CODE> property, making it invalid.   Therefore, this paragraph's font should be the UA default, and match the next paragraph.  If this is not the case, then the <CODE>font</CODE> declaration is being improperly parsed.
202 </P>
203 <P CLASS="eighteenb">
204 The text of this paragraph should be normal (that is, it should not be
205 underlined, overlined, stricken, or bold), because <CODE>diagonal</CODE> is not a valid keyword, making the <CODE>text-decoration</CODE> invalid.  In addition, <CODE>highlighted</CODE> is not a valid part of the <CODE>font</CODE> property, making it invalid.   Therefore, this paragraph's font should be the UA default, and match the previous paragraph.  If this is not the case, then the <CODE>font</CODE> declaration is being improperly parsed.
206 </P>
207 <P CLASS="nineteena">
208 The text of this paragraph should be normal size because the selector
209 is invalid.  The <EM>emphasized text</EM> and the <STRONG>strong
210 text</STRONG> within it should also be normal size, since the
211 entire ruleset should be skipped (since in some future version of
212 CSS, there could be an operator within the selector that has higher
213 precedence than a comma).
214 </P>
215 <P CLASS="nineteenb">
216 This paragraph should be black, because the line before the declaration
217 is <STRONG>not</STRONG> a comment and therefore the selector for
218 P.nineteenb is invalid.
219 </P>
220 <P CLASS="twentya">
221 This paragraph should be blue, because only the first declaration is invalid.
222 </P>
223 <P CLASS="twentyb">
224 This paragraph should be green, because only the first declaration is invalid.
225 </P>
226 <P CLASS="twentyonea">
227 This paragraph should be purple, because only the first declaration is invalid.
228 </P>
229 <P CLASS="twentyoneb">
230 This paragraph should be green, because only the first declaration is invalid.
231 </P>
232 <P CLASS="twentytwo">
233 This paragraph should be green, because only the first declaration is invalid.
234 </P>
235 <P CLASS="twentythree">
236 This paragraph should be indented half an inch, but it should not
237 be maroon.  It should be black.
238 </P>
239 <P CLASS="twentyfour">
240 This paragraph should be black, because the color declaration after
241 the previous ruleset should be considered part of the selector for
242 this ruleset, and this ruleset therefore has an invalid selector
243 and should not be applied.
244 </P>
245
246
247 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
248 <TR>
249 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
250 </TR>
251 <TR>
252 <TD bgcolor="silver">&nbsp;</TD>
253 <TD><P CLASS="one">
254 This paragraph should be green, because only the rotation should be ignored.
255 </P>
256 <P CLASS="oneb">
257 This paragraph should be green, since error-checking should be done before calculating specificity.
258 </P>
259 <P CLASS="two">
260 This paragraph should have a solid gray background (or a white grid), because in CSS1, <CODE>inherit</CODE> is an invalid keyword, and in CSS2, it will cause the gray background (not the white grid) to be inherited.
261 </P>
262 <P CLASS="three">
263 This paragraph should be black, since in CSS1, the selector is invalid, and
264 in CSS2, it does not apply.
265 </P>
266 <P CLASS="four">
267 This paragraph should be black, since in CSS1, the selector is invalid, and
268 in CSS2, it does not apply.
269 </P>
270 <P CLASS="five">
271 This paragraph should have a white background, since keywords cannot be quoted.
272 </P>
273 <P CLASS="sixa">
274 This paragraph should have a medium-width border around it (the same as the next three paragraphs).  This should cause the user agent to use the default value of 'medium'.
275 </P>
276 <P CLASS="sixb">
277 This paragraph should have a medium-width border around it (the same as the previous and the next two paragraphs), because the border-width is invalid.  This should cause the user agent to use the default value of 'medium'.
278 </P>
279 <P CLASS="sixc">
280 This paragraph should have a medium-width border around it (the same as the next and the previous two paragraphs), because the border-width units are invalid, and therefore the border-width should be ignored.  This should cause the user agent to use the default value of 'medium'.
281 </P>
282 <P CLASS="sixd">
283 This paragraph should have a medium-width border around it (the same as the previous three paragraphs), because the border-width does not have any value to go with its pixel unit, and is therefore invalid.  This should cause the user agent to use the default value of 'medium'.
284 </P>
285 <P CLASS="seven">
286 This paragraph should be black, because the style declaration that applies
287 to it is within an invalid at-rule.
288 </P>
289 <P CLASS="eight">
290 This paragraph should be green.  CSS is case-insensitive, unless required
291 to be case sensitive due to interaction with other standards (e.g., font
292 names or URLs.)
293 </P>
294
295 <OL>
296 <LI>This ordered list item should be black, because the declaration has
297 an invalid pseudo-class selector.</LI>
298 </OL>
299
300 <P CLASS="ten">
301 This paragraph should be black, because, in CSS1, :first-child is an
302 invalid pseudo-class, and in CSS2, this paragraph is not the first child.
303 </P>
304
305 <UL>
306 <LI>This unordered list item should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.</LI> 
307 </UL>
308
309 <BLOCKQUOTE>This blockquote should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.</BLOCKQUOTE>
310
311 <P><ACRONYM>This acronym should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not
312 apply.</ACRONYM></P>
313
314 <ADDRESS>This address should be black, because, according to CSS1,
315 the selector is invalid, and according to CSS2, the selector should not
316 apply.</ADDRESS>
317
318 <P><SPAN>This span should be black, because, according to CSS1,
319 the selector is invalid, and according to CSS2, the selector should not
320 apply.</SPAN></P>
321
322 <P CLASS="sixteen">
323 This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule.  However, it is valid in CSS2, so if this is being viewed on a tty browser that supports CSS2, it should be red.
324 </P>
325 <P CLASS="seventeen">
326 This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule.
327 </P>
328 <P CLASS="eighteena">
329 The text of this paragraph should be normal (that is, it should not be
330 underlined, overlined, stricken, or bold), because <CODE>diagonal</CODE> is not a valid keyword, making the <CODE>text-decoration</CODE> invalid.  In addition, <CODE>highlighted</CODE> is not a valid part of the <CODE>font</CODE> property, making it invalid.   Therefore, this paragraph's font should be the UA default, and match the next paragraph.  If this is not the case, then the <CODE>font</CODE> declaration is being improperly parsed.
331 </P>
332 <P CLASS="eighteenb">
333 The text of this paragraph should be normal (that is, it should not be
334 underlined, overlined, stricken, or bold), because <CODE>diagonal</CODE> is not a valid keyword, making the <CODE>text-decoration</CODE> invalid.  In addition, <CODE>highlighted</CODE> is not a valid part of the <CODE>font</CODE> property, making it invalid.   Therefore, this paragraph's font should be the UA default, and match the previous paragraph.  If this is not the case, then the <CODE>font</CODE> declaration is being improperly parsed.
335 </P>
336 <P CLASS="nineteena">
337 The text of this paragraph should be normal size because the selector
338 is invalid.  The <EM>emphasized text</EM> and the <STRONG>strong
339 text</STRONG> within it should also be normal size, since the
340 entire ruleset should be skipped (since in some future version of
341 CSS, there could be an operator within the selector that has higher
342 precedence than a comma).
343 </P>
344 <P CLASS="nineteenb">
345 This paragraph should be black, because the line before the declaration
346 is <STRONG>not</STRONG> a comment and therefore the selector for
347 P.nineteenb is invalid.
348 </P>
349 <P CLASS="twentya">
350 This paragraph should be blue, because only the first declaration is invalid.
351 </P>
352 <P CLASS="twentyb">
353 This paragraph should be green, because only the first declaration is invalid.
354 </P>
355 <P CLASS="twentyonea">
356 This paragraph should be purple, because only the first declaration is invalid.
357 </P>
358 <P CLASS="twentyoneb">
359 This paragraph should be green, because only the first declaration is invalid.
360 </P>
361 <P CLASS="twentytwo">
362 This paragraph should be green, because only the first declaration is invalid.
363 </P>
364 <P CLASS="twentythree">
365 This paragraph should be indented half an inch, but it should not
366 be maroon.  It should be black.
367 </P>
368 <P CLASS="twentyfour">
369 This paragraph should be black, because the color declaration after
370 the previous ruleset should be considered part of the selector for
371 this ruleset, and this ruleset therefore has an invalid selector
372 and should not be applied.
373 </P>
374 </TD></TR></TABLE></BODY>
375 </HTML>