Collapsing Elements

This document is open to debate, I have not examined the issues in depth and may have made any number of mistakes in the assertions below. If you have any comments to make, e-mail ian@hixie.ch.

Prerequisites

Browsers that are subjected to this test should support CSS; in particular class attributes with multiple keywords and the height and width properties. They also need to support HTML's rules regarding paragraphs.

1. Should Collapse

There should be nothing coloured between this paragraph and the next header; only some brief text. This is because all the tests below should collapse away into nothingness. This is because HTML4, section 9.3.1, says: User agents should ignore empty P elements. Also, the final two tests examine the collapsing margins rules of CSS.

1. Control - there should be the same amount of space between this LI and the next as there is between all subsequent list items in this list.
2. Empty P:

3. Empty P:

4. Empty P:

5. Empty P:

6. Empty P:

7. Empty P (*):

8. Empty P (*):

9. Empty P (*):

10. Empty P (*):

11. Empty P (*):

12. Adjacent margins collapse, even top/bottom of a DIV:
13. Adjacent margins collapse, even top/bottom of a DIV separated by a collapsed P:
14. Adjacent margins collapse, even top/bottom of a DIV separated by a collapsed P:
15. Adjacent margins collapse, even top/bottom of a DIV separated by a collapsed P:
16. Adjacent margins collapse, even top/bottom of a DIV separated by a hidden DIV:
17. Adjacent margins collapse, even top/bottom of a DIV (*):
18. Adjacent margins collapse, even top/bottom of a DIV separated by a collapsed P (*):
19. World Economy:

Note. Some of these tests (denoted by '*') are also tested by the CR/LF test.

2. Should Not Collapse

Below, each description should have a teal box of some sort underneath it.

1. Non-empty P (†):

2. Non-empty P (†):

3. Non-empty P (†):

4. Non-empty P (†):

5. Non-empty P:

    

6. Non-empty P:

    

7. Non-empty P:

    

8. Non-empty P:

    

9. Sized DIV:
10. Sized DIV (same as previous one) (*):
11. Sized DIV:
12. Sized DIV (same as previous one) (*):
13. DIV margins not adjacent (separated by a border - you should see an aqua band across the page):
14. DIV margins not adjacent (separated by padding - you should see a teal band across the page):

Note. Some of these tests (denoted by '†') may be considered empty by some browsers, since they only contain whitespace. I will not consider this a bug.

Submit Results

Don't forget to ignore tests marked '†' when submitting results! Non-CSS browsers need only concern themselves with tests 1.1 to 1.11 and 2.5 to 2.8.

Up to the Evil Tests Page.

Bugzilla: Bug 2589

Last updated in March 1999.