Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests

Advanced tests

This test

RichInStyle.com test pages: boxes - display: compact

Basic test

    

This should have a small block of red to its left. The two backgrounds should be separated by a large distance.

Ineffectualness of width test

 

This should have a tiny block of red to its left. The two backgrounds should be separated by a large distance. This is because the width property has no effect on inline elements, and in the first instance compact elements are treated as inline.

Line box height test

This should have a huge line height. This is due to a DIV to its left that has a line-height: 100px. This will cause (the first line only) of this element to have a huge test. This is true even though the DIV has zero width, empty elements being considered for the purpose of line box height calculation.

Spacer

h

This should have a huge line height. This is due to a DIV to its left that has a line-height: 100px. This will cause (the first line only) of this element to have a huge test. This is true even though the DIV has zero width, empty elements being considered for the purpose of line box height calculation.

Ineffectualness of height test

This.

This should look perfectly normal in terms of height and line height, despite having a compact element in its left margin, which has height: 500px, height having no effect on inline elements.

Multiple line test

This element rambles on for quite a time, meaning that there is no chance whatsoever that it will fit on a single line. This means that the element cannot behave as a compact element, so it will look like an ordinary block element.

The block-level element that it could collapse into.

Text-align test

Right.

The element to the left should follow on without so much as a space to this one. Its background should only be behind the text, the effect of display: compact being to create a containing block of width equal to the left margin of the following element, with the proviso that if the element requires more than one line box, the result is to force it to revert to block status. This means that as an inline element within a block, only the space behind the 'Right' text should be colored.

Not justified.

The text to the left of this element should not be justified.

Margin-top test

Text.

The 'Text' should be to the left of this - although this has a big top margin, since it is formatted as part of the first line box (albeit to the left thereof), it should be there.

Followed with non-block test

Hello

This should not have 'Hello' in its left margin.