Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests

Advanced tests

This test

RichInStyle.com test pages: boxes - max-height

This doesn't have an explicitly set height. However, it does have max-height: 0. This means that it should have no red background visible

Spacer

This has height: 500px and max-height: 50px. As a result, it should be 50 pixels high.

Spacer

This has height: 500px. It also has max-height: 10%. Since this element doesn't have an explicitly height-set containing block, that will be interpreted as none (not auto as the spec incorrectly says), and as a result the element will have a huge height.


Some text that is boring.

Spacer

Some text that is boring.

The first of the two examples above should result in a height of 0 because max-height: -100px is not illegal and therefore will not be ignored. It will therefore look the same as the next element. The second, however, has height: -100px, which is illegal, and which will therefore be rendered as height: auto, that is to say the height that results from the amount of content in the element.

Some text that is boring.