Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests

Advanced tests

This test

RichInStyle.com test pages: boxes - min-width

This has a width of 50% and a minimum width of 100%. This means it should be exactly as wide as the element beneath it:
This is the element with which you can compare the previous one.

This has min-width: 50%; margin-left: 20%; margin-right: 50%. As a result, it should look the same as the following element, which has margin-left: 20%; margin-right: 30%, since the result of max-width is to re-do the box model equation with that value for max-width.

This should look the same as the preceding element.

Zero width test

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The two elements above should look exactly the same - one has min-width: 0 and width: 0; the other simply width: 0. The result should be identical elements. This is because UAs may refuse to honor min-widths that are too small, and since they may do so, they should clip them to values that are appropriate.