Vertical Block Growth

If you have any comments to make regarding this test, e-mail ian@hixie.ch.

Prerequisites
Browsers that are subjected to this test should support the CSS box model and the CSS2 overflow property.

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

Short, 10em
Tall, 20em

Note the red bordered container should span the width of the document and sport scroll bars. The scroll bars should not be operative (although they should be visible) in the case above, however in the tests below they will be needed to check that the correct behaviour is present, as generally the boxes will take more that 44ems of height, including the spillages.

1. Fixed Longitudinal Dimensions

If a box is given a height, then it should have that height. End of story. Regardless of contents. Regardless of parentage. Below should be two boxes, the inner one sticking out of the outer one on the bottom They should stretch across the root element's content area.

Note. Those boxes should be there! The vertical margins should not collapse since they are given explicit widths.

2. Fixed Longitudinal Dimensions, with contents

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

I am a paragraph in a short box.

I am a paragraph in a tall box. The tall box should stick out of the narrow box.

3. Fixed Longitudinal Dimensions, with tall contents that flow

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

I am a paragraph in a short box. I am very long, though, so I should flow out of the bottom of the box. I am container inside a DIV with height of auto, which should just serve to provide a border around me, the inner paragraph. Because the inner DIV has no explicit height, it should grow to accommodate me, and so stick out of the bottom of the short box I was talking about before.

Because your window may be quite large, I will now repeat myself a few times.

I am a paragraph in a short box. I am very long, though, so I should flow out of the bottom of the box. I am container inside a DIV with height of auto, which should just serve to provide a border around me, the inner paragraph. Because the inner DIV has no explicit height, it should grow to accommodate me, and so stick out of the bottom of the short box I was talking about before.

I am a paragraph in a short box. I am very long, though, so I should flow out of the bottom of the box. I am container inside a DIV with height of auto, which should just serve to provide a border around me, the inner paragraph. Because the inner DIV has no explicit height, it should grow to accommodate me, and so stick out of the bottom of the short box I was talking about before.

I am a paragraph in a short box. I am very long, though, so I should flow out of the bottom of the box. I am container inside a DIV with height of auto, which should just serve to provide a border around me, the inner paragraph. Because the inner DIV has no explicit height, it should grow to accommodate me, and so stick out of the bottom of the short box I was talking about before.

I am a paragraph in a short box. I am very long, though, so I should flow out of the bottom of the box. I am container inside a DIV with height of auto, which should just serve to provide a border around me, the inner paragraph. Because the inner DIV has no explicit height, it should grow to accommodate me, and so stick out of the bottom of the short box I was talking about before.

I am a paragraph in a short box. I am very long, though, so I should flow out of the bottom of the box. I am container inside a DIV with height of auto, which should just serve to provide a border around me, the inner paragraph. Because the inner DIV has no explicit height, it should grow to accommodate me, and so stick out of the bottom of the short box I was talking about before.

4. Fixed Longitudinal 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 short box.


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

Submit Results

How does your browser fare on this test?

Up to the Evil Tests Page.

Last updated in January 1999.