| <html> <head> |
| |
| <title> Test of Stylesheet Pseudo Elements </title> |
| <style> |
| body {font-family: serif; font-size: 150%;} |
| p { border: thin solid black; background-color: #eeeeee; } |
| |
| p:first-line { |
| font-family: sans-serif; |
| color: green; |
| } |
| |
| p:first-letter { |
| font-size: 3em; |
| font-weight: bold; |
| border: dashed thin; |
| } |
| |
| p.floated:first-letter {float: left; } |
| </style> |
| </head> |
| |
| <body> |
| |
| <h1>Inheritance bug for floated first-letter </h1> |
| |
| <p> Here is the first paragraph. Here the CSS :first-line rule |
| sets the text to a green, sans-serif font. Then, the CSS :first-letter |
| rule sets the font size to 3em, and makes the text bold. And here's some |
| more text to pad out the paragraph and make things look nice (or, at least, |
| to illustrate the problem correctly). |
| </p> |
| |
| <p class="floated"> Here is the second paragraph. This is just like |
| the first except that the rule p.floated:first-letter floats the first |
| letter to the left. However, this floated element should still inherit |
| the font properties (green and sans-serif) from the first-line: selector. |
| It does not -- instead, the font is black, and uses the serif font. |
| .... And here's some |
| more text .... |
| </p> |
| |
| |
| </body></html> |
