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>