position of a 'collapsed through' box
A series of test cases, each is wrapped in a container with gray horizontal lines in the background, top/bottom borders to avoid margins escaping.
Elements used in the test cases:
- T is a 'collapsed through' box. An absolutely positioned child creating a red line shows its position (top border edge = bottom border edge).
- C is an empty 'collapsed through' child of T (not always present).
- P is the parent of T (not always present).
- E1, E2 are (non-empty, 10px high) siblings of T (not always both present); E1 is yellow, above T; E2 is aqua, below T.
1 T margin-top: 10px
2 T margin-bottom: 10px
2b T margin-bottom: 10px, no P
3 T margin-top: 10px, P margin-top: 20px
4 T margin-bottom: 10px, P margin-top: 20px
5 T margin-top: 10px, C margin-top: 20px
6 T margin-bottom: 10px, C margin-bottom: 20px
1a T margin-top: 10px
2a T margin-bottom: 10px
3a T margin-top: 10px, P margin-bottom: 20px
4a T margin-bottom: 10px, P margin-bottom: 20px
5a T margin-top: 10px, C margin-top: 20px
6a T margin-bottom: 10px, C margin-bottom: 20px
7 T margin-top: 10px, C margin-bottom: 20px
8 T margin-bottom: 10px, C margin-top: 20px
9 T margin-top: 20px, C margin-top: 10px
10 T margin-bottom: 20px, C margin-bottom: 10px
11 T margin-top: 20px, C margin-bottom: 10px
12 T margin-bottom: 20px, C margin-top: 10px
13 T margin-bottom: 20px, margin-top: 10px
14 T margin-bottom: 20px, margin-top: 10px, E1 margin-bottom: 30px, E2 margin-top: 30px
15 T margin-bottom: 20px, margin-top: 40px, E1 margin-bottom: 20px, E2 margin-top: 10px
16 T margin-bottom: 40px, margin-top: 30px, E1 margin-bottom: 20px, E2 margin-top: 50px
17 C margin-bottom: 20px, margin-top: 10px
18 C margin-bottom: 20px, margin-top: 10px, E1 margin-bottom: 30px, E2 margin-top: 30px
19 C margin-bottom: 20px, margin-top: 40px, E1 margin-bottom: 20px, E2 margin-top: 10px
20 C margin-bottom: 40px, margin-top: 30px, E1 margin-bottom: 20px, E2 margin-top: 50px
Similar test cases, using a float child to reveal the position of a 'collapsed through' box
CSS tests home