Horizontal Block Growth

Prerequisites
Browsers that are subjected to this test should support the CSS box model.

For reference, here is how your browser renders the narrow and wide boxes used in this test:

Narrow, 20em
Wide, 30em

1. Fixed Lateral Dimensions

If a box is given a width, then it should have that width. End of story. Regardless of contents. Regardless of parentage. Below should be two boxes, the inner one sticking out of the outer one.

Note. Those boxes should be there! The vertical margins should not collapse since they are separated by padding and margins.

2. Fixed Lateral Dimensions, with contents

If a box is given a width, then it should have that width. End of story. Regardless of contents. Regardless of parentage.

I am a paragraph in a narrow box. I should wrap within the containing block area of this narrow box, which is 20ems. The narrow box has padding 1em, border 1em and margin 1em.

I am a paragraph in a wide box. I should wrap within the containing block area of this wide box, which is 30ems. This wide box also has padding 1em, border 1em and margin 1em, just like the narrow box within which it is contained.

The wide box should stick out of the narrow box.

3. Fixed Lateral Dimensions, with contents that are implicitly wider.

If a box is given a width, then it should have that width. This still applies, even if the contents are implicitly bigger, such as a wide PRE. Then the PRE should stick out.

I am a paragraph in a narrow box. I should wrap within the containing block area of this narrow box, which is 20ems. The narrow box has padding 1em, border 1em and margin 1em.

  I am a PRE in the narrow box. I should stick out of the containing block area of this narrow box, which is 20ems. This PRE also has padding 1em, border 1em and margin 1em, just like the narrow box within which it is contained.
  

3. Implicit Lateral Dimensions, with contents that are implicitly wider.

If a box has both width and margins of auto, then the margins are set to zero and the width is then set so as to make the seven horizontal properties (padding, border, margin and width) add up to the width of the containing block. This still applies, even if the contents are implicitly bigger, such as a wide PRE. Then the PRE should stick out.

I am a paragraph in a narrow box. I should wrap within the containing block area of this narrow box, which is 20ems. The narrow box has padding 1em, border 1em and margin 1em.

I am a paragraph in a box that has a width of auto and so should fit perfectly inside the narrow container, as described above.

  I am a PRE in a box with no explicit width. I should therefore stick out of both this containing block and its containing block right out into the root element's rendering area. This PRE also has padding 1em, border 1em and margin 1em, just like the two boxes within which it is contained.
     

Submit Results

How does your browser fare on this test?


Up to the Evil Tests Page.

Bugzilla: Bug 2747

Last updated in January 1999.