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:

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.

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 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 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

Up to the Evil Tests Page.

Bugzilla: Bug 2747

Last updated in January 1999.