This Paragraph has text-transform:lowercase and font-variant:small-caps on the ::first-line pseudo-element and font-size:200% & text-transform:uppercase on the ::first-letter pseudo-element. This is the default style for all paragraphs. To demonstrate WebKit's ::first-line font-family bugs, each fallback font is set to the opposite expected type: font-family:Quattrocento,sans-serif & font-family:Cabin,serif.
“I’ve included this paragraph,” he said, to demonstrate whether or not the ::first-letter pseudo-element handles punctuation characters properly. The open quote and apostrophe should be included.
This paragraph has font-variant:normal on the ::first-line pseudo-element. Otherwise it inherits default styles.
This paragraph has font-variant: normal and text-transorm:uppercase on the ::first-line pseudo-element. Otherwise it inherits default styles.
This paragraph has font-family: Cabin on the ::first-letter pseudo-element.
This paragraph has font-variant:normal on the ::first-line pseudo-element and font-family: Cabin on the ::first-letter pseudo-element.
This paragraph uses JavaScript to wrap its first letter in a span after a 2 second setTimeout call. The span receives font-size:500% and color:#ac4800 styling.
This paragraph does the same as above, only it also sets the ::first-line element to font-variant:normal as well. Also, the span for this paragraph receives an extra display:inline-block.
This paragraph will render initially in Quattrocento, but a class will be set on it after 2 seconds to change it to font-family:Cabin,cursive.