Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests

Advanced tests

This test

RichInStyle.com test pages: generated content - :before

Inline examples

This should look the same as normal - it has a :before with a red background, but since that element is empty and width is ineffective, no effect will be seen.

Consideration of empty inline generated content for line box implementation test

WORDSMEANTHINGS WORDSMEANTHINGS WORDSMEANTHINGS WORDSMEANTHINGS

The example above should look like only one letter - in fact there are four. If it is apparent that there are many (i.e., there is about 20px between the letters instead of 3px), the test is destroyed due to buggy support of the line box model. If this is the case, the tests below will all look the same, and the test is void ab initio.

The example below should look very substantially different from the example before - it is preceded by :before with font-size: 10px, which when aligned along the element's baseline, will substantially increase the baseline spacing.

WORDSMEANTHINGS WORDSMEANTHINGS WORDSMEANTHINGS WORDSMEANTHINGS

Even if the line box implementation is buggy, regardless of anything else, the following text should look totally different - the words should now be separate lines (like this), but with less line height.

WORDSMEANTHINGS WORDSMEANTHINGS WORDSMEANTHINGS WORDSMEANTHINGS

Block examples

This should have a 100px red space above it - it has a block :before set to height: 100px and width: auto means 100%.