CSS clearance computation

Note: The definition and computation of clearance at 9.5.2, which was rather unclear and inconsistent, has been rewritten in the CSS 2.1 Working Draft dated 07 December 2010. The following is an attempt to review various cases according to the current formulation, which is of much clearer interpretation.

In the two three columns below ('hypothetical', 'clear', 'reference') there is a series of test cases. Each is wrapped in a container with gray horizontal lines in the background, with top/bottom borders to avoid margins escaping, floated to ensure float enclosure. The 'real' test cases are in the second column, all including an element with clear. The first column is like the second one, but with that element not having the 'clear' property and having a bottom border: this should put that element in its 'hypothetical position'. The third column is a sort of reference rendering (not using clear; obtained with a combination of different margins, removal of the float property, ...).

Common elements to all test cases:

Further properties and elements are listed for each test case in the 'description' column.

The last column describes briefly what should happen and the behavior of Fx 3.6, IE 9 (preview 8023), and Saf 5. Opera 11 is not mentioned at the moment, since its behavior is different (presumably wrong) in too many cases. Fx 3.6 and IE 9 seem to have identical behaviour and follow the spec, except for point 2 in 9.5.2 ("The amount necessary to place the top border edge of the block at its hypothetical position"), which is ignored, allowing an element with clear to go "higher" than its hypothetical position).


hypothetical
clear
reference
description
comments

1a R has margin-top: 10px
clearance 10px

1b R has margin-top: 20px
clearance needed but 0

1c R has margin-top: 30px
clearance needed but 0. In Fx, IE9 and Saf too negative clearance -10px, against 9.5.2 point 2

2 P has margin-top: 10px, R has margin-top: 40px
clearance -10px. In Fx, IE9 and Saf too negative clearance -20px, against 9.5.2 point 2

3a R is empty, has margin-top: 10px
clearance 10px

3b R is empty, has margin-top: 20px
clearance needed but 0

3c R is empty, has margin-top: 30px
clearance needed but 0. In Fx, IE9 and Saf too negative clearance -10px, against 9.5.2, point 2

4a F is preceded by a yellow box with margin-bottom: 20px, R has margin-top: 10px, no P
clearance 10px

4b F is preceded by a yellow box with margin-bottom: 20px, R has margin-top: 20px, no P
clearance needed but 0

4c F is preceded by a yellow box with margin-bottom: 20px, R has margin-top: 30px, no P
negative clearance -10px

4d F is preceded by a yellow box with margin-bottom: 20px, R has margin-top: 40px, no P
no clearance needed

5a F is preceded by a yellow box with margin-bottom: 20px, R is empty, has margin-top: 10px
10px clearance

5b F is preceded by a yellow box with margin-bottom: 20px, R is empty, has margin-top: 20px
clearance needed but 0

5c F is preceded by a yellow box with margin-bottom: 20px, R is empty, has margin-top: 30px
negative clearance -10px

5d F is preceded by a yellow box with margin-bottom: 20px, R is empty, has margin-top: 40px
no clearance needed, P does not expand

6a R is empty, has margin-top: 10px; margin-bottom: 40px, P has a top border
clearance 10px, bottom margin does not collapse with P bottom. In Saf wrong height of the parent

6b R is empty, has margin-top: 20px; margin-bottom: 40px, P has a top border
no clearance needed, P does not expand

6c R is empty, has margin-top: 30px; margin-bottom: 40px, P has a top border
no clearance needed, P does not expand

7a R is empty, has margin-top: 10px; margin-bottom: 40px
clearance 10px. In Saf wrong height of the parent

7b R is empty, has margin-top: 20px; margin-bottom: 40px
clearance needed but 0. In Saf wrong height of the parent

7c R is empty, has margin-top: 30px; margin-bottom: 40px
clearance needed but 0. In Fx e Saf too negative clearance -10px, against 9.5.2 point 2. In Saf wrong height of the parent

7d R is empty, has margin-top: 40px; margin-bottom: 40px
clearance needed but 0. In Fx e Saf too negative clearance -20px, against 9.5.2 point 2. In Saf wrong height of the parent

8a R is empty, has margin-top: 10px, P has a top border
clearance 10px

8b R is empty, has margin-top: 20px, P has a top border
no clearance needed, P does not expand

8c R is empty, has margin-top: 30px, P has a top border
no clearance needed, P does not expand

9a R is empty, has margin-top: 10px, is preceded by an empty box with margin-bottom: 10px, P has a top border
clearance needed but 0

9b R is empty, has margin-top: 15px, is preceded by an empty box with margin-bottom: 15px, P has a top border
negative clearance -10px

9c R is empty, has margin-top: 20px, is preceded by an empty box with margin-bottom: 20px, P has a top border
no clearance needed, P does not expand

10a R is empty, is followed by a yellow box with margin-top: 30px, no P
clearance 20px

10b R is empty, has margin-top: 10px, is followed by a yellow box with margin-top: 30px, no P
clearance 10px, margin-top on subsequent sibling collapses with R margin-top

10c R is empty, has margin-top: 20px, is followed by a yellow box with margin-top: 30px, no P
no clearance needed, margin-top on subsequent sibling collapses with R margin-top

12a R is empty, has margin-top: 10px, is followed by an empty box with margin-top: 30px, P has a top border
clearance 10px, margin-top on subsequent sibling collapses with R margin-top, but not with P bottom. In Saf wrong height of the parent

12b R is empty, has margin-top: 20px, is followed by an empty box with margin-top: 30px, P has a top border
no clearance needed, margin-top on subsequent sibling collapses with R margin-top and with P bottom, P does not expand

12c R is empty, has margin-top: 30px, is followed by an empty box with margin-top: 30px, P has a top border
no clearance needed, margin-top on subsequent sibling collapses with R margin-top and with P bottom, P does not expand

13a R has a yellow first child with margin-top: 10px
clearance 10px

13b R has a yellow first child with margin-top: 20px
clearance needed but 0

13c R has a yellow first child with margin-top: 30px
clearence needed but 0. In Fx, IE9 and Saf too negative clearance -10px, against 9.5.2 point 2

14a R has a yellow first child with margin-top: 10px, P has a top border
clearance 10px

14b R has a yellow first child with margin-top: 20px, P has a top border
no clearance needed

14c R has a yellow first child with margin-top: 30px, P has a top border
no clearance needed

15a R is collapsed through, has an empty first child with margin-top: 10px, P has a top border
clearance 10px

15b R is collapsed through, has an empty first child with margin-top: 20px, P has a top border
no clearance needed, P does not expand

15c R is collapsed through, has an empty first child with margin-top: 30px, P has a top border
no clearance needed, P does not expand

16a R is collapsed through, has an empty first child with margin-top: 10px
clearance 10px

16b R is collapsed through, has an empty first child with margin-top: 20px
clearance needed but 0

16c R is collapsed through, has an empty first child with margin-top: 30px
clearance needed but 0. In Fx, IE9 and Saf too negative clearance -10px, against 9.5.2 point 2

17a R is empty, is followed by an empty box with margin-top: 30px
clearance 20px, margin-top on subsequent sibling collapses with R margin-top but not with P bottom. In Saf wrong height of the parent

17b R is empty, has margin-top: 10px, is followed by an empty box with margin-top: 30px
clearance 10px, margin-top on subsequent sibling collapses with R margin-top but not with P bottom. In Saf wrong height of the parent

17c R is empty, has margin-top: 20px, is followed by an empty box with margin-top: 30px
clearance needed but 0, margin-top on subsequent sibling collapses with R margin-top but not with P bottom. In Saf wrong height of the parent

17d R is empty, has margin-top: 30px, is followed by an empty box with margin-top: 30px
clearance needed but 0, margin-top on subsequent sibling collapses with R margin-top but not with P bottom. In Fx e Saf too negative clearance -10px, against 9.5.2 point 2. In Saf wrong height of the parent

18a R is empty, is preceded by a yellow box with height: 10px
clearance 10px

18b R is empty, is preceded by a yellow box with height: 10px, margin-bottom: 10px
no clearance needed, P does not expand

18c R is empty, is preceded by a yellow box with height: 10px, margin-bottom: 20px
no clearance needed, P does not expand

19a R is empty, has margin-top: 10px is wrapped in parent with margin-top: 10px, no P
clearance needed but 0

19b R is empty, has margin-top: 10px is wrapped in parent with margin-top: 15px, no P
negative clearance -5px

19c R is empty, has margin-top: 10px is wrapped in parent with margin-top: 20px, no P
no clearance needed

20a R is empty, has margin-top: 40px is wrapped in parent with margin-top: 10px
clearance -10px. In Fx, IE9 and Saf too negative clearance -20px, against 9.5.2 point 2

20b R is empty, has margin-top: 40px is wrapped in parent with margin-top: 20px
negative clearance -20px

21a R is collapsed through, has margin-top: 10px, margin-bottom: 20px, is followed by a yellow box with margin-top: 40px, P has a top border
clearance 10px. In Saf wrong height of the parent

21b R is collapsed through, has margin-top: 10px, margin-bottom 30px, is followed by a yellow box with margin-top: 30px, P has a top border
clearance 10px. In Saf wrong height of the parent

21c R is collapsed through, has margin-top: 20px, margin-bottom: 30px, is followed by a yellow box with margin-top: 30px, P has a top border
no clearance needed

CSS tests home