Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests

Advanced tests

This test

RichInStyle.com test pages: boxes - display: run-in

Basic support

This is a run-in heading.

And this should follow to its right without so much a space; the heading should be the same size as the H2 element above it and the line box height should be that of the heading.

Containing block end test

This is a run-in heading.

And this should follow to its right without so much a space; the heading should be the same size as the H3 element above it and the line box height should be that of the heading.

Run-in/absolute and floated interaction test

This heading should not run-in.

This element is floated, and therefore the heading should not be run-in to the P element.

This heading should (?) run-in.

In theory the heading should not run-in to this element, since there is an intervening absolutely positioned element. In practice, however, I believe the spec is in error, and that in fact it should.

Run-in/anonymous block box test

This heading should run-in.

That the block-level box that surrounds this content is anonymous should not affect the fact of the heading's run-in status.

Margins

This is a run-in heading.

This should be to the right of the heading without even as much as an intervening space. The whole thing should have a red background; however, there should be 100 pixels of whitespace to the left of all of it.

Very long test.

This element is very long indeed. It rambles on and on interminably. In fact, it is so long and pointless, you might wonder why I've bothered with it all. If you really must know, it is so you can check whether your browser correctly treats display: run-in. For your sake (and your browser's), I sincerely hope it does. If it does not, however, it is not great loss, since display: run-in is not the most important thing in the world. Perhaps you could be consoled if you realised that you can achieve similar effects with floats (although sadly with them you are currently required to set a width - probably not what you want (although not, I might add, under the RichInStyle.com proposal)).

Here's another element.

The above should look exactly the same as:

This element is very long indeed. It rambles on and on interminably. In fact, it is so long and pointless, you might wonder why I've bothered with it all. If you really must know, it is so you can check whether your browser correctly treats display: run-in. For your sake (and your browser's), I sincerely hope it does. If it does not, however, it is not great loss, since display: run-in is not the most important thing in the world. Perhaps you could be consoled if you realised that you can achieve similar effects with floats (although sadly with them you are currently required to set a width - probably not what you want (although not, I might add, under the RichInStyle.com proposal)). Here's another element.