Floating 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, including the
float property and the
CSS2 overflow property.
For reference, here is how your browser renders the float boxes used in this test:
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. Floating Element Containing Too Much Text!
If a box is given a height, then it should have that height. End of
story. Regardless of contents. Regardless of parentage. If the
overflow property has not been set, then content should
overflow (spill out of the bottom).
This is text at the top of the float. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom.
This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom.
This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom.
This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom.
This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom.
Below this yellow bar there should be a green bar, a blue bar, a red bar, and a white bar, all of exactly the same height.
2. Floating Element Containing So Much Text It Overflows The Parent!
This is basically the same test as above, however in this case
there is an easter egg at the end of the filler text. You should be
able to scroll to read this message.
This is text at the top of the float. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom.
This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom.
This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom.
This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom.
This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom. This is text in the float. It should spill past the bottom.
Cheep! Cheep!
3. Floating element in a container.
Below, there should be a single yellow
bar across the viewport. It has text in it.
I should be on the right.
I should be on the left, next to the float that is on the right.
This is because a float should extend out of its parent;
floats should not be constrained by their parents and parents should
not be constrained by floats. Hence, in the above test, the first DIV
(the one that contains the floating DIV) will have a height of
precisely zero.
4. Big floating element in a container.
Below, the right part should be taller than the left
part. Their tops should be at the same height. Under the left part
there should be another piece of text, which should wrap around the
text to the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the right.
I should be on the left, next to the float that is on the right.
I should wrap around the float. There should not be any overlap whatsoever.
I should wrap around the float as well. There
should not be any overlap whatsoever. Once again for luck: I should
wrap around the float as well. There should not be any overlap
whatsoever.
Submit Results
Up to the Evil Tests Page.
Bugzilla: Bug 2751 (main - fixed); Bug 2180 (scrollbar bug); Bug 2745 (reflow bug - fixed)
Last updated in March 1999.