summaryrefslogtreecommitdiffstats
path: root/layout/reftests/margin-collapsing
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/margin-collapsing')
-rw-r--r--layout/reftests/margin-collapsing/block-abs-pos-1-dyn.html39
-rw-r--r--layout/reftests/margin-collapsing/block-abs-pos-1-ref.html34
-rw-r--r--layout/reftests/margin-collapsing/block-abs-pos-1.html33
-rw-r--r--layout/reftests/margin-collapsing/block-abs-pos-2-dyn.html31
-rw-r--r--layout/reftests/margin-collapsing/block-abs-pos-2-ref.html23
-rw-r--r--layout/reftests/margin-collapsing/block-abs-pos-2-ref2.html28
-rw-r--r--layout/reftests/margin-collapsing/block-abs-pos-2.html24
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-1-ref.html20
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-1a-dyn.html31
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-1a.html23
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-1b-dyn.html31
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-1b.html23
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-1c-dyn.html31
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-1c.html23
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-2-dyn.html30
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-2-ref.html20
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-2.html23
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-3-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-3-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-3.html25
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-4-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-4-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-4.html25
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-5-dyn.html30
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-5-ref.html20
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-5.html23
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-6-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-6-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-6.html25
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-7-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-7-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-7.html25
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-8-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-8a-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-8a.html25
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-8b-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-8b.html25
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-8c-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-auto-height-last-child-8c.html25
-rw-r--r--layout/reftests/margin-collapsing/block-clear-1a-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-clear-1a.html30
-rw-r--r--layout/reftests/margin-collapsing/block-clear-1b-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-clear-1b.html30
-rw-r--r--layout/reftests/margin-collapsing/block-clear-2-noref.html18
-rw-r--r--layout/reftests/margin-collapsing/block-clear-2-ref.html18
-rw-r--r--layout/reftests/margin-collapsing/block-clear-2.html27
-rw-r--r--layout/reftests/margin-collapsing/block-clear-3-ref-left.html29
-rw-r--r--layout/reftests/margin-collapsing/block-clear-3-ref-right.html29
-rw-r--r--layout/reftests/margin-collapsing/block-clear-3a.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-3b.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-3c.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-3d.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-3e.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-3f.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-4-ref-left.html29
-rw-r--r--layout/reftests/margin-collapsing/block-clear-4-ref-right.html29
-rw-r--r--layout/reftests/margin-collapsing/block-clear-4a.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-4b.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-4c.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-4d.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-4e.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-4f.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-5-left-ref.html27
-rw-r--r--layout/reftests/margin-collapsing/block-clear-5-right-ref.html27
-rw-r--r--layout/reftests/margin-collapsing/block-clear-5a.html31
-rw-r--r--layout/reftests/margin-collapsing/block-clear-5b.html31
-rw-r--r--layout/reftests/margin-collapsing/block-clear-5c.html31
-rw-r--r--layout/reftests/margin-collapsing/block-clear-5d.html31
-rw-r--r--layout/reftests/margin-collapsing/block-clear-5e.html31
-rw-r--r--layout/reftests/margin-collapsing/block-clear-5f.html31
-rw-r--r--layout/reftests/margin-collapsing/block-clear-5g.html31
-rw-r--r--layout/reftests/margin-collapsing/block-clear-5h.html31
-rw-r--r--layout/reftests/margin-collapsing/block-clear-6a-left.html32
-rw-r--r--layout/reftests/margin-collapsing/block-clear-6abc-left-ref.html27
-rw-r--r--layout/reftests/margin-collapsing/block-clear-6b-left.html32
-rw-r--r--layout/reftests/margin-collapsing/block-clear-6c-left.html32
-rw-r--r--layout/reftests/margin-collapsing/block-clear-6d-left.html33
-rw-r--r--layout/reftests/margin-collapsing/block-clear-6def-left-ref1.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-6def-left-ref2.html31
-rw-r--r--layout/reftests/margin-collapsing/block-clear-6e-left.html33
-rw-r--r--layout/reftests/margin-collapsing/block-clear-6f-left.html33
-rw-r--r--layout/reftests/margin-collapsing/block-clear-7a-left.html37
-rw-r--r--layout/reftests/margin-collapsing/block-clear-7abcd-left-ref.html26
-rw-r--r--layout/reftests/margin-collapsing/block-clear-7b-left.html37
-rw-r--r--layout/reftests/margin-collapsing/block-clear-7c-left.html37
-rw-r--r--layout/reftests/margin-collapsing/block-clear-7d-left.html37
-rw-r--r--layout/reftests/margin-collapsing/block-clear-7e-left.html38
-rw-r--r--layout/reftests/margin-collapsing/block-clear-7efgh-left-ref1.html28
-rw-r--r--layout/reftests/margin-collapsing/block-clear-7efgh-left-ref2.html30
-rw-r--r--layout/reftests/margin-collapsing/block-clear-7f-left.html38
-rw-r--r--layout/reftests/margin-collapsing/block-clear-7g-left.html38
-rw-r--r--layout/reftests/margin-collapsing/block-clear-7h-left.html38
-rw-r--r--layout/reftests/margin-collapsing/block-em-length-1-dyn.html31
-rw-r--r--layout/reftests/margin-collapsing/block-em-length-1-ref.html27
-rw-r--r--layout/reftests/margin-collapsing/block-em-length-1.html25
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-1-ref.html18
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-1a-dyn.html31
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-1a.html23
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-1b-dyn.html31
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-1b.html23
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-1c-dyn.html31
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-1c.html23
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-2-dyn.html30
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-2-ref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-2.html23
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-3-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-3-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-3.html25
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-4-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-4-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-4.html25
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-5-dyn.html30
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-5-ref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-5.html23
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-6-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-6-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-6.html25
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-7-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-7-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-7.html25
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-8-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-8a-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-8a.html25
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-8b-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-8b.html25
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-8c-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-first-child-8c.html25
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-1-ref.html25
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-1a-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-1a.html26
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-1b-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-1b.html26
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-2-ref.html25
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-2a-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-2a.html26
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-2b-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-2b.html26
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-3-ref.html25
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-3a-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-3a.html26
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-3b-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-3b.html26
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4-ref.html25
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4a-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4b-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4c-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4d-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4d.html27
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4e-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4e.html27
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4f-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4f.html27
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4g-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4g.html27
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4h-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-fix-height-last-child-4h.html27
-rw-r--r--layout/reftests/margin-collapsing/block-float-1a-dyn.html28
-rw-r--r--layout/reftests/margin-collapsing/block-float-1a-noref.html24
-rw-r--r--layout/reftests/margin-collapsing/block-float-1a-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-float-1a-ref2.html24
-rw-r--r--layout/reftests/margin-collapsing/block-float-1a.html22
-rw-r--r--layout/reftests/margin-collapsing/block-float-1b-dyn.html28
-rw-r--r--layout/reftests/margin-collapsing/block-float-1b-noref.html24
-rw-r--r--layout/reftests/margin-collapsing/block-float-1b-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-float-1b-ref2.html24
-rw-r--r--layout/reftests/margin-collapsing/block-float-1b.html22
-rw-r--r--layout/reftests/margin-collapsing/block-float-2a-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/block-float-2a-noref.html24
-rw-r--r--layout/reftests/margin-collapsing/block-float-2a-ref.html31
-rw-r--r--layout/reftests/margin-collapsing/block-float-2a.html28
-rw-r--r--layout/reftests/margin-collapsing/block-float-2b-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/block-float-2b-noref.html24
-rw-r--r--layout/reftests/margin-collapsing/block-float-2b-ref.html31
-rw-r--r--layout/reftests/margin-collapsing/block-float-2b.html28
-rw-r--r--layout/reftests/margin-collapsing/block-float-3a-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/block-float-3a-ref.html23
-rw-r--r--layout/reftests/margin-collapsing/block-float-3a.html29
-rw-r--r--layout/reftests/margin-collapsing/block-float-3b-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/block-float-3b-ref.html23
-rw-r--r--layout/reftests/margin-collapsing/block-float-3b.html29
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-1-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-1-noref.html26
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-1-ref.html26
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-1.html26
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-2-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-2-noref.html26
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-2-ref.html26
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-2.html26
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-3-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-3-noref.html23
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-3-ref.html25
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-3.html23
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-4-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-4-noref.html23
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-4-ref.html25
-rw-r--r--layout/reftests/margin-collapsing/block-horizontal-4.html23
-rw-r--r--layout/reftests/margin-collapsing/block-html-body-1-noref.html23
-rw-r--r--layout/reftests/margin-collapsing/block-html-body-1-ref.html22
-rw-r--r--layout/reftests/margin-collapsing/block-html-body-1-ref2.html23
-rw-r--r--layout/reftests/margin-collapsing/block-html-body-1.html23
-rw-r--r--layout/reftests/margin-collapsing/block-html-html-1-ref.html23
-rw-r--r--layout/reftests/margin-collapsing/block-html-html-1a-dyn.html29
-rw-r--r--layout/reftests/margin-collapsing/block-html-html-1a.html21
-rw-r--r--layout/reftests/margin-collapsing/block-html-html-1b-dyn.html30
-rw-r--r--layout/reftests/margin-collapsing/block-html-html-1b.html22
-rw-r--r--layout/reftests/margin-collapsing/block-html-html-2-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/block-html-html-2-ref.html28
-rw-r--r--layout/reftests/margin-collapsing/block-html-html-2.html25
-rw-r--r--layout/reftests/margin-collapsing/block-html-html-3-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/block-html-html-3-ref.html28
-rw-r--r--layout/reftests/margin-collapsing/block-html-html-3.html26
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-1-ref.html18
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-1a.html23
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-1b.html23
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-1c.html23
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-2-ref.html25
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-2a.html26
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-2b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-2c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-2d.html27
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-3-ref.html23
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-3a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-3b.html26
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-3c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-3d.html27
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-4-ref.html23
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-4a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-4b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-4c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-last-child-4d.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-1-ref.html28
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-1a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-1a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-1b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-1b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-1c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-1c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-2-ref.html28
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-2a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-2a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-2b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-2b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-3-ref.html24
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-3a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-3a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-3b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-3b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-3c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-3c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-4-ref.html28
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-4a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-4a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-4b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-4b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-4c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-4c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-5-ref.html28
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-5a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-5a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-5b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-5b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-6-ref.html24
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-6a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-6a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-6b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-6b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-6c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-6c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-7-ref.html28
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-7a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-7a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-7b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-7b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-7c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-7c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-8-ref.html24
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-8a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-8a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-8b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-8b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-9-ref.html26
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-9a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-9a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-9b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-9b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-9c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-max-height-last-child-9c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-1-ref.html29
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-1a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-1a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-1b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-1b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-1c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-1c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-2-ref.html29
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-2a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-2a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-2b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-2b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-3-ref.html25
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-3a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-3a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-3b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-3b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-3c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-3c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-4-ref.html28
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-4a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-4a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-4b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-4b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-4c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-4c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-5-ref.html28
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-5a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-5a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-5b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-5b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-6-ref.html24
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-6a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-6a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-6b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-6b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-6c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-6c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-7-ref.html28
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-7a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-7a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-7b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-7b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-7c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-7c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-8-ref.html28
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-8a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-8a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-8b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-8b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-9-ref.html24
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-9a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-9a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-9b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-9b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-9c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-min-height-last-child-9c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-negative-1-noref1.html20
-rw-r--r--layout/reftests/margin-collapsing/block-negative-1-noref2.html23
-rw-r--r--layout/reftests/margin-collapsing/block-negative-1-ref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-negative-1a-dyn1.html29
-rw-r--r--layout/reftests/margin-collapsing/block-negative-1a-dyn2.html28
-rw-r--r--layout/reftests/margin-collapsing/block-negative-1a.html21
-rw-r--r--layout/reftests/margin-collapsing/block-negative-1b-dyn1.html29
-rw-r--r--layout/reftests/margin-collapsing/block-negative-1b-dyn2.html28
-rw-r--r--layout/reftests/margin-collapsing/block-negative-1b.html21
-rw-r--r--layout/reftests/margin-collapsing/block-negative-2-noref1.html15
-rw-r--r--layout/reftests/margin-collapsing/block-negative-2-noref2.html19
-rw-r--r--layout/reftests/margin-collapsing/block-negative-2-ref.html14
-rw-r--r--layout/reftests/margin-collapsing/block-negative-2a-dyn1.html28
-rw-r--r--layout/reftests/margin-collapsing/block-negative-2a-dyn2.html27
-rw-r--r--layout/reftests/margin-collapsing/block-negative-2a.html20
-rw-r--r--layout/reftests/margin-collapsing/block-negative-2b-dyn1.html28
-rw-r--r--layout/reftests/margin-collapsing/block-negative-2b-dyn2.html27
-rw-r--r--layout/reftests/margin-collapsing/block-negative-2b.html20
-rw-r--r--layout/reftests/margin-collapsing/block-negative-3-noref1.html21
-rw-r--r--layout/reftests/margin-collapsing/block-negative-3-noref2.html22
-rw-r--r--layout/reftests/margin-collapsing/block-negative-3-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-negative-3-ref2.html21
-rw-r--r--layout/reftests/margin-collapsing/block-negative-3a-dyn1.html32
-rw-r--r--layout/reftests/margin-collapsing/block-negative-3a-dyn2.html31
-rw-r--r--layout/reftests/margin-collapsing/block-negative-3a.html24
-rw-r--r--layout/reftests/margin-collapsing/block-negative-3b-dyn1.html32
-rw-r--r--layout/reftests/margin-collapsing/block-negative-3b-dyn2.html31
-rw-r--r--layout/reftests/margin-collapsing/block-negative-3b.html24
-rw-r--r--layout/reftests/margin-collapsing/block-negative-4-noref1.html22
-rw-r--r--layout/reftests/margin-collapsing/block-negative-4-noref2.html25
-rw-r--r--layout/reftests/margin-collapsing/block-negative-4-ref.html22
-rw-r--r--layout/reftests/margin-collapsing/block-negative-4-ref2.html25
-rw-r--r--layout/reftests/margin-collapsing/block-negative-4a-dyn1.html34
-rw-r--r--layout/reftests/margin-collapsing/block-negative-4a-dyn2.html33
-rw-r--r--layout/reftests/margin-collapsing/block-negative-4a.html26
-rw-r--r--layout/reftests/margin-collapsing/block-negative-4b-dyn1.html34
-rw-r--r--layout/reftests/margin-collapsing/block-negative-4b-dyn2.html33
-rw-r--r--layout/reftests/margin-collapsing/block-negative-4b.html26
-rw-r--r--layout/reftests/margin-collapsing/block-negative-5-dyn1.html34
-rw-r--r--layout/reftests/margin-collapsing/block-negative-5-dyn2.html33
-rw-r--r--layout/reftests/margin-collapsing/block-negative-5-noref1.html25
-rw-r--r--layout/reftests/margin-collapsing/block-negative-5-noref2.html24
-rw-r--r--layout/reftests/margin-collapsing/block-negative-5-ref.html22
-rw-r--r--layout/reftests/margin-collapsing/block-negative-5-ref2.html24
-rw-r--r--layout/reftests/margin-collapsing/block-negative-5.html26
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-1-ref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-1a-dyn.html23
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-1a.html20
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-1b-dyn.html23
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-1b.html20
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-1c-dyn.html23
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-1c.html20
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-1d-dyn.html23
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-1d.html20
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-2-ref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-2a-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-2a.html26
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-2b-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-2b.html26
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-2c-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-2c.html26
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-2d-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-2d.html26
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-2e-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-2e.html26
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-3-ref.html22
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-3a-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-3a.html30
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-3b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-3b.html29
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-3c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-3c.html29
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-4-ref.html22
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-4a-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-4a.html30
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-4b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-4b.html29
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-4c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-4c.html29
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-5-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-5a-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-5a.html26
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-5b-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-5b.html26
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-6-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-6-ref.html24
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-6.html28
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-7-dyn.html27
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-7-ref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-7.html21
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-8-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-8-ref.html30
-rw-r--r--layout/reftests/margin-collapsing/block-no-content-8.html28
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1-ref.html20
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1-ref2.html19
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1d-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1d.html27
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1e-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1e.html27
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1f-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-1f.html27
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2-ref.html20
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2-ref2.html19
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2a.html27
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2b.html27
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2c-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2c.html27
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2d-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2d.html27
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2e-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2e.html27
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2f-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-2f.html27
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-3-ref.html20
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-3-ref2.html19
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-3a-dyn.html41
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-3a.html31
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-3b-dyn.html41
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-3b.html31
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-3c-dyn.html41
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-3c.html31
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-3d-dyn.html41
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-3d.html31
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-4-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-4-ref.html20
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-4-ref2.html21
-rw-r--r--layout/reftests/margin-collapsing/block-non-sibling-4.html29
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-1-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-1-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-1-ref2.html25
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-1.html28
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-2-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-2-ref.html27
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-2-ref2.html32
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-2.html29
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-3-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-3-ref.html33
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-3-ref2.html37
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-3.html29
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-4-dyn.html37
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-4-ref.html33
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-4-ref2.html37
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-4.html29
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-5-ref.html26
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-5-ref2.html26
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-5a-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-5a.html28
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-5b-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-5b.html28
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-5c-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-5c-ref.html27
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-5c-ref2.html26
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-5c.html28
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-5d-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-overflow-5d.html28
-rw-r--r--layout/reftests/margin-collapsing/block-percent-1-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/block-percent-1-ref.html20
-rw-r--r--layout/reftests/margin-collapsing/block-percent-1.html26
-rw-r--r--layout/reftests/margin-collapsing/block-percent-2-dyn.html38
-rw-r--r--layout/reftests/margin-collapsing/block-percent-2-ref.html33
-rw-r--r--layout/reftests/margin-collapsing/block-percent-2.html31
-rw-r--r--layout/reftests/margin-collapsing/block-root-1a-noref1.html22
-rw-r--r--layout/reftests/margin-collapsing/block-root-1a-noref2.html22
-rw-r--r--layout/reftests/margin-collapsing/block-root-1a-ref.html18
-rw-r--r--layout/reftests/margin-collapsing/block-root-1a-ref2.html19
-rw-r--r--layout/reftests/margin-collapsing/block-root-1a.html18
-rw-r--r--layout/reftests/margin-collapsing/block-root-1b-ref.html22
-rw-r--r--layout/reftests/margin-collapsing/block-root-1b-ref2.html23
-rw-r--r--layout/reftests/margin-collapsing/block-root-1b.html23
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-1-noref.html20
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-1-noref2.html20
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-1-ref.html20
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-1-ref2.html19
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-1a-dyn.html29
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-1a.html21
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-1b-dyn.html29
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-1b.html21
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-1c-dyn.html29
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-1c.html21
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-2-dyn.html40
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-2-noref.html26
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-2-ref.html26
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-2-ref2.html29
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-2.html32
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-3-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/block-sibling-3.html29
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-html-1-ref.xhtml22
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-html-1a-dyn.xhtml28
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-html-1a.xhtml20
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-html-1b-dyn.xhtml29
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-html-1b.xhtml21
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-html-2-dyn.xhtml32
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-html-2-ref.xhtml27
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-html-2.xhtml24
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-html-3-dyn.xhtml33
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-html-3-ref.xhtml27
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-html-3.xhtml25
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-root-1-ref.xhtml24
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-root-1a.xhtml20
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-root-1b.xhtml22
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-root-2-ref.xhtml29
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-root-2.xhtml23
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-root-3-ref.xhtml29
-rw-r--r--layout/reftests/margin-collapsing/block-xhtml-root-3.xhtml26
-rw-r--r--layout/reftests/margin-collapsing/block-xml-root-1-ref.css9
-rw-r--r--layout/reftests/margin-collapsing/block-xml-root-1-ref.xml2
-rw-r--r--layout/reftests/margin-collapsing/block-xml-root-1.css10
-rw-r--r--layout/reftests/margin-collapsing/block-xml-root-1.xml2
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-1a-ref.html20
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-1a.html32
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-1b-ref.html32
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-1b.html37
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-2a-ref.html25
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-2a.html35
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-2b-ref.html23
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-2b.html33
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-2c-ref.html24
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-2c.html35
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-3-ref.html16
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-3a.html32
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-3b.html32
-rw-r--r--layout/reftests/margin-collapsing/block-zero-height-3c.html32
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-1-noref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-1-ref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-1a.html22
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-1b.html22
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-1c.html22
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-1d.html22
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-1e.html22
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-1f.html22
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-2-noref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-2a.html24
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-2ab-ref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-2b.html24
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-2c-ref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-2c.html24
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-2d.html22
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-2de-ref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-2e.html22
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-2f-ref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-2f.html22
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-3-ref.html19
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-3a.html28
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-3b.html28
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-3c.html28
-rw-r--r--layout/reftests/margin-collapsing/block-zero-min-height-3d.html28
-rw-r--r--layout/reftests/margin-collapsing/caption-child-1-dyn.html40
-rw-r--r--layout/reftests/margin-collapsing/caption-child-1-ref.html27
-rw-r--r--layout/reftests/margin-collapsing/caption-child-1.html33
-rw-r--r--layout/reftests/margin-collapsing/caption-sibling-1-noref.html33
-rw-r--r--layout/reftests/margin-collapsing/caption-sibling-1-noref2.html33
-rw-r--r--layout/reftests/margin-collapsing/caption-sibling-1-ref.html33
-rw-r--r--layout/reftests/margin-collapsing/caption-sibling-1a-dyn.html45
-rw-r--r--layout/reftests/margin-collapsing/caption-sibling-1a.html38
-rw-r--r--layout/reftests/margin-collapsing/caption-sibling-1b-dyn.html45
-rw-r--r--layout/reftests/margin-collapsing/caption-sibling-1b.html38
-rw-r--r--layout/reftests/margin-collapsing/caption-sibling-1c-dyn.html45
-rw-r--r--layout/reftests/margin-collapsing/caption-sibling-1c.html38
-rw-r--r--layout/reftests/margin-collapsing/caption-sibling-2-dyn.html46
-rw-r--r--layout/reftests/margin-collapsing/caption-sibling-2-noref.html31
-rw-r--r--layout/reftests/margin-collapsing/caption-sibling-2-ref.html31
-rw-r--r--layout/reftests/margin-collapsing/column-child-1-dyn.html32
-rw-r--r--layout/reftests/margin-collapsing/column-child-1-ref.html26
-rw-r--r--layout/reftests/margin-collapsing/column-child-1.html25
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-1-ref.html25
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-1a-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-1a.html28
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-1b-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-1b.html28
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-1c-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-1c.html28
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-2-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-2a-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-2a.html26
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-2b-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-2b.html26
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-2c-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/column-sibling-2c.html26
-rw-r--r--layout/reftests/margin-collapsing/dynamic-add-text-1-ref.html6
-rw-r--r--layout/reftests/margin-collapsing/dynamic-add-text-1.html6
-rw-r--r--layout/reftests/margin-collapsing/fieldset-child-1-dyn.html35
-rw-r--r--layout/reftests/margin-collapsing/fieldset-child-1-ref.html26
-rw-r--r--layout/reftests/margin-collapsing/fieldset-child-1.html29
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-1-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-1a-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-1a.html29
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-1b-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-1b.html29
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-1c-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-1c.html29
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-2-ref1.html19
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-2-ref2.html20
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-2a-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-2a.html27
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-2b-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-2b.html27
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-2c-dyn.html34
-rw-r--r--layout/reftests/margin-collapsing/fieldset-sibling-2c.html27
-rw-r--r--layout/reftests/margin-collapsing/inline-block-child-1-dyn.html30
-rw-r--r--layout/reftests/margin-collapsing/inline-block-child-1-ref.html21
-rw-r--r--layout/reftests/margin-collapsing/inline-block-child-1.html23
-rw-r--r--layout/reftests/margin-collapsing/inline-block-child-2-dyn.html26
-rw-r--r--layout/reftests/margin-collapsing/inline-block-child-2-noref.html19
-rw-r--r--layout/reftests/margin-collapsing/inline-block-child-2-ref.html20
-rw-r--r--layout/reftests/margin-collapsing/inline-block-child-2.html20
-rw-r--r--layout/reftests/margin-collapsing/inline-block-child-3-dyn.html29
-rw-r--r--layout/reftests/margin-collapsing/inline-block-child-3-ref.html22
-rw-r--r--layout/reftests/margin-collapsing/inline-block-child-3.html22
-rw-r--r--layout/reftests/margin-collapsing/inline-block-horizontal-1-dyn.html28
-rw-r--r--layout/reftests/margin-collapsing/inline-block-horizontal-1-noref.html19
-rw-r--r--layout/reftests/margin-collapsing/inline-block-horizontal-1-ref.html19
-rw-r--r--layout/reftests/margin-collapsing/inline-block-horizontal-1.html21
-rw-r--r--layout/reftests/margin-collapsing/inline-block-horizontal-2-dyn.html33
-rw-r--r--layout/reftests/margin-collapsing/inline-block-horizontal-2-noref.html20
-rw-r--r--layout/reftests/margin-collapsing/inline-block-horizontal-2-ref.html20
-rw-r--r--layout/reftests/margin-collapsing/inline-block-horizontal-2.html26
-rw-r--r--layout/reftests/margin-collapsing/inline-block-sibling-1-ref.html27
-rw-r--r--layout/reftests/margin-collapsing/inline-block-sibling-1a-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/inline-block-sibling-1a.html29
-rw-r--r--layout/reftests/margin-collapsing/inline-block-sibling-1b-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/inline-block-sibling-1b.html29
-rw-r--r--layout/reftests/margin-collapsing/inline-block-sibling-1c-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/inline-block-sibling-1c.html29
-rw-r--r--layout/reftests/margin-collapsing/inline-block-sibling-2-dyn.html38
-rw-r--r--layout/reftests/margin-collapsing/inline-block-sibling-2-noref.html18
-rw-r--r--layout/reftests/margin-collapsing/inline-block-sibling-2-ref.html18
-rw-r--r--layout/reftests/margin-collapsing/inline-block-sibling-2.html32
-rw-r--r--layout/reftests/margin-collapsing/inline-horizontal-1-dyn.html27
-rw-r--r--layout/reftests/margin-collapsing/inline-horizontal-1-noref.html16
-rw-r--r--layout/reftests/margin-collapsing/inline-horizontal-1-ref.html16
-rw-r--r--layout/reftests/margin-collapsing/inline-horizontal-1.html19
-rw-r--r--layout/reftests/margin-collapsing/inline-horizontal-2-dyn.html31
-rw-r--r--layout/reftests/margin-collapsing/inline-horizontal-2-noref.html17
-rw-r--r--layout/reftests/margin-collapsing/inline-horizontal-2-ref.html17
-rw-r--r--layout/reftests/margin-collapsing/inline-horizontal-2.html23
-rw-r--r--layout/reftests/margin-collapsing/inline-table-horizontal-1-dyn.html28
-rw-r--r--layout/reftests/margin-collapsing/inline-table-horizontal-1-noref.html20
-rw-r--r--layout/reftests/margin-collapsing/inline-table-horizontal-1-ref.html20
-rw-r--r--layout/reftests/margin-collapsing/inline-table-horizontal-1.html21
-rw-r--r--layout/reftests/margin-collapsing/reftest.list851
-rw-r--r--layout/reftests/margin-collapsing/scrollable-horizontal-margin-ref.html25
-rw-r--r--layout/reftests/margin-collapsing/scrollable-horizontal-margin.html24
-rw-r--r--layout/reftests/margin-collapsing/scrollable-vertical-margin-ref.html66
-rw-r--r--layout/reftests/margin-collapsing/scrollable-vertical-margin.html65
-rw-r--r--layout/reftests/margin-collapsing/table-caption-1-ref.html31
-rw-r--r--layout/reftests/margin-collapsing/table-caption-1a-dyn.html41
-rw-r--r--layout/reftests/margin-collapsing/table-caption-1a.html34
-rw-r--r--layout/reftests/margin-collapsing/table-caption-1b-dyn.html41
-rw-r--r--layout/reftests/margin-collapsing/table-caption-1b.html34
-rw-r--r--layout/reftests/margin-collapsing/table-caption-1c-dyn.html41
-rw-r--r--layout/reftests/margin-collapsing/table-caption-1c.html34
-rw-r--r--layout/reftests/margin-collapsing/table-caption-2-ref.html25
-rw-r--r--layout/reftests/margin-collapsing/table-caption-2a-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/table-caption-2a.html29
-rw-r--r--layout/reftests/margin-collapsing/table-caption-2b-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/table-caption-2b.html29
-rw-r--r--layout/reftests/margin-collapsing/table-caption-2c-dyn.html36
-rw-r--r--layout/reftests/margin-collapsing/table-caption-2c.html29
-rw-r--r--layout/reftests/margin-collapsing/table-caption-bottom-1-dyn.html48
-rw-r--r--layout/reftests/margin-collapsing/table-caption-bottom-1-ref.html42
-rw-r--r--layout/reftests/margin-collapsing/table-caption-bottom-1.html41
-rw-r--r--layout/reftests/margin-collapsing/table-caption-bottom-2-dyn.html43
-rw-r--r--layout/reftests/margin-collapsing/table-caption-bottom-2-ref.html33
-rw-r--r--layout/reftests/margin-collapsing/table-caption-bottom-2.html36
-rw-r--r--layout/reftests/margin-collapsing/table-caption-top-1-dyn.html48
-rw-r--r--layout/reftests/margin-collapsing/table-caption-top-1-ref.html42
-rw-r--r--layout/reftests/margin-collapsing/table-caption-top-1.html41
-rw-r--r--layout/reftests/margin-collapsing/table-caption-top-2-dyn.html43
-rw-r--r--layout/reftests/margin-collapsing/table-caption-top-2-ref.html33
-rw-r--r--layout/reftests/margin-collapsing/table-caption-top-2.html36
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-1-noref.html29
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-1-noref2.html29
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-1-ref.html29
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-1a-dyn.html38
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-1a.html31
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-1b-dyn.html38
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-1b.html31
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-1c-dyn.html38
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-1c.html31
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-2-noref.html29
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-2-noref2.html29
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-2-ref.html29
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-2a-dyn.html38
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-2a.html31
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-2b-dyn.html38
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-2b.html31
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-2c-dyn.html38
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-2c.html31
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-3-dyn.html38
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-3-noref.html23
-rw-r--r--layout/reftests/margin-collapsing/table-sibling-3-ref.html23
746 files changed, 21950 insertions, 0 deletions
diff --git a/layout/reftests/margin-collapsing/block-abs-pos-1-dyn.html b/layout/reftests/margin-collapsing/block-abs-pos-1-dyn.html
new file mode 100644
index 0000000000..705f33c186
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-abs-pos-1-dyn.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<!-- Note: CSS 2.1 allows guessing the static position of an absolutely
+ positioned element whose offsets are 'auto' (initial value), i.e.
+ the reference of this test is just one of many possible outcomes.
+ See http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width -->
+<style type="text/css">
+#in-flow-top {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#abs-pos {
+ width: 20px; height: 20px;
+ background-color: blue;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+#in-flow-bottom {
+ height: 20px;
+ margin-top: 20px;
+ background-color: lightgreen;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('abs-pos').style.position = 'absolute';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="in-flow-top"></div>
+<div id="abs-pos"></div>
+<div id="in-flow-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-abs-pos-1-ref.html b/layout/reftests/margin-collapsing/block-abs-pos-1-ref.html
new file mode 100644
index 0000000000..81f2c37ff9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-abs-pos-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- Note: CSS 2.1 allows guessing the static position of an absolutely
+ positioned element whose offsets are 'auto' (initial value), i.e.
+ the reference of this test is just one of many possible outcomes.
+ See http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width -->
+<style type="text/css">
+#in-flow-top {
+ height: 20px;
+ background-color: green;
+}
+#abs-pos {
+ width: 20px; height: 20px;
+ background-color: blue;
+ position: relative;
+ top: -10px;
+}
+#in-flow-bottom {
+ height: 20px;
+ background-color: lightgreen;
+}
+#spacer {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="in-flow-top"></div>
+<div id="spacer"></div>
+<div id="in-flow-bottom"></div>
+<div id="abs-pos"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-abs-pos-1.html b/layout/reftests/margin-collapsing/block-abs-pos-1.html
new file mode 100644
index 0000000000..d398054c57
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-abs-pos-1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- Note: CSS 2.1 allows guessing the static position of an absolutely
+ positioned element whose offsets are 'auto' (initial value), i.e.
+ the reference of this test is just one of many possible outcomes.
+ See http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width -->
+<style type="text/css">
+#in-flow-top {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#abs-pos {
+ position: absolute;
+ width: 20px; height: 20px;
+ background-color: blue;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+#in-flow-bottom {
+ height: 20px;
+ margin-top: 20px;
+ background-color: lightgreen;
+}
+</style>
+</head>
+<body>
+<div id="in-flow-top"></div>
+<div id="abs-pos"></div>
+<div id="in-flow-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-abs-pos-2-dyn.html b/layout/reftests/margin-collapsing/block-abs-pos-2-dyn.html
new file mode 100644
index 0000000000..ec97ce6fde
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-abs-pos-2-dyn.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<html>
+<head>
+<style type="text/css">
+#abs-pos {
+ top: 20px; left: 20px;
+ width: 200px;
+ background-color: lightgreen;
+}
+#in-flow-child {
+ height: 100px;
+ margin-top: 40px;
+ margin-bottom: 40px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('abs-pos').style.position = 'absolute';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="abs-pos">
+ <div id="in-flow-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-abs-pos-2-ref.html b/layout/reftests/margin-collapsing/block-abs-pos-2-ref.html
new file mode 100644
index 0000000000..6fd7e241a7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-abs-pos-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#abs-pos {
+ position: absolute;
+ top: 20px; left: 20px;
+ width: 200px;
+ padding: 40px 0;
+ background-color: lightgreen;
+}
+#in-flow-child {
+ height: 100px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="abs-pos">
+ <div id="in-flow-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-abs-pos-2-ref2.html b/layout/reftests/margin-collapsing/block-abs-pos-2-ref2.html
new file mode 100644
index 0000000000..f673e153f6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-abs-pos-2-ref2.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 10px;
+}
+#abs-pos {
+ width: 200px;
+ background-color: lightgreen;
+}
+.margin {
+ height: 40px;
+}
+#content {
+ height: 100px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="abs-pos">
+ <div class="margin"></div>
+ <div id="content"></div>
+ <div class="margin"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-abs-pos-2.html b/layout/reftests/margin-collapsing/block-abs-pos-2.html
new file mode 100644
index 0000000000..294624bb4d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-abs-pos-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#abs-pos {
+ position: absolute;
+ top: 20px; left: 20px;
+ width: 200px;
+ background-color: lightgreen;
+}
+#in-flow-child {
+ height: 100px;
+ margin-top: 40px;
+ margin-bottom: 40px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="abs-pos">
+ <div id="in-flow-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-1-ref.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-1-ref.html
new file mode 100644
index 0000000000..1d45fb5471
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ height: 40px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-1a-dyn.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-1a-dyn.html
new file mode 100644
index 0000000000..8c0432ae34
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-1a-dyn.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#last-child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 10px;
+}
+#last-child {
+ display: none;
+ margin-bottom: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-1a.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-1a.html
new file mode 100644
index 0000000000..d3497a10a8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-1a.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 10px;
+}
+#last-child {
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-1b-dyn.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-1b-dyn.html
new file mode 100644
index 0000000000..eecca0adbc
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-1b-dyn.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#last-child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 20px;
+}
+#last-child {
+ display: none;
+ margin-bottom: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-1b.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-1b.html
new file mode 100644
index 0000000000..8fdcd64a21
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-1b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 20px;
+}
+#last-child {
+ margin-bottom: 10px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-1c-dyn.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-1c-dyn.html
new file mode 100644
index 0000000000..fa61c75b53
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-1c-dyn.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#last-child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 20px;
+}
+#last-child {
+ display: none;
+ margin-bottom: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-1c.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-1c.html
new file mode 100644
index 0000000000..c8e1e40ee7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-1c.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 20px;
+}
+#last-child {
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-2-dyn.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-2-dyn.html
new file mode 100644
index 0000000000..0ba3c287a6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-2-dyn.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#last-child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 0;
+}
+#last-child {
+ margin-bottom: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.marginBottom = '-10px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-2-ref.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-2-ref.html
new file mode 100644
index 0000000000..7058f2b770
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ height: 30px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-2.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-2.html
new file mode 100644
index 0000000000..8aea2e127b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: -10px;
+}
+#last-child {
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-3-dyn.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-3-dyn.html
new file mode 100644
index 0000000000..f25f0d111d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-3-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#last-child {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: blue;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 0px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.marginBottom = '-20px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-3-ref.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-3-ref.html
new file mode 100644
index 0000000000..9c38173e62
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-3-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 20px;
+ background-color: blue;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-3.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-3.html
new file mode 100644
index 0000000000..024c6bb357
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-3.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: blue;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: -20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-4-dyn.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-4-dyn.html
new file mode 100644
index 0000000000..4aa08d5bde
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-4-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: blue;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 0px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.marginBottom = '-30px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-4-ref.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-4-ref.html
new file mode 100644
index 0000000000..643b84e906
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-4-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 10px;
+ background-color: blue;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-4.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-4.html
new file mode 100644
index 0000000000..86aa36c60b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-4.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: blue;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: -30px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-5-dyn.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-5-dyn.html
new file mode 100644
index 0000000000..2b6ea32d19
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-5-dyn.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#last-child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 20px;
+}
+#last-child {
+ margin-bottom: 0;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.marginBottom = '-10px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-5-ref.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-5-ref.html
new file mode 100644
index 0000000000..7058f2b770
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-5-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ height: 30px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-5.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-5.html
new file mode 100644
index 0000000000..48d597ea49
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-5.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 20px;
+}
+#last-child {
+ margin-bottom: -10px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-6-dyn.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-6-dyn.html
new file mode 100644
index 0000000000..b7140c3edd
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-6-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#last-child {
+ height: 20px;
+ margin-bottom: 0px;
+ background-color: blue;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.marginBottom = '-20px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-6-ref.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-6-ref.html
new file mode 100644
index 0000000000..9c38173e62
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-6-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 20px;
+ background-color: blue;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-6.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-6.html
new file mode 100644
index 0000000000..5b82207d3c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-6.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 20px;
+ margin-bottom: -20px;
+ background-color: blue;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-7-dyn.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-7-dyn.html
new file mode 100644
index 0000000000..01b94eaa84
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-7-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 20px;
+ margin-bottom: 0px;
+ background-color: blue;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.marginBottom = '-30px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-7-ref.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-7-ref.html
new file mode 100644
index 0000000000..643b84e906
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-7-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 10px;
+ background-color: blue;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-7.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-7.html
new file mode 100644
index 0000000000..17af01b5a7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-7.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 20px;
+ margin-bottom: -30px;
+ background-color: blue;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-8-ref.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-8-ref.html
new file mode 100644
index 0000000000..963a1bca77
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-8-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 20px;
+ background-color: blue;
+}
+#separator {
+ height: 40px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-8a-dyn.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-8a-dyn.html
new file mode 100644
index 0000000000..ffee02f107
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-8a-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: blue;
+}
+#separator {
+ height: 40px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: -10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-8a.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-8a.html
new file mode 100644
index 0000000000..33ad43809d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-8a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: blue;
+}
+#separator {
+ height: 40px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: -10px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-8b-dyn.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-8b-dyn.html
new file mode 100644
index 0000000000..8f0827b6f0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-8b-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: -10px;
+ background-color: blue;
+}
+#separator {
+ height: 40px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: -20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-8b.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-8b.html
new file mode 100644
index 0000000000..35c3895fd3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-8b.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 40px;
+ margin-bottom: -10px;
+ background-color: blue;
+}
+#separator {
+ height: 40px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: -20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-8c-dyn.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-8c-dyn.html
new file mode 100644
index 0000000000..16d6e33f9a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-8c-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: blue;
+}
+#separator {
+ height: 40px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: -20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-auto-height-last-child-8c.html b/layout/reftests/margin-collapsing/block-auto-height-last-child-8c.html
new file mode 100644
index 0000000000..d76c732345
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-auto-height-last-child-8c.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#last-child {
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: blue;
+}
+#separator {
+ height: 40px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: -20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-1a-ref.html b/layout/reftests/margin-collapsing/block-clear-1a-ref.html
new file mode 100644
index 0000000000..9eea358352
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-1a-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ margin-right: auto;
+ height: 40px; width: 100px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-1a.html b/layout/reftests/margin-collapsing/block-clear-1a.html
new file mode 100644
index 0000000000..ca8cd7e66a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-1a.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ margin-bottom: 10px;
+}
+#float {
+ float: left;
+ height: 40px; width: 100px;
+ background-color: green;
+}
+#clear {
+ clear: left;
+ margin-top: 20px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-1b-ref.html b/layout/reftests/margin-collapsing/block-clear-1b-ref.html
new file mode 100644
index 0000000000..4029aa6f75
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-1b-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ margin-left: auto;
+ height: 40px; width: 100px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-1b.html b/layout/reftests/margin-collapsing/block-clear-1b.html
new file mode 100644
index 0000000000..d2ef1998e3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-1b.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ margin-bottom: 10px;
+}
+#float {
+ float: right;
+ height: 40px; width: 100px;
+ background-color: green;
+}
+#clear {
+ clear: right;
+ margin-top: 20px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-2-noref.html b/layout/reftests/margin-collapsing/block-clear-2-noref.html
new file mode 100644
index 0000000000..ada1f22ffe
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-2-noref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- Without floats, no clearance applies, thus margin-top of #clear
+ should collapse with margin-bottom of its parent element. -->
+<style type="text/css">
+.separator {
+ height: 20px;
+ margin-bottom: 30px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-2-ref.html b/layout/reftests/margin-collapsing/block-clear-2-ref.html
new file mode 100644
index 0000000000..ed572a6f9b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-2-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- Without floats, no clearance applies, thus margin-top of #clear
+ should collapse with margin-bottom of its parent element. -->
+<style type="text/css">
+.separator {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-2.html b/layout/reftests/margin-collapsing/block-clear-2.html
new file mode 100644
index 0000000000..152c014db9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- Without floats, no clearance applies, thus margin-top of #clear
+ should collapse with margin-bottom of its parent element. -->
+<style type="text/css">
+#parent {
+ margin-bottom: 10px;
+}
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#clear {
+ clear: left;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div class="separator"></div>
+ <div id="clear"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-3-ref-left.html b/layout/reftests/margin-collapsing/block-clear-3-ref-left.html
new file mode 100644
index 0000000000..14271190f6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-3-ref-left.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ height: 20px;
+ background-color: green;
+}
+#margin {
+ height: 80px;
+}
+#clear {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="margin"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-3-ref-right.html b/layout/reftests/margin-collapsing/block-clear-3-ref-right.html
new file mode 100644
index 0000000000..22b974fe46
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-3-ref-right.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: right;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ height: 20px;
+ background-color: green;
+}
+#margin {
+ height: 80px;
+}
+#clear {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="margin"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-3a.html b/layout/reftests/margin-collapsing/block-clear-3a.html
new file mode 100644
index 0000000000..a6ec21ea03
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-3a.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ margin-bottom: 20px;
+ height: 20px;
+ background-color: green;
+}
+#clear {
+ margin-top: 20px;
+ clear: both;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-3b.html b/layout/reftests/margin-collapsing/block-clear-3b.html
new file mode 100644
index 0000000000..3e46bcbf9b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-3b.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: right;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ margin-bottom: 20px;
+ height: 20px;
+ background-color: green;
+}
+#clear {
+ margin-top: 20px;
+ clear: both;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-3c.html b/layout/reftests/margin-collapsing/block-clear-3c.html
new file mode 100644
index 0000000000..bd11ec3423
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-3c.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ margin-bottom: 40px;
+ height: 20px;
+ background-color: green;
+}
+#clear {
+ margin-top: 40px;
+ clear: both;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-3d.html b/layout/reftests/margin-collapsing/block-clear-3d.html
new file mode 100644
index 0000000000..08037c1ea4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-3d.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: right;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ margin-bottom: 40px;
+ height: 20px;
+ background-color: green;
+}
+#clear {
+ margin-top: 40px;
+ clear: both;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-3e.html b/layout/reftests/margin-collapsing/block-clear-3e.html
new file mode 100644
index 0000000000..a05961a81b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-3e.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ margin-bottom: 60px;
+ height: 20px;
+ background-color: green;
+}
+#clear {
+ margin-top: 60px;
+ clear: both;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-3f.html b/layout/reftests/margin-collapsing/block-clear-3f.html
new file mode 100644
index 0000000000..90710df324
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-3f.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: right;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ margin-bottom: 60px;
+ height: 20px;
+ background-color: green;
+}
+#clear {
+ margin-top: 60px;
+ clear: both;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-4-ref-left.html b/layout/reftests/margin-collapsing/block-clear-4-ref-left.html
new file mode 100644
index 0000000000..a98b2c7d86
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-4-ref-left.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ height: 20px;
+ background-color: green;
+}
+#margin {
+ height: 85px;
+}
+#clear {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="margin"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-4-ref-right.html b/layout/reftests/margin-collapsing/block-clear-4-ref-right.html
new file mode 100644
index 0000000000..20c6568a87
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-4-ref-right.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: right;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ height: 20px;
+ background-color: green;
+}
+#margin {
+ height: 85px;
+}
+#clear {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="margin"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-4a.html b/layout/reftests/margin-collapsing/block-clear-4a.html
new file mode 100644
index 0000000000..9130befd29
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-4a.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ margin-bottom: 85px;
+ height: 20px;
+ background-color: green;
+}
+#clear {
+ margin-top: 80px;
+ clear: both;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-4b.html b/layout/reftests/margin-collapsing/block-clear-4b.html
new file mode 100644
index 0000000000..b18a9ab171
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-4b.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ margin-bottom: 80px;
+ height: 20px;
+ background-color: green;
+}
+#clear {
+ margin-top: 85px;
+ clear: both;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-4c.html b/layout/reftests/margin-collapsing/block-clear-4c.html
new file mode 100644
index 0000000000..d57c8e1c1d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-4c.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ margin-bottom: 85px;
+ height: 20px;
+ background-color: green;
+}
+#clear {
+ margin-top: 85px;
+ clear: both;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-4d.html b/layout/reftests/margin-collapsing/block-clear-4d.html
new file mode 100644
index 0000000000..5b9231affb
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-4d.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: right;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ margin-bottom: 85px;
+ height: 20px;
+ background-color: green;
+}
+#clear {
+ margin-top: 80px;
+ clear: both;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-4e.html b/layout/reftests/margin-collapsing/block-clear-4e.html
new file mode 100644
index 0000000000..d42a33ffb3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-4e.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: right;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ margin-bottom: 80px;
+ height: 20px;
+ background-color: green;
+}
+#clear {
+ margin-top: 85px;
+ clear: both;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-4f.html b/layout/reftests/margin-collapsing/block-clear-4f.html
new file mode 100644
index 0000000000..1194521f22
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-4f.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: right;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#static {
+ margin-bottom: 85px;
+ height: 20px;
+ background-color: green;
+}
+#clear {
+ margin-top: 85px;
+ clear: both;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="static"></div>
+<div id="clear"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-5-left-ref.html b/layout/reftests/margin-collapsing/block-clear-5-left-ref.html
new file mode 100644
index 0000000000..70067ac23f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-5-left-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #clear {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+ background-color: lime;
+}
+#float {
+ width: 100px; height: 100px;
+ background-color: blue;
+ margin-right: auto;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-5-right-ref.html b/layout/reftests/margin-collapsing/block-clear-5-right-ref.html
new file mode 100644
index 0000000000..d1528cae92
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-5-right-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #clear {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#parent {
+ background-color: lime;
+}
+#float {
+ width: 100px; height: 100px;
+ background-color: blue;
+ margin-left: auto;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-5a.html b/layout/reftests/margin-collapsing/block-clear-5a.html
new file mode 100644
index 0000000000..f1a3b3d09b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-5a.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #clear {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+ background-color: lime;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-5b.html b/layout/reftests/margin-collapsing/block-clear-5b.html
new file mode 100644
index 0000000000..765f7876f6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-5b.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #clear {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+ background-color: lime;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 100px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-5c.html b/layout/reftests/margin-collapsing/block-clear-5c.html
new file mode 100644
index 0000000000..c3a8b7bbf6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-5c.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #clear {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+ background-color: lime;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 110px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-5d.html b/layout/reftests/margin-collapsing/block-clear-5d.html
new file mode 100644
index 0000000000..70b8ebf8e1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-5d.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #clear {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+ background-color: lime;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 130px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-5e.html b/layout/reftests/margin-collapsing/block-clear-5e.html
new file mode 100644
index 0000000000..d1a7197cb4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-5e.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #clear {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+ background-color: lime;
+}
+#float {
+ float: right;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: right;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-5f.html b/layout/reftests/margin-collapsing/block-clear-5f.html
new file mode 100644
index 0000000000..6fcd6b3baf
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-5f.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #clear {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+ background-color: lime;
+}
+#float {
+ float: right;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: right;
+ margin-top: 100px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-5g.html b/layout/reftests/margin-collapsing/block-clear-5g.html
new file mode 100644
index 0000000000..28b1ccba4d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-5g.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #clear {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+ background-color: lime;
+}
+#float {
+ float: right;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: right;
+ margin-top: 110px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-5h.html b/layout/reftests/margin-collapsing/block-clear-5h.html
new file mode 100644
index 0000000000..e580e2504d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-5h.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #clear {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+ background-color: lime;
+}
+#float {
+ float: right;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: right;
+ margin-top: 150px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-6a-left.html b/layout/reftests/margin-collapsing/block-clear-6a-left.html
new file mode 100644
index 0000000000..2ab248378d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-6a-left.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-6abc-left-ref.html b/layout/reftests/margin-collapsing/block-clear-6abc-left-ref.html
new file mode 100644
index 0000000000..1460177fd8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-6abc-left-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+ height: 100px;
+}
+#float {
+ width: 100px; height: 100px;
+ background-color: blue;
+ margin-right: auto;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-6b-left.html b/layout/reftests/margin-collapsing/block-clear-6b-left.html
new file mode 100644
index 0000000000..be31e3272f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-6b-left.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-6c-left.html b/layout/reftests/margin-collapsing/block-clear-6c-left.html
new file mode 100644
index 0000000000..e5949b1091
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-6c-left.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 15px;
+ margin-bottom: 15px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-6d-left.html b/layout/reftests/margin-collapsing/block-clear-6d-left.html
new file mode 100644
index 0000000000..967675e856
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-6d-left.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+ margin-bottom: 30px;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-6def-left-ref1.html b/layout/reftests/margin-collapsing/block-clear-6def-left-ref1.html
new file mode 100644
index 0000000000..fe20c15d00
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-6def-left-ref1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+ height: 100px;
+ margin-bottom: 30px;
+}
+#float {
+ width: 100px; height: 100px;
+ background-color: blue;
+ margin-right: auto;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-6def-left-ref2.html b/layout/reftests/margin-collapsing/block-clear-6def-left-ref2.html
new file mode 100644
index 0000000000..70a533bb61
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-6def-left-ref2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+ height: 100px;
+}
+#float {
+ width: 100px; height: 100px;
+ background-color: blue;
+ margin-right: auto;
+}
+#margin-bottom {
+ margin-bottom: 30px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+</div>
+<div id="margin-bottom"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-6e-left.html b/layout/reftests/margin-collapsing/block-clear-6e-left.html
new file mode 100644
index 0000000000..4b13a2e1fc
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-6e-left.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+ margin-bottom: 30px;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-6f-left.html b/layout/reftests/margin-collapsing/block-clear-6f-left.html
new file mode 100644
index 0000000000..f4a8f3d7b8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-6f-left.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+ margin-bottom: 30px;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 15px;
+ margin-bottom: 15px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-7a-left.html b/layout/reftests/margin-collapsing/block-clear-7a-left.html
new file mode 100644
index 0000000000..f9b4510fc7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-7a-left.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+#clear-sibling {
+ margin-top: 30px;
+ margin-bottom: 40px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+ <div id="clear-sibling"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-7abcd-left-ref.html b/layout/reftests/margin-collapsing/block-clear-7abcd-left-ref.html
new file mode 100644
index 0000000000..58e416e0ce
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-7abcd-left-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+}
+#float {
+ width: 100px; height: 100px;
+ margin-right: auto;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-7b-left.html b/layout/reftests/margin-collapsing/block-clear-7b-left.html
new file mode 100644
index 0000000000..3656d113d8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-7b-left.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 20px;
+ margin-bottom: 30px;
+}
+#clear-sibling {
+ margin-top: 40px;
+ margin-bottom: 10px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+ <div id="clear-sibling"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-7c-left.html b/layout/reftests/margin-collapsing/block-clear-7c-left.html
new file mode 100644
index 0000000000..714b8aff17
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-7c-left.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 30px;
+ margin-bottom: 40px;
+}
+#clear-sibling {
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+ <div id="clear-sibling"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-7d-left.html b/layout/reftests/margin-collapsing/block-clear-7d-left.html
new file mode 100644
index 0000000000..ac3e8bd181
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-7d-left.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 40px;
+ margin-bottom: 10px;
+}
+#clear-sibling {
+ margin-top: 20px;
+ margin-bottom: 30px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+ <div id="clear-sibling"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-7e-left.html b/layout/reftests/margin-collapsing/block-clear-7e-left.html
new file mode 100644
index 0000000000..8bc855afd9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-7e-left.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+ margin-bottom: 50px;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+#clear-sibling {
+ margin-top: 30px;
+ margin-bottom: 40px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+ <div id="clear-sibling"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-7efgh-left-ref1.html b/layout/reftests/margin-collapsing/block-clear-7efgh-left-ref1.html
new file mode 100644
index 0000000000..ddcd07b7dd
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-7efgh-left-ref1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+ margin-bottom: 50px;
+ height: 100px;
+}
+#float {
+ width: 100px; height: 100px;
+ margin-right: auto;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-7efgh-left-ref2.html b/layout/reftests/margin-collapsing/block-clear-7efgh-left-ref2.html
new file mode 100644
index 0000000000..176000c89d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-7efgh-left-ref2.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+}
+#float {
+ width: 100px; height: 100px;
+ margin-right: auto;
+ background-color: blue;
+}
+#margin-bottom {
+ margin-bottom: 50px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+</div>
+<div id="margin-bottom"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-7f-left.html b/layout/reftests/margin-collapsing/block-clear-7f-left.html
new file mode 100644
index 0000000000..360316e72f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-7f-left.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+ margin-bottom: 50px;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 20px;
+ margin-bottom: 30px;
+}
+#clear-sibling {
+ margin-top: 40px;
+ margin-bottom: 10px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+ <div id="clear-sibling"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-7g-left.html b/layout/reftests/margin-collapsing/block-clear-7g-left.html
new file mode 100644
index 0000000000..5233ec359d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-7g-left.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+ margin-bottom: 50px;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 30px;
+ margin-bottom: 40px;
+}
+#clear-sibling {
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+ <div id="clear-sibling"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-clear-7h-left.html b/layout/reftests/margin-collapsing/block-clear-7h-left.html
new file mode 100644
index 0000000000..28c26d9e1f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-clear-7h-left.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: lime;
+ margin-bottom: 50px;
+}
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 40px;
+ margin-bottom: 10px;
+}
+#clear-sibling {
+ margin-top: 20px;
+ margin-bottom: 30px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="float"></div>
+ <div id="clear"></div>
+ <div id="clear-sibling"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-em-length-1-dyn.html b/layout/reftests/margin-collapsing/block-em-length-1-dyn.html
new file mode 100644
index 0000000000..6a709dd33e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-em-length-1-dyn.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+body {
+ font-size: 20px;
+}
+#block1 {
+ height: 20px;
+ margin-bottom: 10em;
+ background-color: blue;
+}
+#block2 {
+ height: 20px;
+ margin-top: 5em;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('block2').style.fontSize = '50px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-em-length-1-ref.html b/layout/reftests/margin-collapsing/block-em-length-1-ref.html
new file mode 100644
index 0000000000..848a2382fd
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-em-length-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-size: 20px;
+}
+#block1 {
+ height: 20px;
+ background-color: blue;
+}
+#spacer {
+ font-size: 50px;
+ height: 5em;
+}
+#block2 {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="spacer"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-em-length-1.html b/layout/reftests/margin-collapsing/block-em-length-1.html
new file mode 100644
index 0000000000..bc66603140
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-em-length-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-size: 20px;
+}
+#block1 {
+ height: 20px;
+ margin-bottom: 10em;
+ background-color: blue;
+}
+#block2 {
+ font-size: 50px;
+ height: 20px;
+ margin-top: 5em;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-1-ref.html b/layout/reftests/margin-collapsing/block-first-child-1-ref.html
new file mode 100644
index 0000000000..4ea04150d8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #spacer, #first-child {
+ height: 20px;
+}
+#separator, #first-child {
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="spacer"></div>
+<div id="first-child"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-1a-dyn.html b/layout/reftests/margin-collapsing/block-first-child-1a-dyn.html
new file mode 100644
index 0000000000..23a0482231
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-1a-dyn.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator, #first-child {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 10px;
+}
+#first-child {
+ display: none;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('first-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-1a.html b/layout/reftests/margin-collapsing/block-first-child-1a.html
new file mode 100644
index 0000000000..77d04ffa82
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-1a.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #first-child {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 10px;
+}
+#first-child {
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-1b-dyn.html b/layout/reftests/margin-collapsing/block-first-child-1b-dyn.html
new file mode 100644
index 0000000000..4daf81404e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-1b-dyn.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator, #first-child {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+}
+#first-child {
+ display: none;
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('first-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-1b.html b/layout/reftests/margin-collapsing/block-first-child-1b.html
new file mode 100644
index 0000000000..deb791e93a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-1b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #first-child {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+}
+#first-child {
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-1c-dyn.html b/layout/reftests/margin-collapsing/block-first-child-1c-dyn.html
new file mode 100644
index 0000000000..926ace8769
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-1c-dyn.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator, #first-child {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+}
+#first-child {
+ display: none;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('first-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-1c.html b/layout/reftests/margin-collapsing/block-first-child-1c.html
new file mode 100644
index 0000000000..1a5f5e817a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-1c.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #first-child {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+}
+#first-child {
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-2-dyn.html b/layout/reftests/margin-collapsing/block-first-child-2-dyn.html
new file mode 100644
index 0000000000..086ebf5bc5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-2-dyn.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator, #first-child {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+}
+#first-child {
+ margin-top: 0;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('first-child').style.marginTop = '-10px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-2-ref.html b/layout/reftests/margin-collapsing/block-first-child-2-ref.html
new file mode 100644
index 0000000000..9819327b5e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #first-child {
+ height: 20px;
+ background-color: green;
+}
+#spacer {
+ height: 10px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="spacer"></div>
+<div id="first-child"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-2.html b/layout/reftests/margin-collapsing/block-first-child-2.html
new file mode 100644
index 0000000000..fd10e6d7a8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #first-child {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 20px;
+}
+#first-child {
+ margin-top: -10px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-3-dyn.html b/layout/reftests/margin-collapsing/block-first-child-3-dyn.html
new file mode 100644
index 0000000000..43cf254750
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-3-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ margin-top: 0px;
+ background-color: blue;
+}
+#parent {
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('first-child').style.marginTop = '-20px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-3-ref.html b/layout/reftests/margin-collapsing/block-first-child-3-ref.html
new file mode 100644
index 0000000000..2a2d8d9bf8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-3-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-3.html b/layout/reftests/margin-collapsing/block-first-child-3.html
new file mode 100644
index 0000000000..6fbe7dc32e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-3.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ margin-top: -20px;
+ background-color: blue;
+}
+#parent {
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-4-dyn.html b/layout/reftests/margin-collapsing/block-first-child-4-dyn.html
new file mode 100644
index 0000000000..cb84a9acfc
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-4-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ margin-top: 0px;
+ background-color: blue;
+}
+#parent {
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('first-child').style.marginTop = '-30px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-4-ref.html b/layout/reftests/margin-collapsing/block-first-child-4-ref.html
new file mode 100644
index 0000000000..545006bc0e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-4-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 10px;
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-4.html b/layout/reftests/margin-collapsing/block-first-child-4.html
new file mode 100644
index 0000000000..e8c05ef10c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-4.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ margin-top: -30px;
+ background-color: blue;
+}
+#parent {
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-5-dyn.html b/layout/reftests/margin-collapsing/block-first-child-5-dyn.html
new file mode 100644
index 0000000000..567ef234d2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-5-dyn.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator, #first-child {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 0;
+}
+#first-child {
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.marginTop = '-10px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-5-ref.html b/layout/reftests/margin-collapsing/block-first-child-5-ref.html
new file mode 100644
index 0000000000..9819327b5e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-5-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #first-child {
+ height: 20px;
+ background-color: green;
+}
+#spacer {
+ height: 10px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="spacer"></div>
+<div id="first-child"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-5.html b/layout/reftests/margin-collapsing/block-first-child-5.html
new file mode 100644
index 0000000000..c06c104305
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-5.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #first-child {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: -10px;
+}
+#first-child {
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-6-dyn.html b/layout/reftests/margin-collapsing/block-first-child-6-dyn.html
new file mode 100644
index 0000000000..c614d67ce5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-6-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ margin-top: 20px;
+ background-color: blue;
+}
+#parent {
+ margin-top: 0px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.marginTop = '-20px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-6-ref.html b/layout/reftests/margin-collapsing/block-first-child-6-ref.html
new file mode 100644
index 0000000000..2a2d8d9bf8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-6-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-6.html b/layout/reftests/margin-collapsing/block-first-child-6.html
new file mode 100644
index 0000000000..66a4d81cc5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-6.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ margin-top: 20px;
+ background-color: blue;
+}
+#parent {
+ margin-top: -20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-7-dyn.html b/layout/reftests/margin-collapsing/block-first-child-7-dyn.html
new file mode 100644
index 0000000000..48d740bb39
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-7-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ margin-top: 20px;
+ background-color: blue;
+}
+#parent {
+ margin-top: 0;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.marginTop = '-30px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-7-ref.html b/layout/reftests/margin-collapsing/block-first-child-7-ref.html
new file mode 100644
index 0000000000..545006bc0e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-7-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 10px;
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-7.html b/layout/reftests/margin-collapsing/block-first-child-7.html
new file mode 100644
index 0000000000..9245b83017
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-7.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ margin-top: 20px;
+ background-color: blue;
+}
+#parent {
+ margin-top: -30px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-8-ref.html b/layout/reftests/margin-collapsing/block-first-child-8-ref.html
new file mode 100644
index 0000000000..18ae4f0b6e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-8-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#first-child {
+ height: 40px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-8a-dyn.html b/layout/reftests/margin-collapsing/block-first-child-8a-dyn.html
new file mode 100644
index 0000000000..b6d9fb5aab
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-8a-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 40px;
+ background-color: green;
+}
+#first-child {
+ display: none;
+ height: 40px;
+ margin-top: -20px;
+ background-color: blue;
+}
+#parent {
+ margin-top: -10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('first-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-8a.html b/layout/reftests/margin-collapsing/block-first-child-8a.html
new file mode 100644
index 0000000000..abbdf0a2a4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-8a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 40px;
+ background-color: green;
+}
+#first-child {
+ height: 40px;
+ margin-top: -20px;
+ background-color: blue;
+}
+#parent {
+ margin-top: -10px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-8b-dyn.html b/layout/reftests/margin-collapsing/block-first-child-8b-dyn.html
new file mode 100644
index 0000000000..8e25118596
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-8b-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 40px;
+ background-color: green;
+}
+#first-child {
+ display: none;
+ height: 40px;
+ margin-top: -10px;
+ background-color: blue;
+}
+#parent {
+ margin-top: -20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('first-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-8b.html b/layout/reftests/margin-collapsing/block-first-child-8b.html
new file mode 100644
index 0000000000..6f7a6868a9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-8b.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 40px;
+ background-color: green;
+}
+#first-child {
+ height: 40px;
+ margin-top: -10px;
+ background-color: blue;
+}
+#parent {
+ margin-top: -20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-8c-dyn.html b/layout/reftests/margin-collapsing/block-first-child-8c-dyn.html
new file mode 100644
index 0000000000..856380cf4e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-8c-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 40px;
+ background-color: green;
+}
+#first-child {
+ display: none;
+ height: 40px;
+ margin-top: -20px;
+ background-color: blue;
+}
+#parent {
+ margin-top: -20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('first-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-first-child-8c.html b/layout/reftests/margin-collapsing/block-first-child-8c.html
new file mode 100644
index 0000000000..f0313cc949
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-first-child-8c.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 40px;
+ background-color: green;
+}
+#first-child {
+ height: 40px;
+ margin-top: -20px;
+ background-color: blue;
+}
+#parent {
+ margin-top: -20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-1-ref.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-1-ref.html
new file mode 100644
index 0000000000..634bb402f9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-1a-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-1a-dyn.html
new file mode 100644
index 0000000000..9e5875e453
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-1a-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-1a.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-1a.html
new file mode 100644
index 0000000000..4ae3e406f5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-1a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-1b-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-1b-dyn.html
new file mode 100644
index 0000000000..297e341872
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-1b-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-1b.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-1b.html
new file mode 100644
index 0000000000..bb8f368420
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-1b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-2-ref.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-2-ref.html
new file mode 100644
index 0000000000..164173ae7f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-2-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-2a-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-2a-dyn.html
new file mode 100644
index 0000000000..67a584072b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-2a-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-2a.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-2a.html
new file mode 100644
index 0000000000..c3471fbc8b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-2a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-2b-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-2b-dyn.html
new file mode 100644
index 0000000000..edc34e6c46
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-2b-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-2b.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-2b.html
new file mode 100644
index 0000000000..c86ce6ced4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-2b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-3-ref.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-3-ref.html
new file mode 100644
index 0000000000..6ed72dd241
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-3-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 140px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-3a-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-3a-dyn.html
new file mode 100644
index 0000000000..53af4f4010
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-3a-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 140px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-3a.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-3a.html
new file mode 100644
index 0000000000..5f068714f8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-3a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 140px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-3b-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-3b-dyn.html
new file mode 100644
index 0000000000..14c73ccf07
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-3b-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 140px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-3b.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-3b.html
new file mode 100644
index 0000000000..bf9b2a5b09
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-3b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 140px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4-ref.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4-ref.html
new file mode 100644
index 0000000000..0c183b8963
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4a-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4a-dyn.html
new file mode 100644
index 0000000000..f67c1bfec8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4a-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 50px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.height = '100px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4a.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4a.html
new file mode 100644
index 0000000000..ab1abbe4fe
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ min-height: 50px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4b-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4b-dyn.html
new file mode 100644
index 0000000000..f7d952bf95
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4b-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 50px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.height = '100px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4b.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4b.html
new file mode 100644
index 0000000000..92d544d117
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ min-height: 50px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4c-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4c-dyn.html
new file mode 100644
index 0000000000..e96a0d6607
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4c-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.height = '50px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4c.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4c.html
new file mode 100644
index 0000000000..291ea8e969
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 50px;
+ min-height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4d-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4d-dyn.html
new file mode 100644
index 0000000000..61f30a6df3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4d-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.height = '50px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4d.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4d.html
new file mode 100644
index 0000000000..1422c16288
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4d.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 50px;
+ min-height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4e-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4e-dyn.html
new file mode 100644
index 0000000000..45124c206a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4e-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.height = '150px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4e.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4e.html
new file mode 100644
index 0000000000..b2e78df612
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4e.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 150px;
+ max-height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4f-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4f-dyn.html
new file mode 100644
index 0000000000..269db26eb4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4f-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.height = '150px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4f.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4f.html
new file mode 100644
index 0000000000..f4b622c137
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4f.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 150px;
+ max-height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4g-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4g-dyn.html
new file mode 100644
index 0000000000..352455fbb4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4g-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 150px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.height = '100px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4g.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4g.html
new file mode 100644
index 0000000000..292d296022
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4g.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ max-height: 150px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4h-dyn.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4h-dyn.html
new file mode 100644
index 0000000000..8d293f79cb
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4h-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 150px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent').style.height = '100px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-fix-height-last-child-4h.html b/layout/reftests/margin-collapsing/block-fix-height-last-child-4h.html
new file mode 100644
index 0000000000..92a18642bb
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-fix-height-last-child-4h.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ max-height: 150px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 10px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-1a-dyn.html b/layout/reftests/margin-collapsing/block-float-1a-dyn.html
new file mode 100644
index 0000000000..1368dbc0a0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-1a-dyn.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#float {
+ height: 100px; width: 50px;
+ margin-top: 10px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('float').style.cssFloat = 'left';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="float"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-1a-noref.html b/layout/reftests/margin-collapsing/block-float-1a-noref.html
new file mode 100644
index 0000000000..7d9a89e00e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-1a-noref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#margin {
+ height: 10px;
+}
+#float {
+ height: 100px; width: 50px;
+ margin-right: auto;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="margin"></div>
+<div id="float"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-1a-ref.html b/layout/reftests/margin-collapsing/block-float-1a-ref.html
new file mode 100644
index 0000000000..d591472d2c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-1a-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#float {
+ float: left;
+ height: 100px; width: 50px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="float"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-1a-ref2.html b/layout/reftests/margin-collapsing/block-float-1a-ref2.html
new file mode 100644
index 0000000000..c48aea7c73
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-1a-ref2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#margin {
+ height: 20px;
+}
+#float {
+ height: 100px; width: 50px;
+ margin-right: auto;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="margin"></div>
+<div id="float"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-1a.html b/layout/reftests/margin-collapsing/block-float-1a.html
new file mode 100644
index 0000000000..e0ca710369
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-1a.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#float {
+ float: left;
+ height: 100px; width: 50px;
+ margin-top: 10px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="float"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-1b-dyn.html b/layout/reftests/margin-collapsing/block-float-1b-dyn.html
new file mode 100644
index 0000000000..1dd37cc2a6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-1b-dyn.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#float {
+ height: 100px; width: 50px;
+ margin-top: 10px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('float').style.cssFloat = 'right';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="float"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-1b-noref.html b/layout/reftests/margin-collapsing/block-float-1b-noref.html
new file mode 100644
index 0000000000..6c3291e02b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-1b-noref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#margin {
+ height: 10px;
+}
+#float {
+ height: 100px; width: 50px;
+ margin-left: auto;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="margin"></div>
+<div id="float"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-1b-ref.html b/layout/reftests/margin-collapsing/block-float-1b-ref.html
new file mode 100644
index 0000000000..587809c1f1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-1b-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#float {
+ float: right;
+ height: 100px; width: 50px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="float"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-1b-ref2.html b/layout/reftests/margin-collapsing/block-float-1b-ref2.html
new file mode 100644
index 0000000000..07bf588370
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-1b-ref2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#margin {
+ height: 20px;
+}
+#float {
+ height: 100px; width: 50px;
+ margin-left: auto;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="margin"></div>
+<div id="float"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-1b.html b/layout/reftests/margin-collapsing/block-float-1b.html
new file mode 100644
index 0000000000..a0b42df55c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-1b.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#float {
+ float: right;
+ height: 100px; width: 50px;
+ margin-top: 10px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="float"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-2a-dyn.html b/layout/reftests/margin-collapsing/block-float-2a-dyn.html
new file mode 100644
index 0000000000..2a8267db24
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-2a-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#float {
+ float: left;
+ width: 50px;
+ margin: 20px 0;
+ background-color: green;
+}
+#child {
+ height: 20px;
+ background-color: lightgreen;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('child').style.margin = '40px 0';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="float">
+ <div id="child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-2a-noref.html b/layout/reftests/margin-collapsing/block-float-2a-noref.html
new file mode 100644
index 0000000000..b449017886
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-2a-noref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#margin {
+ height: 40px;
+}
+#float {
+ height: 20px; width: 50px;
+ margin-right: auto;
+ background-color: lightgreen;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="margin"></div>
+<div id="float"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-2a-ref.html b/layout/reftests/margin-collapsing/block-float-2a-ref.html
new file mode 100644
index 0000000000..634ce320ed
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-2a-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#float {
+ width: 50px;
+ margin-right: auto;
+ padding: 40px 0;
+ background-color: green;
+}
+#child {
+ height: 20px;
+ background-color: lightgreen;
+}
+#spacer {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="spacer"></div>
+<div id="float">
+ <div id="child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-2a.html b/layout/reftests/margin-collapsing/block-float-2a.html
new file mode 100644
index 0000000000..7e1128eae7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-2a.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#float {
+ float: left;
+ width: 50px;
+ margin: 20px 0;
+ background-color: green;
+}
+#child {
+ height: 20px;
+ margin: 40px 0;
+ background-color: lightgreen;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="float">
+ <div id="child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-2b-dyn.html b/layout/reftests/margin-collapsing/block-float-2b-dyn.html
new file mode 100644
index 0000000000..283e69c70a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-2b-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#float {
+ float: right;
+ width: 50px;
+ margin: 20px 0;
+ background-color: green;
+}
+#child {
+ height: 20px;
+ background-color: lightgreen;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('child').style.margin = '40px 0';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="float">
+ <div id="child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-2b-noref.html b/layout/reftests/margin-collapsing/block-float-2b-noref.html
new file mode 100644
index 0000000000..78741ba7a9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-2b-noref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#margin {
+ height: 40px;
+}
+#float {
+ height: 20px; width: 50px;
+ margin-left: auto;
+ background-color: lightgreen;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="margin"></div>
+<div id="float"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-2b-ref.html b/layout/reftests/margin-collapsing/block-float-2b-ref.html
new file mode 100644
index 0000000000..358dcac897
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-2b-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#float {
+ width: 50px;
+ margin-left: auto;
+ padding: 40px 0;
+ background-color: green;
+}
+#child {
+ height: 20px;
+ background-color: lightgreen;
+}
+#spacer {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="spacer"></div>
+<div id="float">
+ <div id="child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-2b.html b/layout/reftests/margin-collapsing/block-float-2b.html
new file mode 100644
index 0000000000..ef43207432
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-2b.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#float {
+ float: right;
+ width: 50px;
+ margin: 20px 0;
+ background-color: green;
+}
+#child {
+ height: 20px;
+ margin: 40px 0;
+ background-color: lightgreen;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="float">
+ <div id="child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-3a-dyn.html b/layout/reftests/margin-collapsing/block-float-3a-dyn.html
new file mode 100644
index 0000000000..f6d1a5ee02
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-3a-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#container {
+ width: 110px;
+ margin-right: auto;
+}
+#float1, #float2 {
+ width: 100px;
+ height: 20px;
+ background-color: green;
+}
+#float1 {
+ float: left;
+ margin-bottom: 20px;
+}
+#float2 {
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('float2').style.cssFloat = 'left';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="container">
+ <div id="float1"></div>
+ <div id="float2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-3a-ref.html b/layout/reftests/margin-collapsing/block-float-3a-ref.html
new file mode 100644
index 0000000000..7b776b279f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-3a-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float1, #float2 {
+ width: 100px;
+ height: 20px;
+ background-color: green;
+ margin-right: auto;
+}
+#spacer {
+ height: 30px;
+}
+</style>
+</head>
+<body>
+<div id="container">
+ <div id="float1"></div>
+ <div id="spacer"></div>
+ <div id="float2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-3a.html b/layout/reftests/margin-collapsing/block-float-3a.html
new file mode 100644
index 0000000000..639e72b8bb
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-3a.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#container {
+ width: 110px;
+ margin-right: auto;
+}
+#float1, #float2 {
+ float: left;
+ width: 100px;
+ height: 20px;
+ background-color: green;
+}
+#float1 {
+ margin-bottom: 20px;
+}
+#float2 {
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="container">
+ <div id="float1"></div>
+ <div id="float2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-3b-dyn.html b/layout/reftests/margin-collapsing/block-float-3b-dyn.html
new file mode 100644
index 0000000000..2e7723f36a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-3b-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#container {
+ width: 110px;
+ margin-left: auto;
+}
+#float1, #float2 {
+ width: 100px;
+ height: 20px;
+ background-color: green;
+}
+#float1 {
+ float: right;
+ margin-bottom: 20px;
+}
+#float2 {
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('float2').style.cssFloat = 'right';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="container">
+ <div id="float1"></div>
+ <div id="float2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-3b-ref.html b/layout/reftests/margin-collapsing/block-float-3b-ref.html
new file mode 100644
index 0000000000..2e6734c370
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-3b-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float1, #float2 {
+ width: 100px;
+ height: 20px;
+ background-color: green;
+ margin-left: auto;
+}
+#spacer {
+ height: 30px;
+}
+</style>
+</head>
+<body>
+<div id="container">
+ <div id="float1"></div>
+ <div id="spacer"></div>
+ <div id="float2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-float-3b.html b/layout/reftests/margin-collapsing/block-float-3b.html
new file mode 100644
index 0000000000..c2ecd8d2a1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-float-3b.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#container {
+ width: 110px;
+ margin-left: auto;
+}
+#float1, #float2 {
+ float: right;
+ width: 100px;
+ height: 20px;
+ background-color: green;
+}
+#float1 {
+ margin-bottom: 20px;
+}
+#float2 {
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="container">
+ <div id="float1"></div>
+ <div id="float2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-1-dyn.html b/layout/reftests/margin-collapsing/block-horizontal-1-dyn.html
new file mode 100644
index 0000000000..2a1dd7b8a3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-1-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#float-blue {
+ float: left;
+ margin-right: 20px;
+ background-color: blue;
+ width: 40px;
+ height: 100px;
+}
+.dyn {
+ display: none;
+}
+.float-green {
+ float: left;
+ margin: 0 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByClassName('dyn')[0].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="float-blue"></div>
+<div class="float-green dyn"></div>
+<div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-1-noref.html b/layout/reftests/margin-collapsing/block-horizontal-1-noref.html
new file mode 100644
index 0000000000..4d7a7ccb9f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-1-noref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float-blue {
+ float: left;
+ margin-right: 20px;
+ background-color: blue;
+ width: 40px;
+ height: 100px;
+}
+.float-green {
+ float: left;
+ margin-right: 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+</head>
+<body>
+<div id="float-blue"></div>
+<div class="float-green"></div>
+<div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-1-ref.html b/layout/reftests/margin-collapsing/block-horizontal-1-ref.html
new file mode 100644
index 0000000000..9a49a81e0d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-1-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float-blue {
+ float: left;
+ margin-right: 40px;
+ background-color: blue;
+ width: 40px;
+ height: 100px;
+}
+.float-green {
+ float: left;
+ margin-right: 40px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+</head>
+<body>
+<div id="float-blue"></div>
+<div class="float-green"></div>
+<div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-1.html b/layout/reftests/margin-collapsing/block-horizontal-1.html
new file mode 100644
index 0000000000..5bbdcca399
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float-blue {
+ float: left;
+ margin-right: 20px;
+ background-color: blue;
+ width: 40px;
+ height: 100px;
+}
+.float-green {
+ float: left;
+ margin: 0 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+</head>
+<body>
+<div id="float-blue"></div>
+<div class="float-green"></div>
+<div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-2-dyn.html b/layout/reftests/margin-collapsing/block-horizontal-2-dyn.html
new file mode 100644
index 0000000000..25b9f38508
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-2-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#float-blue {
+ float: right;
+ margin-left: 20px;
+ background-color: blue;
+ width: 40px;
+ height: 100px;
+}
+.dyn {
+ display: none;
+}
+.float-green {
+ float: right;
+ margin: 0 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByClassName('dyn')[0].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="float-blue"></div>
+<div class="float-green dyn"></div>
+<div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-2-noref.html b/layout/reftests/margin-collapsing/block-horizontal-2-noref.html
new file mode 100644
index 0000000000..8eb2dd12f7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-2-noref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float-blue {
+ float: right;
+ margin-left: 20px;
+ background-color: blue;
+ width: 40px;
+ height: 100px;
+}
+.float-green {
+ float: right;
+ margin-left: 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+</head>
+<body>
+<div id="float-blue"></div>
+<div class="float-green"></div>
+<div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-2-ref.html b/layout/reftests/margin-collapsing/block-horizontal-2-ref.html
new file mode 100644
index 0000000000..21946ee308
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-2-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float-blue {
+ float: right;
+ margin-left: 40px;
+ background-color: blue;
+ width: 40px;
+ height: 100px;
+}
+.float-green {
+ float: right;
+ margin-left: 40px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+</head>
+<body>
+<div id="float-blue"></div>
+<div class="float-green"></div>
+<div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-2.html b/layout/reftests/margin-collapsing/block-horizontal-2.html
new file mode 100644
index 0000000000..8b1244528a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-2.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float-blue {
+ float: right;
+ margin-left: 20px;
+ background-color: blue;
+ width: 40px;
+ height: 100px;
+}
+.float-green {
+ float: right;
+ margin: 0 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+</head>
+<body>
+<div id="float-blue"></div>
+<div class="float-green"></div>
+<div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-3-dyn.html b/layout/reftests/margin-collapsing/block-horizontal-3-dyn.html
new file mode 100644
index 0000000000..bf465c02d1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-3-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#float-blue {
+ float: left;
+ margin-right: 20px;
+ background-color: blue;
+ height: 100px;
+}
+.dyn {
+ display: none;
+}
+.float-green {
+ float: left;
+ margin: 0 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByClassName('dyn')[0].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="float-blue"><div class="float-green dyn"></div></div><div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-3-noref.html b/layout/reftests/margin-collapsing/block-horizontal-3-noref.html
new file mode 100644
index 0000000000..b2f9e4e2ad
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-3-noref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float-blue {
+ float: left;
+ margin: 0 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+.float-green {
+ float: left;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+</head>
+<body>
+<div id="float-blue"></div><div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-3-ref.html b/layout/reftests/margin-collapsing/block-horizontal-3-ref.html
new file mode 100644
index 0000000000..9b84cbeb52
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-3-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float-blue {
+ float: left;
+ margin-right: 40px;
+ border: solid blue;
+ border-width: 0 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+.float-green {
+ float: left;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+</head>
+<body>
+<div id="float-blue"></div><div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-3.html b/layout/reftests/margin-collapsing/block-horizontal-3.html
new file mode 100644
index 0000000000..d10c1f13c6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-3.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float-blue {
+ float: left;
+ margin-right: 20px;
+ background-color: blue;
+ height: 100px;
+}
+.float-green {
+ float: left;
+ margin: 0 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+</head>
+<body>
+<div id="float-blue"><div class="float-green"></div></div><div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-4-dyn.html b/layout/reftests/margin-collapsing/block-horizontal-4-dyn.html
new file mode 100644
index 0000000000..9c8d9c65f7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-4-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#float-blue {
+ float: right;
+ margin-left: 20px;
+ background-color: blue;
+ height: 100px;
+}
+.dyn {
+ display: none;
+}
+.float-green {
+ float: right;
+ margin: 0 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByClassName('dyn')[0].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="float-blue"><div class="float-green dyn"></div></div><div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-4-noref.html b/layout/reftests/margin-collapsing/block-horizontal-4-noref.html
new file mode 100644
index 0000000000..5ed5bd06ea
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-4-noref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float-blue {
+ float: right;
+ margin: 0 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+.float-green {
+ float: right;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+</head>
+<body>
+<div id="float-blue"></div><div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-4-ref.html b/layout/reftests/margin-collapsing/block-horizontal-4-ref.html
new file mode 100644
index 0000000000..263530d2f6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-4-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float-blue {
+ float: right;
+ margin-left: 40px;
+ border: solid blue;
+ border-width: 0 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+.float-green {
+ float: right;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+</head>
+<body>
+<div id="float-blue"></div><div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-horizontal-4.html b/layout/reftests/margin-collapsing/block-horizontal-4.html
new file mode 100644
index 0000000000..6a4e5c1e20
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-horizontal-4.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float-blue {
+ float: right;
+ margin-left: 20px;
+ background-color: blue;
+ height: 100px;
+}
+.float-green {
+ float: right;
+ margin: 0 20px;
+ background-color: green;
+ width: 40px;
+ height: 100px;
+}
+</style>
+</head>
+<body>
+<div id="float-blue"><div class="float-green"></div></div><div class="float-green"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-body-1-noref.html b/layout/reftests/margin-collapsing/block-html-body-1-noref.html
new file mode 100644
index 0000000000..7f14949b22
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-body-1-noref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 0;
+ background-color: green;
+}
+div {
+ margin: 30px 20px;
+ background-color: red;
+ height: 20px;
+}
+div div {
+ margin: 50px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div><div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-body-1-ref.html b/layout/reftests/margin-collapsing/block-html-body-1-ref.html
new file mode 100644
index 0000000000..1d898d317e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-body-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html {
+ margin: 0; padding: 30px 20px;
+ background-color: green;
+}
+body {
+ margin: 0; padding: 0 30px;
+ background-color: red;
+}
+div {
+ background-color: blue;
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-body-1-ref2.html b/layout/reftests/margin-collapsing/block-html-body-1-ref2.html
new file mode 100644
index 0000000000..f527a4c25e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-body-1-ref2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 0;
+ background-color: green;
+}
+div {
+ margin: 30px 20px;
+ background-color: red;
+ height: 20px;
+}
+div div {
+ margin: 30px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div><div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-body-1.html b/layout/reftests/margin-collapsing/block-html-body-1.html
new file mode 100644
index 0000000000..c0b07ed16c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-body-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html {
+ margin: 0; padding: 0;
+ background-color: green;
+}
+body {
+ margin: 20px; padding: 0;
+ background-color: red;
+}
+div {
+ margin: 30px;
+ background-color: blue;
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-html-1-ref.html b/layout/reftests/margin-collapsing/block-html-html-1-ref.html
new file mode 100644
index 0000000000..103ae9f59d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-html-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style type="text/css">
+ html, body {
+ background-color: white;
+ margin: 0; padding: 0;
+ }
+ #the-html {
+ padding: 30px 0;
+ }
+ #the-body {
+ background-color: green;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div id="the-html">
+ <div id="the-body"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-html-1a-dyn.html b/layout/reftests/margin-collapsing/block-html-html-1a-dyn.html
new file mode 100644
index 0000000000..e898735aab
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-html-1a-dyn.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ margin: 20px 0;
+ }
+ body {
+ display: none;
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+ <script type="text/javascript">
+ function test() {
+ document.getElementsByTagName('body')[0].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+ }
+ document.addEventListener('MozReftestInvalidate', test);
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-html-1a.html b/layout/reftests/margin-collapsing/block-html-html-1a.html
new file mode 100644
index 0000000000..dafa925adc
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-html-1a.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ margin: 20px 0;
+ }
+ body {
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-html-1b-dyn.html b/layout/reftests/margin-collapsing/block-html-html-1b-dyn.html
new file mode 100644
index 0000000000..24455fd8a6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-html-1b-dyn.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ margin: 20px 0;
+ }
+ div {
+ display: none;
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+ <script type="text/javascript">
+ function test() {
+ document.getElementsByTagName('div')[0].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+ }
+ document.addEventListener('MozReftestInvalidate', test);
+ </script>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-html-1b.html b/layout/reftests/margin-collapsing/block-html-html-1b.html
new file mode 100644
index 0000000000..f302b81c7b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-html-1b.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ margin: 20px 0;
+ }
+ div {
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-html-2-dyn.html b/layout/reftests/margin-collapsing/block-html-html-2-dyn.html
new file mode 100644
index 0000000000..c3a08759b7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-html-2-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ }
+ body {
+ background-color: red;
+ margin: 20px 0;
+ }
+ div {
+ display: none;
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+ <script type="text/javascript">
+ function test() {
+ document.getElementsByTagName('div')[0].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+ }
+ document.addEventListener('MozReftestInvalidate', test);
+ </script>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-html-2-ref.html b/layout/reftests/margin-collapsing/block-html-html-2-ref.html
new file mode 100644
index 0000000000..6e0f6d89ef
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-html-2-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style type="text/css">
+ html, body, div {
+ margin: 0; padding: 0;
+ background-color: white;
+ }
+ #the-html {
+ padding: 20px 0;
+ }
+ #the-body {
+ background-color: red;
+ }
+ #the-div {
+ background-color: green;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div id="the-html">
+ <div id="the-body">
+ <div id="the-div"></div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-html-2.html b/layout/reftests/margin-collapsing/block-html-html-2.html
new file mode 100644
index 0000000000..aeb007ab99
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-html-2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ }
+ body {
+ background-color: red;
+ margin: 20px 0;
+ }
+ div {
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-html-3-dyn.html b/layout/reftests/margin-collapsing/block-html-html-3-dyn.html
new file mode 100644
index 0000000000..c3c5958567
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-html-3-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ margin: 10px 0;
+ }
+ body {
+ background-color: red;
+ margin: 20px 0;
+ }
+ div {
+ display: none;
+ background-color: green;
+ margin: 40px 0;
+ height: 100px;
+ }
+ </style>
+ <script type="text/javascript">
+ function test() {
+ document.getElementsByTagName('div')[0].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+ }
+ document.addEventListener('MozReftestInvalidate', test);
+ </script>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-html-3-ref.html b/layout/reftests/margin-collapsing/block-html-html-3-ref.html
new file mode 100644
index 0000000000..f9c935f371
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-html-3-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style type="text/css">
+ html, body, div {
+ margin: 0; padding: 0;
+ background-color: white;
+ }
+ #the-html {
+ padding: 50px 0;
+ }
+ #the-body {
+ background-color: red;
+ }
+ #the-div {
+ background-color: green;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div id="the-html">
+ <div id="the-body">
+ <div id="the-div"></div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-html-html-3.html b/layout/reftests/margin-collapsing/block-html-html-3.html
new file mode 100644
index 0000000000..b056b0a2e1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-html-html-3.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ margin: 10px 0;
+ }
+ body {
+ background-color: red;
+ margin: 20px 0;
+ }
+ div {
+ background-color: green;
+ margin: 40px 0;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-1-ref.html b/layout/reftests/margin-collapsing/block-last-child-1-ref.html
new file mode 100644
index 0000000000..06499e47d8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent, #child, #separator {
+ height: 20px;
+}
+#parent, #separator {
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent"></div>
+<div id="child"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-1a.html b/layout/reftests/margin-collapsing/block-last-child-1a.html
new file mode 100644
index 0000000000..0254a11009
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-1a.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 10px;
+}
+#child {
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-1b.html b/layout/reftests/margin-collapsing/block-last-child-1b.html
new file mode 100644
index 0000000000..e4b75680d2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-1b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 20px;
+}
+#child {
+ margin-bottom: 10px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-1c.html b/layout/reftests/margin-collapsing/block-last-child-1c.html
new file mode 100644
index 0000000000..322004da7c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-1c.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#child, #separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-bottom: 20px;
+}
+#child {
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-2-ref.html b/layout/reftests/margin-collapsing/block-last-child-2-ref.html
new file mode 100644
index 0000000000..49705dfcb4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-2-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 95px;
+ background-color: green;
+}
+#child {
+ height: 5px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent"></div>
+<div id="child"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-2a.html b/layout/reftests/margin-collapsing/block-last-child-2a.html
new file mode 100644
index 0000000000..6c7f1ada9a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-2a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#child {
+ height: 95px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-2b.html b/layout/reftests/margin-collapsing/block-last-child-2b.html
new file mode 100644
index 0000000000..887b3a239b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-2b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#child {
+ height: 95px;
+ background-color: green;
+ margin-bottom: 5px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-2c.html b/layout/reftests/margin-collapsing/block-last-child-2c.html
new file mode 100644
index 0000000000..434ff9a02c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-2c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#child {
+ height: 95px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-2d.html b/layout/reftests/margin-collapsing/block-last-child-2d.html
new file mode 100644
index 0000000000..2409e2504b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-2d.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#child {
+ height: 95px;
+ background-color: green;
+ margin-bottom: 30px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-3-ref.html b/layout/reftests/margin-collapsing/block-last-child-3-ref.html
new file mode 100644
index 0000000000..8c26ba8bc0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-3-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: green;
+}
+#child {
+ height: 20px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent"></div>
+<div id="child"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-3a.html b/layout/reftests/margin-collapsing/block-last-child-3a.html
new file mode 100644
index 0000000000..417edaf346
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-3a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#child {
+ height: 100px;
+ background-color: green;
+ margin-bottom: -10px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-3b.html b/layout/reftests/margin-collapsing/block-last-child-3b.html
new file mode 100644
index 0000000000..a10cbfe2a4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-3b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#child {
+ height: 100px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-3c.html b/layout/reftests/margin-collapsing/block-last-child-3c.html
new file mode 100644
index 0000000000..ed5f26bb96
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-3c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#child {
+ height: 100px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-3d.html b/layout/reftests/margin-collapsing/block-last-child-3d.html
new file mode 100644
index 0000000000..dd2a68563a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-3d.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#child {
+ height: 100px;
+ background-color: green;
+ margin-bottom: 30px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-4-ref.html b/layout/reftests/margin-collapsing/block-last-child-4-ref.html
new file mode 100644
index 0000000000..a94d25bf61
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-4-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: green;
+}
+#child {
+ height: 10px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent"></div>
+<div id="child"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-4a.html b/layout/reftests/margin-collapsing/block-last-child-4a.html
new file mode 100644
index 0000000000..a21f656360
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-4a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 90px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#child {
+ height: 100px;
+ background-color: green;
+ margin-bottom: -15px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-4b.html b/layout/reftests/margin-collapsing/block-last-child-4b.html
new file mode 100644
index 0000000000..0c5c1e7612
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-4b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 90px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#child {
+ height: 100px;
+ background-color: green;
+ margin-bottom: -10px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-4c.html b/layout/reftests/margin-collapsing/block-last-child-4c.html
new file mode 100644
index 0000000000..65935a4137
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-4c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 90px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#child {
+ height: 100px;
+ background-color: green;
+ margin-bottom: 5px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-last-child-4d.html b/layout/reftests/margin-collapsing/block-last-child-4d.html
new file mode 100644
index 0000000000..9aa1b77999
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-last-child-4d.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 90px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#child {
+ height: 100px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-1-ref.html b/layout/reftests/margin-collapsing/block-max-height-last-child-1-ref.html
new file mode 100644
index 0000000000..b76d867c90
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+#spacer {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="spacer"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-1a-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-1a-dyn.html
new file mode 100644
index 0000000000..cae3aa56cd
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-1a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-1a.html b/layout/reftests/margin-collapsing/block-max-height-last-child-1a.html
new file mode 100644
index 0000000000..eb47983d5b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-1a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-1b-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-1b-dyn.html
new file mode 100644
index 0000000000..09adf4b4e3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-1b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-1b.html b/layout/reftests/margin-collapsing/block-max-height-last-child-1b.html
new file mode 100644
index 0000000000..3294523800
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-1b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-1c-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-1c-dyn.html
new file mode 100644
index 0000000000..1e3beb82c1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-1c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-1c.html b/layout/reftests/margin-collapsing/block-max-height-last-child-1c.html
new file mode 100644
index 0000000000..159c13fe92
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-1c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-2-ref.html b/layout/reftests/margin-collapsing/block-max-height-last-child-2-ref.html
new file mode 100644
index 0000000000..b964f40f06
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-2-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+#spacer {
+ height: 10px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="spacer"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-2a-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-2a-dyn.html
new file mode 100644
index 0000000000..8802c506ae
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-2a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-2a.html b/layout/reftests/margin-collapsing/block-max-height-last-child-2a.html
new file mode 100644
index 0000000000..e4c3c3595c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-2a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-2b-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-2b-dyn.html
new file mode 100644
index 0000000000..eb2f896eec
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-2b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-2b.html b/layout/reftests/margin-collapsing/block-max-height-last-child-2b.html
new file mode 100644
index 0000000000..bab2c45623
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-2b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-3-ref.html b/layout/reftests/margin-collapsing/block-max-height-last-child-3-ref.html
new file mode 100644
index 0000000000..a6a8894c71
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-3-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-3a-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-3a-dyn.html
new file mode 100644
index 0000000000..3e994dc59b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-3a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-3a.html b/layout/reftests/margin-collapsing/block-max-height-last-child-3a.html
new file mode 100644
index 0000000000..7306962199
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-3a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-3b-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-3b-dyn.html
new file mode 100644
index 0000000000..407619a8bc
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-3b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-3b.html b/layout/reftests/margin-collapsing/block-max-height-last-child-3b.html
new file mode 100644
index 0000000000..ceacff109f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-3b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-3c-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-3c-dyn.html
new file mode 100644
index 0000000000..dae3b87db8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-3c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-3c.html b/layout/reftests/margin-collapsing/block-max-height-last-child-3c.html
new file mode 100644
index 0000000000..4653fe60b1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-3c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-4-ref.html b/layout/reftests/margin-collapsing/block-max-height-last-child-4-ref.html
new file mode 100644
index 0000000000..ea6b932c8d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-4-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+#spacer {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="spacer"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-4a-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-4a-dyn.html
new file mode 100644
index 0000000000..3bb7f1174b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-4a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-4a.html b/layout/reftests/margin-collapsing/block-max-height-last-child-4a.html
new file mode 100644
index 0000000000..0247f34a9b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-4a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-4b-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-4b-dyn.html
new file mode 100644
index 0000000000..31520f0eaa
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-4b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-4b.html b/layout/reftests/margin-collapsing/block-max-height-last-child-4b.html
new file mode 100644
index 0000000000..529868a2c0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-4b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-4c-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-4c-dyn.html
new file mode 100644
index 0000000000..eb19cdfcea
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-4c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-4c.html b/layout/reftests/margin-collapsing/block-max-height-last-child-4c.html
new file mode 100644
index 0000000000..06ea9ecf18
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-4c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-5-ref.html b/layout/reftests/margin-collapsing/block-max-height-last-child-5-ref.html
new file mode 100644
index 0000000000..cdd824aab0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-5-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+#spacer {
+ height: 10px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="spacer"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-5a-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-5a-dyn.html
new file mode 100644
index 0000000000..b6f79f03b2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-5a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-5a.html b/layout/reftests/margin-collapsing/block-max-height-last-child-5a.html
new file mode 100644
index 0000000000..745773dc0e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-5a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-5b-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-5b-dyn.html
new file mode 100644
index 0000000000..d8b3b18ea0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-5b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-5b.html b/layout/reftests/margin-collapsing/block-max-height-last-child-5b.html
new file mode 100644
index 0000000000..052310f0e6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-5b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-6-ref.html b/layout/reftests/margin-collapsing/block-max-height-last-child-6-ref.html
new file mode 100644
index 0000000000..d9cb40f169
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-6-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 80px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-6a-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-6a-dyn.html
new file mode 100644
index 0000000000..4f646ff44a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-6a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-6a.html b/layout/reftests/margin-collapsing/block-max-height-last-child-6a.html
new file mode 100644
index 0000000000..45f610a7f0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-6a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-6b-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-6b-dyn.html
new file mode 100644
index 0000000000..da90ad9e62
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-6b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-6b.html b/layout/reftests/margin-collapsing/block-max-height-last-child-6b.html
new file mode 100644
index 0000000000..8dfaf25979
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-6b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-6c-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-6c-dyn.html
new file mode 100644
index 0000000000..ef61957c13
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-6c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-6c.html b/layout/reftests/margin-collapsing/block-max-height-last-child-6c.html
new file mode 100644
index 0000000000..3d863d53bf
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-6c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-7-ref.html b/layout/reftests/margin-collapsing/block-max-height-last-child-7-ref.html
new file mode 100644
index 0000000000..59874fd98e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-7-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+#spacer {
+ height: 10px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="spacer"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-7a-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-7a-dyn.html
new file mode 100644
index 0000000000..937a717ff1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-7a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-7a.html b/layout/reftests/margin-collapsing/block-max-height-last-child-7a.html
new file mode 100644
index 0000000000..2899427b74
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-7a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-7b-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-7b-dyn.html
new file mode 100644
index 0000000000..b470aec10b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-7b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-7b.html b/layout/reftests/margin-collapsing/block-max-height-last-child-7b.html
new file mode 100644
index 0000000000..cac7e61efa
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-7b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-7c-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-7c-dyn.html
new file mode 100644
index 0000000000..1df357dd61
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-7c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-7c.html b/layout/reftests/margin-collapsing/block-max-height-last-child-7c.html
new file mode 100644
index 0000000000..07f9bfbee9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-7c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-8-ref.html b/layout/reftests/margin-collapsing/block-max-height-last-child-8-ref.html
new file mode 100644
index 0000000000..ed164173f4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-8-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-8a-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-8a-dyn.html
new file mode 100644
index 0000000000..65da9ecd20
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-8a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-8a.html b/layout/reftests/margin-collapsing/block-max-height-last-child-8a.html
new file mode 100644
index 0000000000..439b1cca53
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-8a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-8b-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-8b-dyn.html
new file mode 100644
index 0000000000..e5bbb1aab8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-8b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-8b.html b/layout/reftests/margin-collapsing/block-max-height-last-child-8b.html
new file mode 100644
index 0000000000..5a01975909
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-8b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-9-ref.html b/layout/reftests/margin-collapsing/block-max-height-last-child-9-ref.html
new file mode 100644
index 0000000000..ecacfcced9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-9-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+ position: relative;
+ top: -30px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-9a-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-9a-dyn.html
new file mode 100644
index 0000000000..f4cf1ce8bd
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-9a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-9a.html b/layout/reftests/margin-collapsing/block-max-height-last-child-9a.html
new file mode 100644
index 0000000000..1e453b7028
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-9a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-9b-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-9b-dyn.html
new file mode 100644
index 0000000000..99c8ff4a6a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-9b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-9b.html b/layout/reftests/margin-collapsing/block-max-height-last-child-9b.html
new file mode 100644
index 0000000000..54058c4427
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-9b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-9c-dyn.html b/layout/reftests/margin-collapsing/block-max-height-last-child-9c-dyn.html
new file mode 100644
index 0000000000..10ab566a01
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-9c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-max-height-last-child-9c.html b/layout/reftests/margin-collapsing/block-max-height-last-child-9c.html
new file mode 100644
index 0000000000..d14519000c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-max-height-last-child-9c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ max-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-1-ref.html b/layout/reftests/margin-collapsing/block-min-height-last-child-1-ref.html
new file mode 100644
index 0000000000..2de1ed215e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+#spacer {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="spacer"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-1a-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-1a-dyn.html
new file mode 100644
index 0000000000..c4236757f3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-1a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-1a.html b/layout/reftests/margin-collapsing/block-min-height-last-child-1a.html
new file mode 100644
index 0000000000..6fef0cbf84
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-1a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-1b-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-1b-dyn.html
new file mode 100644
index 0000000000..99bacb19a0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-1b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-1b.html b/layout/reftests/margin-collapsing/block-min-height-last-child-1b.html
new file mode 100644
index 0000000000..71e4884ee5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-1b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-1c-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-1c-dyn.html
new file mode 100644
index 0000000000..012f557b80
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-1c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-1c.html b/layout/reftests/margin-collapsing/block-min-height-last-child-1c.html
new file mode 100644
index 0000000000..ef01b9559e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-1c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-2-ref.html b/layout/reftests/margin-collapsing/block-min-height-last-child-2-ref.html
new file mode 100644
index 0000000000..2a0f946104
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 100px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+#spacer {
+ height: 10px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="spacer"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-2a-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-2a-dyn.html
new file mode 100644
index 0000000000..abb033c6b2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-2a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-2a.html b/layout/reftests/margin-collapsing/block-min-height-last-child-2a.html
new file mode 100644
index 0000000000..853d8f62de
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-2a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-2b-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-2b-dyn.html
new file mode 100644
index 0000000000..a871a769b4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-2b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-2b.html b/layout/reftests/margin-collapsing/block-min-height-last-child-2b.html
new file mode 100644
index 0000000000..3ec90c19b1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-2b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-3-ref.html b/layout/reftests/margin-collapsing/block-min-height-last-child-3-ref.html
new file mode 100644
index 0000000000..61d8b83ea0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-3-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 80px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-3a-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-3a-dyn.html
new file mode 100644
index 0000000000..6925c7649f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-3a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-3a.html b/layout/reftests/margin-collapsing/block-min-height-last-child-3a.html
new file mode 100644
index 0000000000..542afd0e7c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-3a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-3b-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-3b-dyn.html
new file mode 100644
index 0000000000..30829e71c2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-3b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-3b.html b/layout/reftests/margin-collapsing/block-min-height-last-child-3b.html
new file mode 100644
index 0000000000..8988bed364
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-3b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-3c-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-3c-dyn.html
new file mode 100644
index 0000000000..ed64e1ff62
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-3c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-3c.html b/layout/reftests/margin-collapsing/block-min-height-last-child-3c.html
new file mode 100644
index 0000000000..2d969df6dc
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-3c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 40px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-4-ref.html b/layout/reftests/margin-collapsing/block-min-height-last-child-4-ref.html
new file mode 100644
index 0000000000..ea6b932c8d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-4-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+#spacer {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="spacer"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-4a-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-4a-dyn.html
new file mode 100644
index 0000000000..a07bea3bab
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-4a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-4a.html b/layout/reftests/margin-collapsing/block-min-height-last-child-4a.html
new file mode 100644
index 0000000000..6e2081cc32
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-4a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-4b-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-4b-dyn.html
new file mode 100644
index 0000000000..588832c8ad
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-4b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-4b.html b/layout/reftests/margin-collapsing/block-min-height-last-child-4b.html
new file mode 100644
index 0000000000..8f27e38043
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-4b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-4c-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-4c-dyn.html
new file mode 100644
index 0000000000..5002bd8f52
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-4c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-4c.html b/layout/reftests/margin-collapsing/block-min-height-last-child-4c.html
new file mode 100644
index 0000000000..8858ae7272
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-4c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-5-ref.html b/layout/reftests/margin-collapsing/block-min-height-last-child-5-ref.html
new file mode 100644
index 0000000000..cdd824aab0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-5-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+#spacer {
+ height: 10px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="spacer"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-5a-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-5a-dyn.html
new file mode 100644
index 0000000000..8f9a386ef1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-5a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-5a.html b/layout/reftests/margin-collapsing/block-min-height-last-child-5a.html
new file mode 100644
index 0000000000..dd01bfadae
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-5a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-5b-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-5b-dyn.html
new file mode 100644
index 0000000000..183edccfd5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-5b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-5b.html b/layout/reftests/margin-collapsing/block-min-height-last-child-5b.html
new file mode 100644
index 0000000000..3856c32ad5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-5b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-6-ref.html b/layout/reftests/margin-collapsing/block-min-height-last-child-6-ref.html
new file mode 100644
index 0000000000..d9cb40f169
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-6-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 80px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-6a-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-6a-dyn.html
new file mode 100644
index 0000000000..3a01b4286b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-6a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-6a.html b/layout/reftests/margin-collapsing/block-min-height-last-child-6a.html
new file mode 100644
index 0000000000..64ed1366e0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-6a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-6b-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-6b-dyn.html
new file mode 100644
index 0000000000..3b65f4cca7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-6b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-6b.html b/layout/reftests/margin-collapsing/block-min-height-last-child-6b.html
new file mode 100644
index 0000000000..93a0c51620
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-6b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-6c-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-6c-dyn.html
new file mode 100644
index 0000000000..dfd6a50a6d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-6c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 100px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-6c.html b/layout/reftests/margin-collapsing/block-min-height-last-child-6c.html
new file mode 100644
index 0000000000..e22e6d615a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-6c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 100px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-7-ref.html b/layout/reftests/margin-collapsing/block-min-height-last-child-7-ref.html
new file mode 100644
index 0000000000..26b1d4df58
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-7-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+#spacer {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="spacer"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-7a-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-7a-dyn.html
new file mode 100644
index 0000000000..f7f57c3121
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-7a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-7a.html b/layout/reftests/margin-collapsing/block-min-height-last-child-7a.html
new file mode 100644
index 0000000000..f75fa60195
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-7a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-7b-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-7b-dyn.html
new file mode 100644
index 0000000000..cc6f369a46
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-7b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-7b.html b/layout/reftests/margin-collapsing/block-min-height-last-child-7b.html
new file mode 100644
index 0000000000..dc8fedbb04
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-7b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-7c-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-7c-dyn.html
new file mode 100644
index 0000000000..0bae038512
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-7c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-7c.html b/layout/reftests/margin-collapsing/block-min-height-last-child-7c.html
new file mode 100644
index 0000000000..a01b18615c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-7c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-8-ref.html b/layout/reftests/margin-collapsing/block-min-height-last-child-8-ref.html
new file mode 100644
index 0000000000..59874fd98e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-8-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+#spacer {
+ height: 10px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="spacer"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-8a-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-8a-dyn.html
new file mode 100644
index 0000000000..dfc5c688b0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-8a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-8a.html b/layout/reftests/margin-collapsing/block-min-height-last-child-8a.html
new file mode 100644
index 0000000000..79f4f1d219
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-8a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-8b-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-8b-dyn.html
new file mode 100644
index 0000000000..ed235ec708
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-8b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-8b.html b/layout/reftests/margin-collapsing/block-min-height-last-child-8b.html
new file mode 100644
index 0000000000..6cf40bb7b0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-8b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: 20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-9-ref.html b/layout/reftests/margin-collapsing/block-min-height-last-child-9-ref.html
new file mode 100644
index 0000000000..e43bf9cc04
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-9-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: lightgreen;
+}
+#last-child {
+ height: 90px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-9a-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-9a-dyn.html
new file mode 100644
index 0000000000..45803a79f5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-9a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-9a.html b/layout/reftests/margin-collapsing/block-min-height-last-child-9a.html
new file mode 100644
index 0000000000..dd239c8f49
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-9a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -10px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-9b-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-9b-dyn.html
new file mode 100644
index 0000000000..b4038a6a78
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-9b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-9b.html b/layout/reftests/margin-collapsing/block-min-height-last-child-9b.html
new file mode 100644
index 0000000000..d150f2eeab
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-9b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: -10px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-9c-dyn.html b/layout/reftests/margin-collapsing/block-min-height-last-child-9c-dyn.html
new file mode 100644
index 0000000000..afd698a7d1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-9c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ display: none;
+ height: 110px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-min-height-last-child-9c.html b/layout/reftests/margin-collapsing/block-min-height-last-child-9c.html
new file mode 100644
index 0000000000..7bf119ff3b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-min-height-last-child-9c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ min-height: 100px;
+ margin-bottom: -20px;
+ background-color: lightgreen;
+}
+#last-child {
+ height: 110px;
+ margin-bottom: -20px;
+ background-color: green;
+}
+#separator {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-1-noref1.html b/layout/reftests/margin-collapsing/block-negative-1-noref1.html
new file mode 100644
index 0000000000..33aa139353
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-1-noref1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-1-noref2.html b/layout/reftests/margin-collapsing/block-negative-1-noref2.html
new file mode 100644
index 0000000000..78105ea3e2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-1-noref2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+}
+#margin {
+ height: 20px;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="margin"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-1-ref.html b/layout/reftests/margin-collapsing/block-negative-1-ref.html
new file mode 100644
index 0000000000..cb8de3293a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-1a-dyn1.html b/layout/reftests/margin-collapsing/block-negative-1a-dyn1.html
new file mode 100644
index 0000000000..23cd0d7438
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-1a-dyn1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#b {
+ display: none;
+ height: 20px;
+ background-color: blue;
+ margin-top: -20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('b').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-1a-dyn2.html b/layout/reftests/margin-collapsing/block-negative-1a-dyn2.html
new file mode 100644
index 0000000000..d9b549d6dc
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-1a-dyn2.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+ margin-top: 0;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('b').style.marginTop = '-20px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-1a.html b/layout/reftests/margin-collapsing/block-negative-1a.html
new file mode 100644
index 0000000000..de0be2bece
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-1a.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+ margin-top: -20px;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-1b-dyn1.html b/layout/reftests/margin-collapsing/block-negative-1b-dyn1.html
new file mode 100644
index 0000000000..63738fcd6e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-1b-dyn1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: -20px;
+}
+#b {
+ display: none;
+ height: 20px;
+ background-color: blue;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('b').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-1b-dyn2.html b/layout/reftests/margin-collapsing/block-negative-1b-dyn2.html
new file mode 100644
index 0000000000..f4ac18a65d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-1b-dyn2.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: -20px;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+ margin-top: 0;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('b').style.marginTop = '20px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-1b.html b/layout/reftests/margin-collapsing/block-negative-1b.html
new file mode 100644
index 0000000000..f1eed8c0fb
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-1b.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: -20px;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-2-noref1.html b/layout/reftests/margin-collapsing/block-negative-2-noref1.html
new file mode 100644
index 0000000000..8252871a3a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-2-noref1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#b {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-2-noref2.html b/layout/reftests/margin-collapsing/block-negative-2-noref2.html
new file mode 100644
index 0000000000..cb8de3293a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-2-noref2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-2-ref.html b/layout/reftests/margin-collapsing/block-negative-2-ref.html
new file mode 100644
index 0000000000..90571cbd82
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-2-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#b {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-2a-dyn1.html b/layout/reftests/margin-collapsing/block-negative-2a-dyn1.html
new file mode 100644
index 0000000000..064bc2ad54
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-2a-dyn1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+}
+#b {
+ display: none;
+ height: 20px;
+ background-color: blue;
+ margin-top: -20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('b').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-2a-dyn2.html b/layout/reftests/margin-collapsing/block-negative-2a-dyn2.html
new file mode 100644
index 0000000000..a2813db4c5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-2a-dyn2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+ margin-top: 0;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('b').style.marginTop = '-20px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-2a.html b/layout/reftests/margin-collapsing/block-negative-2a.html
new file mode 100644
index 0000000000..995a0805ad
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-2a.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+ margin-top: -20px;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-2b-dyn1.html b/layout/reftests/margin-collapsing/block-negative-2b-dyn1.html
new file mode 100644
index 0000000000..cb22250ee1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-2b-dyn1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ display: none;
+ height: 20px;
+ background-color: green;
+ margin-bottom: -20px;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('a').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-2b-dyn2.html b/layout/reftests/margin-collapsing/block-negative-2b-dyn2.html
new file mode 100644
index 0000000000..ef84e2e899
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-2b-dyn2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 0;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('a').style.marginBottom = '-20px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-2b.html b/layout/reftests/margin-collapsing/block-negative-2b.html
new file mode 100644
index 0000000000..96e43a985c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-2b.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: -20px;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-3-noref1.html b/layout/reftests/margin-collapsing/block-negative-3-noref1.html
new file mode 100644
index 0000000000..6e36e4f352
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-3-noref1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#positive {
+ margin-bottom: 100px;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-3-noref2.html b/layout/reftests/margin-collapsing/block-negative-3-noref2.html
new file mode 100644
index 0000000000..900c8c4fa1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-3-noref2.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 100px;
+}
+#positive, #negative {
+ background-color: green;
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-3-ref.html b/layout/reftests/margin-collapsing/block-negative-3-ref.html
new file mode 100644
index 0000000000..8b4733d4a5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-3-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#positive {
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-3-ref2.html b/layout/reftests/margin-collapsing/block-negative-3-ref2.html
new file mode 100644
index 0000000000..92bd96df0b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-3-ref2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+}
+#positive, #negative {
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-3a-dyn1.html b/layout/reftests/margin-collapsing/block-negative-3a-dyn1.html
new file mode 100644
index 0000000000..999e871b70
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-3a-dyn1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#positive {
+ margin-bottom: 100px;
+}
+#negative {
+ display: none;
+ margin-top: -80px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('negative').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="positive"></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-3a-dyn2.html b/layout/reftests/margin-collapsing/block-negative-3a-dyn2.html
new file mode 100644
index 0000000000..5313945baa
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-3a-dyn2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#positive {
+ margin-bottom: 100px;
+}
+#negative {
+ margin-top: 0px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('negative').style.marginTop = '-80px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="positive"></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-3a.html b/layout/reftests/margin-collapsing/block-negative-3a.html
new file mode 100644
index 0000000000..06883fc399
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-3a.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#positive {
+ margin-bottom: 100px;
+}
+#negative {
+ margin-top: -80px;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-3b-dyn1.html b/layout/reftests/margin-collapsing/block-negative-3b-dyn1.html
new file mode 100644
index 0000000000..2cb9a37212
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-3b-dyn1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#negative {
+ margin-bottom: -80px;
+}
+#positive {
+ display: none;
+ margin-top: 100px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('positive').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="negative"></div>
+<div id="positive"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-3b-dyn2.html b/layout/reftests/margin-collapsing/block-negative-3b-dyn2.html
new file mode 100644
index 0000000000..67c0d82f4a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-3b-dyn2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#negative {
+ margin-bottom: -80px;
+}
+#positive {
+ margin-top: 0;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('positive').style.marginTop = '100px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="negative"></div>
+<div id="positive"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-3b.html b/layout/reftests/margin-collapsing/block-negative-3b.html
new file mode 100644
index 0000000000..cd39abdf9a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-3b.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#negative {
+ margin-bottom: -80px;
+}
+#positive {
+ margin-top: 100px;
+}
+</style>
+</head>
+<body>
+<div id="negative"></div>
+<div id="positive"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-4-noref1.html b/layout/reftests/margin-collapsing/block-negative-4-noref1.html
new file mode 100644
index 0000000000..47b9839b68
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-4-noref1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#positive {
+ background-color: blue;
+ margin-bottom: 40px;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-4-noref2.html b/layout/reftests/margin-collapsing/block-negative-4-noref2.html
new file mode 100644
index 0000000000..44365a2598
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-4-noref2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+#positive, #negative {
+ height: 20px;
+ background-color: blue;
+}
+#margin {
+ height: 40px;
+}
+#negative {
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div id="margin"></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-4-ref.html b/layout/reftests/margin-collapsing/block-negative-4-ref.html
new file mode 100644
index 0000000000..5435cdd3be
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-4-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#positive {
+ background-color: blue;
+ margin-bottom: 10px;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-4-ref2.html b/layout/reftests/margin-collapsing/block-negative-4-ref2.html
new file mode 100644
index 0000000000..c7b53e3f7d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-4-ref2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+#positive, #negative {
+ height: 20px;
+ background-color: blue;
+}
+#margin {
+ height: 10px;
+}
+#negative {
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div id="margin"></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-4a-dyn1.html b/layout/reftests/margin-collapsing/block-negative-4a-dyn1.html
new file mode 100644
index 0000000000..614a612ae7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-4a-dyn1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#positive {
+ margin-top: 30px;
+ margin-bottom: 40px;
+}
+#negative {
+ display: none;
+ margin-top: -90px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('negative').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="positive"></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-4a-dyn2.html b/layout/reftests/margin-collapsing/block-negative-4a-dyn2.html
new file mode 100644
index 0000000000..831ee41ca1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-4a-dyn2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#positive {
+ margin-top: 30px;
+ margin-bottom: 40px;
+}
+#negative {
+ margin-top: 0;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('negative').style.marginTop = '-90px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="positive"></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-4a.html b/layout/reftests/margin-collapsing/block-negative-4a.html
new file mode 100644
index 0000000000..72ae66725a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-4a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#positive {
+ margin-top: 30px;
+ margin-bottom: 40px;
+}
+#negative {
+ margin-top: -90px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-4b-dyn1.html b/layout/reftests/margin-collapsing/block-negative-4b-dyn1.html
new file mode 100644
index 0000000000..98b66d2041
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-4b-dyn1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#negative {
+ margin-top: 30px;
+ margin-bottom: -90px;
+}
+#positive {
+ display: none;
+ margin-top: 40px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('positive').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="negative"></div>
+<div id="positive"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-4b-dyn2.html b/layout/reftests/margin-collapsing/block-negative-4b-dyn2.html
new file mode 100644
index 0000000000..91adf56a9c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-4b-dyn2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#negative {
+ margin-top: 30px;
+ margin-bottom: -90px;
+}
+#positive {
+ margin-top: 0;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('positive').style.marginTop = '40px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="negative"></div>
+<div id="positive"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-4b.html b/layout/reftests/margin-collapsing/block-negative-4b.html
new file mode 100644
index 0000000000..7c89014f6a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-4b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#negative {
+ margin-top: 30px;
+ margin-bottom: -90px;
+}
+#positive {
+ margin-top: 40px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="negative"></div>
+<div id="positive"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-5-dyn1.html b/layout/reftests/margin-collapsing/block-negative-5-dyn1.html
new file mode 100644
index 0000000000..a36142bc29
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-5-dyn1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#small {
+ margin-top: 40px;
+ margin-bottom: -40px;
+}
+#big {
+ display: none;
+ margin-top: -60px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('big').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="small"></div>
+<div id="big"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-5-dyn2.html b/layout/reftests/margin-collapsing/block-negative-5-dyn2.html
new file mode 100644
index 0000000000..8e10974ff6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-5-dyn2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#small {
+ margin-top: 40px;
+ margin-bottom: -40px;
+}
+#big {
+ margin-top: 0;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('big').style.marginTop = '-60px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="small"></div>
+<div id="big"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-5-noref1.html b/layout/reftests/margin-collapsing/block-negative-5-noref1.html
new file mode 100644
index 0000000000..d29106af98
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-5-noref1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#small {
+ margin-top: 40px;
+ margin-bottom: -40px;
+}
+#big {
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="small"></div>
+<div id="big"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-5-noref2.html b/layout/reftests/margin-collapsing/block-negative-5-noref2.html
new file mode 100644
index 0000000000..ee397a4c21
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-5-noref2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+}
+#small {
+ background-color: green;
+}
+#big {
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div></div>
+<div id="big"></div>
+<div id="small"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-5-ref.html b/layout/reftests/margin-collapsing/block-negative-5-ref.html
new file mode 100644
index 0000000000..7a6713af3d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-5-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#big {
+ background-color: blue;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div id="big"></div>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-5-ref2.html b/layout/reftests/margin-collapsing/block-negative-5-ref2.html
new file mode 100644
index 0000000000..8ba0aade72
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-5-ref2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+}
+#positive {
+ background-color: blue;
+}
+#negative {
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-negative-5.html b/layout/reftests/margin-collapsing/block-negative-5.html
new file mode 100644
index 0000000000..f457a4148c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-negative-5.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 5px;
+}
+div {
+ height: 20px;
+ background-color: green;
+}
+#small {
+ margin-top: 40px;
+ margin-bottom: -40px;
+}
+#big {
+ margin-top: -60px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="small"></div>
+<div id="big"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-1-ref.html b/layout/reftests/margin-collapsing/block-no-content-1-ref.html
new file mode 100644
index 0000000000..aba40bf1af
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#margin-only {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="margin-only"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-1a-dyn.html b/layout/reftests/margin-collapsing/block-no-content-1a-dyn.html
new file mode 100644
index 0000000000..44582072d8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-1a-dyn.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('margin-only').style.margin = '10px 0 20px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="margin-only"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-1a.html b/layout/reftests/margin-collapsing/block-no-content-1a.html
new file mode 100644
index 0000000000..baf0c27599
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-1a.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="margin-only"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-1b-dyn.html b/layout/reftests/margin-collapsing/block-no-content-1b-dyn.html
new file mode 100644
index 0000000000..4ae5224008
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-1b-dyn.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('margin-only').style.margin = '20px 0 10px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="margin-only"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-1b.html b/layout/reftests/margin-collapsing/block-no-content-1b.html
new file mode 100644
index 0000000000..e1c6b88833
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-1b.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="margin-only"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-1c-dyn.html b/layout/reftests/margin-collapsing/block-no-content-1c-dyn.html
new file mode 100644
index 0000000000..c5525801fc
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-1c-dyn.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('margin-only').style.margin = '20px 0';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="margin-only"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-1c.html b/layout/reftests/margin-collapsing/block-no-content-1c.html
new file mode 100644
index 0000000000..748cfd7dda
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-1c.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="margin-only"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-1d-dyn.html b/layout/reftests/margin-collapsing/block-no-content-1d-dyn.html
new file mode 100644
index 0000000000..51710e2254
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-1d-dyn.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('margin-only').style.margin = '60px 0 -40px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="margin-only"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-1d.html b/layout/reftests/margin-collapsing/block-no-content-1d.html
new file mode 100644
index 0000000000..63bb28eb48
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-1d.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: 60px;
+ margin-bottom: -40px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="margin-only"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-2-ref.html b/layout/reftests/margin-collapsing/block-no-content-2-ref.html
new file mode 100644
index 0000000000..a7235c8c2d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: green;
+}
+#margin-only {
+ height: 40px;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="margin-only"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-2a-dyn.html b/layout/reftests/margin-collapsing/block-no-content-2a-dyn.html
new file mode 100644
index 0000000000..a0ddc7eccf
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-2a-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1 {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: 20px;
+ margin-bottom: 30px;
+}
+#block2 {
+ height: 20px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('block2').style.marginTop = '40px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="margin-only"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-2a.html b/layout/reftests/margin-collapsing/block-no-content-2a.html
new file mode 100644
index 0000000000..72d5b22f99
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-2a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1 {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: 20px;
+ margin-bottom: 30px;
+}
+#block2 {
+ height: 20px;
+ margin-top: 40px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="margin-only"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-2b-dyn.html b/layout/reftests/margin-collapsing/block-no-content-2b-dyn.html
new file mode 100644
index 0000000000..def572252b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-2b-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1 {
+ height: 20px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+#block2 {
+ height: 20px;
+ margin-top: 30px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('block1').style.marginBottom = '40px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="margin-only"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-2b.html b/layout/reftests/margin-collapsing/block-no-content-2b.html
new file mode 100644
index 0000000000..f9e69aa6a3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-2b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1 {
+ height: 20px;
+ margin-bottom: 40px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+#block2 {
+ height: 20px;
+ margin-top: 30px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="margin-only"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-2c-dyn.html b/layout/reftests/margin-collapsing/block-no-content-2c-dyn.html
new file mode 100644
index 0000000000..7a881fdc58
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-2c-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1 {
+ height: 20px;
+ margin-bottom: 30px;
+ background-color: green;
+}
+#margin-only {
+ margin-bottom: 10px;
+}
+#block2 {
+ height: 20px;
+ margin-top: 20px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('margin-only').style.marginTop = '40px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="margin-only"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-2c.html b/layout/reftests/margin-collapsing/block-no-content-2c.html
new file mode 100644
index 0000000000..7978ca3885
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-2c.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1 {
+ height: 20px;
+ margin-bottom: 30px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: 40px;
+ margin-bottom: 10px;
+}
+#block2 {
+ height: 20px;
+ margin-top: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="margin-only"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-2d-dyn.html b/layout/reftests/margin-collapsing/block-no-content-2d-dyn.html
new file mode 100644
index 0000000000..f5c8dbd3cd
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-2d-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1 {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: 30px;
+}
+#block2 {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('margin-only').style.marginBottom = '40px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="margin-only"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-2d.html b/layout/reftests/margin-collapsing/block-no-content-2d.html
new file mode 100644
index 0000000000..30dcb49850
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-2d.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1 {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: 30px;
+ margin-bottom: 40px;
+}
+#block2 {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="margin-only"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-2e-dyn.html b/layout/reftests/margin-collapsing/block-no-content-2e-dyn.html
new file mode 100644
index 0000000000..72ba4ac49f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-2e-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1 {
+ height: 20px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: -40px;
+ margin-bottom: 20px;
+}
+#block2 {
+ height: 20px;
+ margin-top: -10px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('block1').style.marginBottom = '80px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="margin-only"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-2e.html b/layout/reftests/margin-collapsing/block-no-content-2e.html
new file mode 100644
index 0000000000..bb0896d0db
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-2e.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1 {
+ height: 20px;
+ margin-bottom: 80px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: -40px;
+ margin-bottom: 20px;
+}
+#block2 {
+ height: 20px;
+ margin-top: -10px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="margin-only"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-3-ref.html b/layout/reftests/margin-collapsing/block-no-content-3-ref.html
new file mode 100644
index 0000000000..a5b22d4333
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-3-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator, #parent {
+ height: 20px;
+ background-color: green;
+}
+#spacer {
+ height: 30px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="spacer"></div>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-3a-dyn.html b/layout/reftests/margin-collapsing/block-no-content-3a-dyn.html
new file mode 100644
index 0000000000..e23807cf56
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-3a-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: green;
+ margin-top: 10px;
+}
+#first-child {
+ margin-top: 20px;
+}
+#last-child {
+ height: 20px;
+ margin-top: 15px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('first-child').style.marginBottom = '30px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-3a.html b/layout/reftests/margin-collapsing/block-no-content-3a.html
new file mode 100644
index 0000000000..32933c2bef
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-3a.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: green;
+ margin-top: 10px;
+}
+#first-child {
+ margin-top: 20px;
+ margin-bottom: 30px;
+}
+#last-child {
+ height: 20px;
+ margin-top: 15px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-3b-dyn.html b/layout/reftests/margin-collapsing/block-no-content-3b-dyn.html
new file mode 100644
index 0000000000..4a00ff49a1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-3b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: green;
+ margin-top: -10px;
+}
+#first-child {
+ margin-bottom: 70px;
+}
+#last-child {
+ height: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('first-child').style.marginTop = '-40px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-3b.html b/layout/reftests/margin-collapsing/block-no-content-3b.html
new file mode 100644
index 0000000000..00f8151631
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-3b.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: green;
+ margin-top: -10px;
+}
+#first-child {
+ margin-top: -40px;
+ margin-bottom: 70px;
+}
+#last-child {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-3c-dyn.html b/layout/reftests/margin-collapsing/block-no-content-3c-dyn.html
new file mode 100644
index 0000000000..0bbee29d1c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-3c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: green;
+ margin-top: 90px;
+}
+#first-child {
+ margin-top: -40px;
+}
+#last-child {
+ height: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('first-child').style.marginBottom = '-60px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-3c.html b/layout/reftests/margin-collapsing/block-no-content-3c.html
new file mode 100644
index 0000000000..39ad02c621
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-3c.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ background-color: green;
+ margin-top: 90px;
+}
+#first-child {
+ margin-top: -40px;
+ margin-bottom: -60px;
+}
+#last-child {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="separator"></div>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-4-ref.html b/layout/reftests/margin-collapsing/block-no-content-4-ref.html
new file mode 100644
index 0000000000..e3dc1c4e20
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-4-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent, #separator {
+ height: 20px;
+ background-color: green;
+}
+#spacer {
+ height: 40px;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+<div id="spacer"></div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-4a-dyn.html b/layout/reftests/margin-collapsing/block-no-content-4a-dyn.html
new file mode 100644
index 0000000000..53a5041f7d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-4a-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ margin-bottom: 10px;
+}
+#last-child {
+ margin-top: 30px;
+}
+#separator {
+ height: 20px;
+ margin-top: 20px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.marginBottom = '40px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-4a.html b/layout/reftests/margin-collapsing/block-no-content-4a.html
new file mode 100644
index 0000000000..a10149767a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-4a.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+ margin-bottom: 10px;
+}
+#last-child {
+ margin-top: 30px;
+ margin-bottom: 40px;
+}
+#separator {
+ height: 20px;
+ margin-top: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-4b-dyn.html b/layout/reftests/margin-collapsing/block-no-content-4b-dyn.html
new file mode 100644
index 0000000000..421fdce7eb
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-4b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+}
+#last-child {
+ margin-top: 60px;
+}
+#separator {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.marginBottom = '-20px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-4b.html b/layout/reftests/margin-collapsing/block-no-content-4b.html
new file mode 100644
index 0000000000..4faf50c21e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-4b.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+}
+#last-child {
+ margin-top: 60px;
+ margin-bottom: -20px;
+}
+#separator {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-4c-dyn.html b/layout/reftests/margin-collapsing/block-no-content-4c-dyn.html
new file mode 100644
index 0000000000..d6c5e0dbf5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-4c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+}
+#last-child {
+ margin-top: -20px;
+}
+#separator {
+ height: 20px;
+ margin-top: 70px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('last-child').style.marginBottom = '-30px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-4c.html b/layout/reftests/margin-collapsing/block-no-content-4c.html
new file mode 100644
index 0000000000..0b6daef65e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-4c.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ background-color: green;
+}
+#first-child {
+ height: 20px;
+}
+#last-child {
+ margin-top: -20px;
+ margin-bottom: -30px;
+}
+#separator {
+ height: 20px;
+ margin-top: 70px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="first-child"></div>
+ <div id="last-child"></div>
+</div>
+<div id="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-5-ref.html b/layout/reftests/margin-collapsing/block-no-content-5-ref.html
new file mode 100644
index 0000000000..df55ad5424
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-5-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#child {
+ height: 40px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-5a-dyn.html b/layout/reftests/margin-collapsing/block-no-content-5a-dyn.html
new file mode 100644
index 0000000000..b7f0be92fc
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-5a-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 10px;
+ margin-bottom: 30px;
+}
+#child {
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('child').style.marginBottom = '40px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-5a.html b/layout/reftests/margin-collapsing/block-no-content-5a.html
new file mode 100644
index 0000000000..3926ecd298
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-5a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 10px;
+ margin-bottom: 30px;
+}
+#child {
+ margin-top: 20px;
+ margin-bottom: 40px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-5b-dyn.html b/layout/reftests/margin-collapsing/block-no-content-5b-dyn.html
new file mode 100644
index 0000000000..69e1f225f1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-5b-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 60px;
+ margin-bottom: -30px;
+}
+#child {
+ margin-top: -20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('child').style.marginBottom = '70px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-5b.html b/layout/reftests/margin-collapsing/block-no-content-5b.html
new file mode 100644
index 0000000000..39814db731
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-5b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#parent {
+ margin-top: 60px;
+ margin-bottom: -30px;
+}
+#child {
+ margin-top: -20px;
+ margin-bottom: 70px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="parent">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-6-dyn.html b/layout/reftests/margin-collapsing/block-no-content-6-dyn.html
new file mode 100644
index 0000000000..cea2f39728
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-6-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#spacer {
+ height: 40px;
+}
+#block1 {
+ height: 20px;
+ background-color: green;
+}
+#margin-only {
+ margin-bottom: -40px;
+}
+#block2 {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('margin-only').style.marginTop = '-60px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="spacer"></div>
+<div id="block1"></div>
+<div id="margin-only"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-6-ref.html b/layout/reftests/margin-collapsing/block-no-content-6-ref.html
new file mode 100644
index 0000000000..a982b3cbc0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-6-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1 {
+ height: 20px;
+ background-color: green;
+}
+#margin-only {
+ height: 20px;
+}
+#block2 {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="spacer"></div>
+<div id="block2"></div>
+<div id="margin-only"></div>
+<div id="block1"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-6.html b/layout/reftests/margin-collapsing/block-no-content-6.html
new file mode 100644
index 0000000000..3bc17bfa91
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-6.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#spacer {
+ height: 40px;
+}
+#block1 {
+ height: 20px;
+ background-color: green;
+}
+#margin-only {
+ margin-top: -60px;
+ margin-bottom: -40px;
+}
+#block2 {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="spacer"></div>
+<div id="block1"></div>
+<div id="margin-only"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-7-dyn.html b/layout/reftests/margin-collapsing/block-no-content-7-dyn.html
new file mode 100644
index 0000000000..59d05abfdd
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-7-dyn.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#bfc {
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('bfc').style.overflow = 'hidden';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="bfc"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-7-ref.html b/layout/reftests/margin-collapsing/block-no-content-7-ref.html
new file mode 100644
index 0000000000..777047603b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-7-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#bfc {
+ height: 30px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="bfc"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-7.html b/layout/reftests/margin-collapsing/block-no-content-7.html
new file mode 100644
index 0000000000..4ededc1e29
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-7.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#bfc {
+ margin-top: 10px;
+ margin-bottom: 20px;
+ overflow: hidden;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="bfc"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-8-dyn.html b/layout/reftests/margin-collapsing/block-no-content-8-dyn.html
new file mode 100644
index 0000000000..f656c40529
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-8-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ margin-top: 30px;
+ margin-bottom: 40px;
+ background-color: blue;
+}
+#zero-height {
+ margin-top: 20px;
+ margin-bottom: 60px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('min-height').style.minHeight = '20px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height">
+ <div id="zero-height"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-8-ref.html b/layout/reftests/margin-collapsing/block-no-content-8-ref.html
new file mode 100644
index 0000000000..f2f666e9bf
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-8-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#spacer1 {
+ height: 60px;
+}
+#min-height {
+ height: 20px;
+ background-color: blue;
+}
+#spacer2 {
+ height: 40px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="spacer1"></div>
+<div id="min-height">
+ <div id="zero-height"></div>
+</div>
+<div id="spacer2"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-no-content-8.html b/layout/reftests/margin-collapsing/block-no-content-8.html
new file mode 100644
index 0000000000..23d703e9c6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-no-content-8.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 20px;
+ margin-top: 30px;
+ margin-bottom: 40px;
+ background-color: blue;
+}
+#zero-height {
+ margin-top: 20px;
+ margin-bottom: 60px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height">
+ <div id="zero-height"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1-ref.html b/layout/reftests/margin-collapsing/block-non-sibling-1-ref.html
new file mode 100644
index 0000000000..3ac1546ff9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 40px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1-ref2.html b/layout/reftests/margin-collapsing/block-non-sibling-1-ref2.html
new file mode 100644
index 0000000000..0a885f0194
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1-ref2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#positive, #negative {
+ background-color: green;
+ height: 20px;
+}
+#margin {
+ height: 40px;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div id="margin"></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1a-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-1a-dyn.html
new file mode 100644
index 0000000000..d9e296e49f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 10px;
+}
+#a div {
+ display: none;
+ height: 20px;
+ margin-bottom: 20px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 40px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[1].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1a.html b/layout/reftests/margin-collapsing/block-non-sibling-1a.html
new file mode 100644
index 0000000000..d35cf93da3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 10px;
+}
+#a div {
+ height: 20px;
+ margin-bottom: 20px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 40px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1b-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-1b-dyn.html
new file mode 100644
index 0000000000..7037bb8ba7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 10px;
+}
+#a div {
+ display: none;
+ height: 20px;
+ margin-bottom: 40px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[1].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1b.html b/layout/reftests/margin-collapsing/block-non-sibling-1b.html
new file mode 100644
index 0000000000..5d03eb2cb6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 10px;
+}
+#a div {
+ height: 20px;
+ margin-bottom: 40px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1c-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-1c-dyn.html
new file mode 100644
index 0000000000..e55eb7e4d5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 20px;
+}
+#a div {
+ display: none;
+ height: 20px;
+ margin-bottom: 10px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 40px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[1].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1c.html b/layout/reftests/margin-collapsing/block-non-sibling-1c.html
new file mode 100644
index 0000000000..c3f49d4b83
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 20px;
+}
+#a div {
+ height: 20px;
+ margin-bottom: 10px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 40px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1d-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-1d-dyn.html
new file mode 100644
index 0000000000..0be8b3152e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1d-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 20px;
+}
+#a div {
+ display: none;
+ height: 20px;
+ margin-bottom: 40px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[1].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1d.html b/layout/reftests/margin-collapsing/block-non-sibling-1d.html
new file mode 100644
index 0000000000..c80e54c4ce
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1d.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 20px;
+}
+#a div {
+ height: 20px;
+ margin-bottom: 40px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1e-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-1e-dyn.html
new file mode 100644
index 0000000000..c65cdf33e4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1e-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 40px;
+}
+#a div {
+ display: none;
+ height: 20px;
+ margin-bottom: 10px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[1].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1e.html b/layout/reftests/margin-collapsing/block-non-sibling-1e.html
new file mode 100644
index 0000000000..070634f359
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1e.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 40px;
+}
+#a div {
+ height: 20px;
+ margin-bottom: 10px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1f-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-1f-dyn.html
new file mode 100644
index 0000000000..1d680f68b1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1f-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 40px;
+}
+#a div {
+ display: none;
+ height: 20px;
+ margin-bottom: 20px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[1].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-1f.html b/layout/reftests/margin-collapsing/block-non-sibling-1f.html
new file mode 100644
index 0000000000..9fe0dfe4cf
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-1f.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 40px;
+}
+#a div {
+ height: 20px;
+ margin-bottom: 20px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2-ref.html b/layout/reftests/margin-collapsing/block-non-sibling-2-ref.html
new file mode 100644
index 0000000000..3ac1546ff9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 40px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2-ref2.html b/layout/reftests/margin-collapsing/block-non-sibling-2-ref2.html
new file mode 100644
index 0000000000..0a885f0194
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2-ref2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#positive, #negative {
+ background-color: green;
+ height: 20px;
+}
+#margin {
+ height: 40px;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div id="margin"></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2a-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-2a-dyn.html
new file mode 100644
index 0000000000..9ad8c44d23
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 10px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 20px;
+}
+#b div {
+ display: none;
+ height: 20px;
+ margin-top: 40px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[2].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2a.html b/layout/reftests/margin-collapsing/block-non-sibling-2a.html
new file mode 100644
index 0000000000..9e39ade716
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 10px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 20px;
+}
+#b div {
+ height: 20px;
+ margin-top: 40px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2b-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-2b-dyn.html
new file mode 100644
index 0000000000..90a4b09bfa
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 10px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 40px;
+}
+#b div {
+ display: none;
+ height: 20px;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[2].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2b.html b/layout/reftests/margin-collapsing/block-non-sibling-2b.html
new file mode 100644
index 0000000000..e62d647d4f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 10px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 40px;
+}
+#b div {
+ height: 20px;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2c-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-2c-dyn.html
new file mode 100644
index 0000000000..64dcb39519
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2c-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 20px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 10px;
+}
+#b div {
+ display: none;
+ height: 20px;
+ margin-top: 40px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[2].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2c.html b/layout/reftests/margin-collapsing/block-non-sibling-2c.html
new file mode 100644
index 0000000000..ea29ec58f0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 20px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 10px;
+}
+#b div {
+ height: 20px;
+ margin-top: 40px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2d-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-2d-dyn.html
new file mode 100644
index 0000000000..2bc24d198e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2d-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 20px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 40px;
+}
+#b div {
+ display: none;
+ height: 20px;
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[2].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2d.html b/layout/reftests/margin-collapsing/block-non-sibling-2d.html
new file mode 100644
index 0000000000..e9bcf3d2cd
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2d.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 20px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 40px;
+}
+#b div {
+ height: 20px;
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2e-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-2e-dyn.html
new file mode 100644
index 0000000000..7fd02bc8ae
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2e-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 40px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 10px;
+}
+#b div {
+ display: none;
+ height: 20px;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[2].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2e.html b/layout/reftests/margin-collapsing/block-non-sibling-2e.html
new file mode 100644
index 0000000000..8bb4d2f0d0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2e.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 40px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 10px;
+}
+#b div {
+ height: 20px;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2f-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-2f-dyn.html
new file mode 100644
index 0000000000..f7b2398f5f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2f-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 40px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 20px;
+}
+#b div {
+ display: none;
+ height: 20px;
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[2].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-2f.html b/layout/reftests/margin-collapsing/block-non-sibling-2f.html
new file mode 100644
index 0000000000..30a1a5930d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-2f.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 40px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 20px;
+}
+#b div {
+ height: 20px;
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-3-ref.html b/layout/reftests/margin-collapsing/block-non-sibling-3-ref.html
new file mode 100644
index 0000000000..032af57343
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-3-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 80px;
+ height: 20px;
+}
+#b {
+ background-color: green;
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-3-ref2.html b/layout/reftests/margin-collapsing/block-non-sibling-3-ref2.html
new file mode 100644
index 0000000000..834bc9c63b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-3-ref2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#positive, #negative {
+ background-color: green;
+ height: 20px;
+}
+#margin {
+ height: 80px;
+}
+</style>
+</head>
+<body>
+<div id="positive"></div>
+<div id="margin"></div>
+<div id="negative"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-3a-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-3a-dyn.html
new file mode 100644
index 0000000000..65628e1b6f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-3a-dyn.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 10px;
+}
+#a div {
+ display: none;
+ height: 20px;
+ margin-bottom: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 40px;
+}
+#b div {
+ display: none;
+ height: 20px;
+ margin-top: 80px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[1].style.display = 'block';
+ document.getElementsByTagName('div')[3].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-3a.html b/layout/reftests/margin-collapsing/block-non-sibling-3a.html
new file mode 100644
index 0000000000..73d5351075
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-3a.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 10px;
+}
+#a div {
+ height: 20px;
+ margin-bottom: 20px;
+}
+#b {
+ background-color: green;
+ margin-top: 40px;
+}
+#b div {
+ height: 20px;
+ margin-top: 80px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-3b-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-3b-dyn.html
new file mode 100644
index 0000000000..07e0ad0aa3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-3b-dyn.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 80px;
+}
+#a div {
+ display: none;
+ height: 20px;
+ margin-bottom: 10px;
+}
+#b {
+ background-color: green;
+ margin-top: 20px;
+}
+#b div {
+ display: none;
+ height: 20px;
+ margin-top: 40px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[1].style.display = 'block';
+ document.getElementsByTagName('div')[3].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-3b.html b/layout/reftests/margin-collapsing/block-non-sibling-3b.html
new file mode 100644
index 0000000000..08e7aa1cba
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-3b.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 80px;
+}
+#a div {
+ height: 20px;
+ margin-bottom: 10px;
+}
+#b {
+ background-color: green;
+ margin-top: 20px;
+}
+#b div {
+ height: 20px;
+ margin-top: 40px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-3c-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-3c-dyn.html
new file mode 100644
index 0000000000..bbf590d907
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-3c-dyn.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 40px;
+}
+#a div {
+ display: none;
+ height: 20px;
+ margin-bottom: 80px;
+}
+#b {
+ background-color: green;
+ margin-top: 10px;
+}
+#b div {
+ display: none;
+ height: 20px;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[1].style.display = 'block';
+ document.getElementsByTagName('div')[3].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-3c.html b/layout/reftests/margin-collapsing/block-non-sibling-3c.html
new file mode 100644
index 0000000000..8fe9f627f7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-3c.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 40px;
+}
+#a div {
+ height: 20px;
+ margin-bottom: 80px;
+}
+#b {
+ background-color: green;
+ margin-top: 10px;
+}
+#b div {
+ height: 20px;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-3d-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-3d-dyn.html
new file mode 100644
index 0000000000..d0f27445f0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-3d-dyn.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 20px;
+}
+#a div {
+ display: none;
+ height: 20px;
+ margin-bottom: 40px;
+}
+#b {
+ background-color: green;
+ margin-top: 80px;
+}
+#b div {
+ display: none;
+ height: 20px;
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('div')[1].style.display = 'block';
+ document.getElementsByTagName('div')[3].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-3d.html b/layout/reftests/margin-collapsing/block-non-sibling-3d.html
new file mode 100644
index 0000000000..60214d791c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-3d.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ margin-bottom: 20px;
+}
+#a div {
+ height: 20px;
+ margin-bottom: 40px;
+}
+#b {
+ background-color: green;
+ margin-top: 80px;
+}
+#b div {
+ height: 20px;
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="a">
+ <div></div>
+</div>
+<div id="b">
+ <div></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-4-dyn.html b/layout/reftests/margin-collapsing/block-non-sibling-4-dyn.html
new file mode 100644
index 0000000000..fb75d7ee04
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-4-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#bar1 {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#none {
+ height: 20px;
+ background-color: red;
+ margin-top: 30px;
+ margin-bottom: 40px;
+}
+#bar2 {
+ height: 20px;
+ background-color: blue;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('none').style.display = 'none';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="bar1"></div>
+<div id="none"></div>
+<div id="bar2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-4-ref.html b/layout/reftests/margin-collapsing/block-non-sibling-4-ref.html
new file mode 100644
index 0000000000..e9ef9a691f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-4-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#bar1 {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#bar2 {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="bar1"></div>
+<div id="bar2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-4-ref2.html b/layout/reftests/margin-collapsing/block-non-sibling-4-ref2.html
new file mode 100644
index 0000000000..37ca892865
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-4-ref2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#bar1 {
+ background-color: green;
+}
+div {
+ height: 20px;
+}
+#bar2 {
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="bar1"></div>
+<div></div>
+<div id="bar2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-non-sibling-4.html b/layout/reftests/margin-collapsing/block-non-sibling-4.html
new file mode 100644
index 0000000000..2db4771679
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-non-sibling-4.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#bar1 {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#none {
+ display: none;
+ height: 20px;
+ background-color: red;
+ margin-top: 30px;
+ margin-bottom: 40px;
+}
+#bar2 {
+ height: 20px;
+ background-color: blue;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="bar1"></div>
+<div id="none"></div>
+<div id="bar2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-1-dyn.html b/layout/reftests/margin-collapsing/block-overflow-1-dyn.html
new file mode 100644
index 0000000000..5829c65c53
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-1-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#overflow {
+ overflow: hidden;
+ margin: 20px 0;
+ background-color: lightgreen;
+}
+#child {
+ height: 200px;
+ margin: 40px 0;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('overflow').style.overflow = 'visible';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="overflow">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-1-ref.html b/layout/reftests/margin-collapsing/block-overflow-1-ref.html
new file mode 100644
index 0000000000..bc8e09a035
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#overflow-child {
+ height: 200px;
+ margin: 40px 0;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="overflow-child"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-1-ref2.html b/layout/reftests/margin-collapsing/block-overflow-1-ref2.html
new file mode 100644
index 0000000000..d2b7a4f5df
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-1-ref2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+.spacer {
+ height: 40px;
+}
+#overflow {
+ height: 200px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div class="spacer"></div>
+<div id="overflow"></div>
+<div class="spacer"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-1.html b/layout/reftests/margin-collapsing/block-overflow-1.html
new file mode 100644
index 0000000000..23090df965
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#overflow {
+ overflow: visible;
+ margin: 20px 0;
+ background-color: lightgreen;
+}
+#child {
+ height: 200px;
+ margin: 40px 0;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="overflow">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-2-dyn.html b/layout/reftests/margin-collapsing/block-overflow-2-dyn.html
new file mode 100644
index 0000000000..5a80632b5e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-2-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#overflow {
+ height: 200px;
+ margin: 20px 0;
+ background-color: lightgreen;
+}
+#child {
+ height: 160px;
+ margin: 40px 0;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('overflow').style.overflow = 'hidden';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="overflow">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-2-ref.html b/layout/reftests/margin-collapsing/block-overflow-2-ref.html
new file mode 100644
index 0000000000..2134c84910
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-2-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#overflow {
+ margin: 20px 0;
+ padding-top: 40px;
+ background-color: lightgreen;
+}
+#child {
+ height: 160px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="overflow">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-2-ref2.html b/layout/reftests/margin-collapsing/block-overflow-2-ref2.html
new file mode 100644
index 0000000000..5698c631f8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-2-ref2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+.spacer {
+ height: 20px;
+}
+#margin {
+ height: 40px;
+ background-color: lightgreen;
+}
+#child {
+ height: 160px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div class="spacer"></div>
+<div>
+ <div id="margin"></div>
+ <div id="child"></div>
+</div>
+<div class="spacer"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-2.html b/layout/reftests/margin-collapsing/block-overflow-2.html
new file mode 100644
index 0000000000..a980d3dcdf
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-2.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#overflow {
+ overflow: hidden;
+ height: 200px;
+ margin: 20px 0;
+ background-color: lightgreen;
+}
+#child {
+ height: 160px;
+ margin: 40px 0;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="overflow">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-3-dyn.html b/layout/reftests/margin-collapsing/block-overflow-3-dyn.html
new file mode 100644
index 0000000000..995c17b59f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-3-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#overflow {
+ overflow-y: visible;
+ height: 200px;
+ margin: 20px 0;
+ background-color: lightgreen;
+}
+#child {
+ height: 160px;
+ margin: 40px 0;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('overflow').style.overflowY = 'scroll';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="overflow">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-3-ref.html b/layout/reftests/margin-collapsing/block-overflow-3-ref.html
new file mode 100644
index 0000000000..d793991ce3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-3-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#overflow {
+ overflow-y: scroll;
+ height: 160px;
+ margin: 20px 0;
+ padding-top: 40px;
+ background-color: lightgreen;
+}
+#child {
+ height: 160px;
+ background-color: green;
+}
+#margin {
+ height: 40px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="overflow">
+ <div id="child"></div>
+ <div id="margin"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-3-ref2.html b/layout/reftests/margin-collapsing/block-overflow-3-ref2.html
new file mode 100644
index 0000000000..ce8bf5784a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-3-ref2.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+.spacer {
+ height: 20px;
+}
+#overflow {
+ overflow-y: scroll;
+ height: 200px;
+ background-color: lightgreen;
+}
+.margin {
+ height: 40px;
+}
+#child {
+ height: 160px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div class="spacer"></div>
+<div id="overflow">
+ <div class="margin"></div>
+ <div id="child"></div>
+ <div class="margin"></div>
+</div>
+<div class="spacer"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-3.html b/layout/reftests/margin-collapsing/block-overflow-3.html
new file mode 100644
index 0000000000..201cc9eb7f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-3.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#overflow {
+ overflow-y: scroll;
+ height: 200px;
+ margin: 20px 0;
+ background-color: lightgreen;
+}
+#child {
+ height: 160px;
+ margin: 40px 0;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="overflow">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-4-dyn.html b/layout/reftests/margin-collapsing/block-overflow-4-dyn.html
new file mode 100644
index 0000000000..6a2d08983c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-4-dyn.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#overflow {
+ overflow: visible;
+ height: 200px;
+ margin: 20px 0;
+ background-color: lightgreen;
+}
+#child {
+ height: 160px;
+ margin: 40px 0;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('overflow').style.overflow = 'auto';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="overflow">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-4-ref.html b/layout/reftests/margin-collapsing/block-overflow-4-ref.html
new file mode 100644
index 0000000000..7bd228b68a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-4-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#overflow {
+ overflow: auto;
+ height: 160px;
+ margin: 20px 0;
+ padding-top: 40px;
+ background-color: lightgreen;
+}
+#child {
+ height: 160px;
+ background-color: green;
+}
+#margin {
+ height: 40px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="overflow">
+ <div id="child"></div>
+ <div id="margin"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-4-ref2.html b/layout/reftests/margin-collapsing/block-overflow-4-ref2.html
new file mode 100644
index 0000000000..be8f26fd14
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-4-ref2.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+.spacer {
+ height: 20px;
+}
+#overflow {
+ overflow-y: auto;
+ height: 200px;
+ background-color: lightgreen;
+}
+.margin {
+ height: 40px;
+}
+#child {
+ height: 160px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div class="spacer"></div>
+<div id="overflow">
+ <div class="margin"></div>
+ <div id="child"></div>
+ <div class="margin"></div>
+</div>
+<div class="spacer"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-4.html b/layout/reftests/margin-collapsing/block-overflow-4.html
new file mode 100644
index 0000000000..ea6b271dd2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-4.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#overflow {
+ overflow: auto;
+ height: 200px;
+ margin: 20px 0;
+ background-color: lightgreen;
+}
+#child {
+ height: 160px;
+ margin: 40px 0;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="overflow">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-5-ref.html b/layout/reftests/margin-collapsing/block-overflow-5-ref.html
new file mode 100644
index 0000000000..1a9eac26ac
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-5-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#overflow {
+ background-color: green;
+ height: 40px;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="separator-top"></div>
+<div id="overflow"></div>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-5-ref2.html b/layout/reftests/margin-collapsing/block-overflow-5-ref2.html
new file mode 100644
index 0000000000..4115be80c9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-5-ref2.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+.margin {
+ height: 20px;
+}
+#overflow {
+ overflow: visible;
+ height: 40px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div class="margin"></div>
+<div id="overflow"></div>
+<div class="margin"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-5a-dyn.html b/layout/reftests/margin-collapsing/block-overflow-5a-dyn.html
new file mode 100644
index 0000000000..cba1292f26
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-5a-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#overflow {
+ overflow: scroll;
+ height: 40px;
+ margin: 20px 0;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('overflow').style.overflow = 'visible';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator-top"></div>
+<div id="overflow"></div>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-5a.html b/layout/reftests/margin-collapsing/block-overflow-5a.html
new file mode 100644
index 0000000000..1eeb383ae5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-5a.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#overflow {
+ overflow: visible;
+ height: 40px;
+ margin: 20px 0;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="separator-top"></div>
+<div id="overflow"></div>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-5b-dyn.html b/layout/reftests/margin-collapsing/block-overflow-5b-dyn.html
new file mode 100644
index 0000000000..61b6423c2d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-5b-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#overflow {
+ overflow: scroll;
+ height: 40px;
+ margin: 20px 0;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('overflow').style.overflow = 'hidden';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator-top"></div>
+<div id="overflow"></div>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-5b.html b/layout/reftests/margin-collapsing/block-overflow-5b.html
new file mode 100644
index 0000000000..e4020070be
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-5b.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#overflow {
+ overflow: hidden;
+ height: 40px;
+ margin: 20px 0;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="separator-top"></div>
+<div id="overflow"></div>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-5c-dyn.html b/layout/reftests/margin-collapsing/block-overflow-5c-dyn.html
new file mode 100644
index 0000000000..bfdc93e2d1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-5c-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#overflow {
+ height: 40px;
+ margin: 20px 0;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('overflow').style.overflowY = 'scroll';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator-top"></div>
+<div id="overflow"></div>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-5c-ref.html b/layout/reftests/margin-collapsing/block-overflow-5c-ref.html
new file mode 100644
index 0000000000..b09be0f1ce
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-5c-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+#overflow {
+ overflow-y: scroll;
+ height: 40px;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="separator-top"></div>
+<div id="overflow"></div>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-5c-ref2.html b/layout/reftests/margin-collapsing/block-overflow-5c-ref2.html
new file mode 100644
index 0000000000..89558cfa46
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-5c-ref2.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+.margin {
+ height: 20px;
+}
+#overflow {
+ overflow-y: scroll;
+ height: 40px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div class="margin"></div>
+<div id="overflow"></div>
+<div class="margin"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-5c.html b/layout/reftests/margin-collapsing/block-overflow-5c.html
new file mode 100644
index 0000000000..113c172b43
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-5c.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#overflow {
+ overflow-y: scroll;
+ height: 40px;
+ margin: 20px 0;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="separator-top"></div>
+<div id="overflow"></div>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-5d-dyn.html b/layout/reftests/margin-collapsing/block-overflow-5d-dyn.html
new file mode 100644
index 0000000000..c5cf552329
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-5d-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#overflow {
+ overflow: scroll;
+ height: 40px;
+ margin: 20px 0;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('overflow').style.overflow = 'auto';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator-top"></div>
+<div id="overflow"></div>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-overflow-5d.html b/layout/reftests/margin-collapsing/block-overflow-5d.html
new file mode 100644
index 0000000000..efbeafe004
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-overflow-5d.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+#overflow {
+ overflow: auto;
+ height: 40px;
+ margin: 20px 0;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="separator-top"></div>
+<div id="overflow"></div>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-percent-1-dyn.html b/layout/reftests/margin-collapsing/block-percent-1-dyn.html
new file mode 100644
index 0000000000..ba4a85427e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-percent-1-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ width: 200px;
+}
+#block1 {
+ height: 40px;
+ margin-bottom: 10%;
+ background-color: green;
+}
+#block2 {
+ height: 40px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('block2').style.marginTop = '25%';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="block1"></div>
+ <div id="block2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-percent-1-ref.html b/layout/reftests/margin-collapsing/block-percent-1-ref.html
new file mode 100644
index 0000000000..a60812bc02
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-percent-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1 {
+ width: 200px; height: 40px;
+ margin-bottom: 50px;
+ background-color: green;
+}
+#block2 {
+ width: 200px; height: 40px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-percent-1.html b/layout/reftests/margin-collapsing/block-percent-1.html
new file mode 100644
index 0000000000..3344bd0b23
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-percent-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ width: 200px;
+}
+#block1 {
+ height: 40px;
+ margin-bottom: 10%;
+ background-color: green;
+}
+#block2 {
+ height: 40px;
+ margin-top: 25%;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="block1"></div>
+ <div id="block2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-percent-2-dyn.html b/layout/reftests/margin-collapsing/block-percent-2-dyn.html
new file mode 100644
index 0000000000..92673375ec
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-percent-2-dyn.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent1 {
+ width: 200px;
+}
+#block1 {
+ height: 50px;
+ margin-bottom: 20%;
+ background-color: green;
+}
+#parent2 {
+ width: 200px;
+}
+#block2 {
+ height: 50px;
+ margin-top: 10%;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('parent2').style.width = '500px';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent1">
+ <div id="block1"></div>
+</div>
+<div id="parent2">
+ <div id="block2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-percent-2-ref.html b/layout/reftests/margin-collapsing/block-percent-2-ref.html
new file mode 100644
index 0000000000..d9efe6bfb5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-percent-2-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent1 {
+ width: 200px;
+}
+#block1 {
+ height: 50px;
+ background-color: green;
+}
+#parent2 {
+ width: 500px;
+}
+#block2 {
+ height: 50px;
+ background-color: green;
+}
+#spacer {
+ height: 50px;
+}
+</style>
+</head>
+<body>
+<div id="parent1">
+ <div id="block1"></div>
+</div>
+<div id="spacer"></div>
+<div id="parent2">
+ <div id="block2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-percent-2.html b/layout/reftests/margin-collapsing/block-percent-2.html
new file mode 100644
index 0000000000..0137dc9b9f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-percent-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent1 {
+ width: 200px;
+}
+#block1 {
+ height: 50px;
+ margin-bottom: 20%;
+ background-color: green;
+}
+#parent2 {
+ width: 500px;
+}
+#block2 {
+ height: 50px;
+ margin-top: 10%;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent1">
+ <div id="block1"></div>
+</div>
+<div id="parent2">
+ <div id="block2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-root-1a-noref1.html b/layout/reftests/margin-collapsing/block-root-1a-noref1.html
new file mode 100644
index 0000000000..a04466cb8b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-root-1a-noref1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html {
+ margin: 0px; padding: 0;
+ background-color: green;
+}
+body {
+ margin: 0px; padding: 0;
+}
+div {
+ margin: 20px 40px;
+ background-color: blue;
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-root-1a-noref2.html b/layout/reftests/margin-collapsing/block-root-1a-noref2.html
new file mode 100644
index 0000000000..53041a6882
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-root-1a-noref2.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html {
+ margin: 0px; padding: 0;
+ background-color: green;
+}
+body {
+ margin: 0px; padding: 0;
+}
+div {
+ margin: 40px 20px;
+ background-color: blue;
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-root-1a-ref.html b/layout/reftests/margin-collapsing/block-root-1a-ref.html
new file mode 100644
index 0000000000..6906ed3aa9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-root-1a-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html {
+ margin: 40px; padding: 0;
+ background-color: green;
+}
+body {
+ margin: 0px; padding: 0;
+ background-color: blue;
+ height: 20px;
+}
+</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-root-1a-ref2.html b/layout/reftests/margin-collapsing/block-root-1a-ref2.html
new file mode 100644
index 0000000000..bbf8f02cd4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-root-1a-ref2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0px; padding: 0;
+ background-color: green;
+}
+div {
+ margin: 40px;
+ background-color: blue;
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-root-1a.html b/layout/reftests/margin-collapsing/block-root-1a.html
new file mode 100644
index 0000000000..70781b9c74
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-root-1a.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html {
+ margin: 20px; padding: 0;
+ background-color: green;
+}
+body {
+ margin: 20px; padding: 0;
+ background-color: blue;
+ height: 20px;
+}
+</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-root-1b-ref.html b/layout/reftests/margin-collapsing/block-root-1b-ref.html
new file mode 100644
index 0000000000..fe648e601e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-root-1b-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html {
+ margin: 0; padding: 40px 20px;
+ background-color: green;
+}
+body {
+ margin: 0; padding: 0 20px;
+ background-color: red;
+}
+div {
+ background-color: blue;
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-root-1b-ref2.html b/layout/reftests/margin-collapsing/block-root-1b-ref2.html
new file mode 100644
index 0000000000..7ae45e0df0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-root-1b-ref2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin: 0; padding: 0;
+ background-color: green;
+}
+div {
+ margin: 40px 20px; padding: 0 20px;
+ background-color: red;
+ height: 20px;
+}
+div div {
+ margin: 0; padding: 0;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div><div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-root-1b.html b/layout/reftests/margin-collapsing/block-root-1b.html
new file mode 100644
index 0000000000..c8e6bea1d9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-root-1b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html {
+ margin: 20px; padding: 0;
+ background-color: green;
+}
+body {
+ margin: 0; padding: 0;
+ background-color: red;
+}
+div {
+ margin: 20px;
+ background-color: blue;
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-1-noref.html b/layout/reftests/margin-collapsing/block-sibling-1-noref.html
new file mode 100644
index 0000000000..4b123d9475
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-1-noref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#sibling1 {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 30px;
+}
+#sibling2 {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="sibling1"></div>
+<div id="sibling2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-1-noref2.html b/layout/reftests/margin-collapsing/block-sibling-1-noref2.html
new file mode 100644
index 0000000000..96a2f6b105
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-1-noref2.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#sibling1 {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 40px;
+}
+#sibling2 {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="sibling1"></div>
+<div id="sibling2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-1-ref.html b/layout/reftests/margin-collapsing/block-sibling-1-ref.html
new file mode 100644
index 0000000000..7c5c4e7328
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-1-ref2.html b/layout/reftests/margin-collapsing/block-sibling-1-ref2.html
new file mode 100644
index 0000000000..e413c50ee0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-1-ref2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#margin {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="margin"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-1a-dyn.html b/layout/reftests/margin-collapsing/block-sibling-1a-dyn.html
new file mode 100644
index 0000000000..b7a5675b12
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-1a-dyn.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#sibling1 {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#sibling2 {
+ display: none;
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('sibling2').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="sibling1"></div>
+<div id="sibling2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-1a.html b/layout/reftests/margin-collapsing/block-sibling-1a.html
new file mode 100644
index 0000000000..a0f9cfcf94
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-1a.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-1b-dyn.html b/layout/reftests/margin-collapsing/block-sibling-1b-dyn.html
new file mode 100644
index 0000000000..cb6ef604a4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-1b-dyn.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#sibling1 {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#sibling2 {
+ display: none;
+ height: 20px;
+ background-color: green;
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('sibling2').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="sibling1"></div>
+<div id="sibling2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-1b.html b/layout/reftests/margin-collapsing/block-sibling-1b.html
new file mode 100644
index 0000000000..051b046c06
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-1b.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-1c-dyn.html b/layout/reftests/margin-collapsing/block-sibling-1c-dyn.html
new file mode 100644
index 0000000000..f48691ce6f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-1c-dyn.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#sibling1 {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#sibling2 {
+ display: none;
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('sibling2').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="sibling1"></div>
+<div id="sibling2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-1c.html b/layout/reftests/margin-collapsing/block-sibling-1c.html
new file mode 100644
index 0000000000..842a698f87
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-1c.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-2-dyn.html b/layout/reftests/margin-collapsing/block-sibling-2-dyn.html
new file mode 100644
index 0000000000..1335b0148b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-2-dyn.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#sibling1 {
+ height: 20px;
+ background-color: red;
+ margin-bottom: 20px;
+}
+#sibling2 {
+ display: none;
+ height: 20px;
+ background-color: blue;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ position: relative;
+ top: 40px;
+}
+#sibling3 {
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+ position: relative;
+ top: -40px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('sibling2').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="sibling1"></div>
+<div id="sibling2"></div>
+<div id="sibling3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-2-noref.html b/layout/reftests/margin-collapsing/block-sibling-2-noref.html
new file mode 100644
index 0000000000..5a687e9a50
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-2-noref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: red;
+ margin-bottom: 40px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#c {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+<div id="c"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-2-ref.html b/layout/reftests/margin-collapsing/block-sibling-2-ref.html
new file mode 100644
index 0000000000..dbe785d271
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-2-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: red;
+ margin-bottom: 20px;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#c {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+<div id="c"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-2-ref2.html b/layout/reftests/margin-collapsing/block-sibling-2-ref2.html
new file mode 100644
index 0000000000..3b32ed57b4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-2-ref2.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#red {
+ height: 20px;
+ background-color: red;
+}
+#green {
+ height: 20px;
+ background-color: green;
+}
+#blue {
+ height: 20px;
+ background-color: blue;
+}
+.margin {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="red"></div>
+<div class="margin"></div>
+<div id="green"></div>
+<div class="margin"></div>
+<div id="blue"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-2.html b/layout/reftests/margin-collapsing/block-sibling-2.html
new file mode 100644
index 0000000000..9dc60df51c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: red;
+ margin-bottom: 20px;
+}
+#b {
+ height: 20px;
+ background-color: blue;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ position: relative;
+ top: 40px;
+}
+#c {
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+ position: relative;
+ top: -40px;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+<div id="c"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-3-dyn.html b/layout/reftests/margin-collapsing/block-sibling-3-dyn.html
new file mode 100644
index 0000000000..0aa50ec52c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-3-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#sibling1 {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#sibling2 {
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+#sibling3 {
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('sibling2').style.display = 'none';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="sibling1"></div>
+<div id="sibling2"></div>
+<div id="sibling3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-sibling-3.html b/layout/reftests/margin-collapsing/block-sibling-3.html
new file mode 100644
index 0000000000..4156e6fe12
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-sibling-3.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#sibling1 {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#sibling2 {
+ display: none;
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+#sibling3 {
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="sibling1"></div>
+<div id="sibling2"></div>
+<div id="sibling3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-html-1-ref.xhtml b/layout/reftests/margin-collapsing/block-xhtml-html-1-ref.xhtml
new file mode 100644
index 0000000000..9ee488fd53
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-html-1-ref.xhtml
@@ -0,0 +1,22 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ html, body {
+ background-color: white;
+ margin: 0; padding: 0;
+ }
+ #the-html {
+ padding: 30px 0;
+ }
+ #the-body {
+ background-color: green;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div id="the-html">
+ <div id="the-body"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-html-1a-dyn.xhtml b/layout/reftests/margin-collapsing/block-xhtml-html-1a-dyn.xhtml
new file mode 100644
index 0000000000..e0c87723e2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-html-1a-dyn.xhtml
@@ -0,0 +1,28 @@
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ margin: 20px 0;
+ }
+ body {
+ display: none;
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+ <script type="text/javascript">
+ function test() {
+ document.getElementsByTagName('body')[0].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+ }
+ document.addEventListener('MozReftestInvalidate', test, false);
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-html-1a.xhtml b/layout/reftests/margin-collapsing/block-xhtml-html-1a.xhtml
new file mode 100644
index 0000000000..bad10d8582
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-html-1a.xhtml
@@ -0,0 +1,20 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ margin: 20px 0;
+ }
+ body {
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-html-1b-dyn.xhtml b/layout/reftests/margin-collapsing/block-xhtml-html-1b-dyn.xhtml
new file mode 100644
index 0000000000..ea0321bf6d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-html-1b-dyn.xhtml
@@ -0,0 +1,29 @@
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ margin: 20px 0;
+ }
+ div {
+ display: none;
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+ <script type="text/javascript">
+ function test() {
+ document.getElementsByTagName('div')[0].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+ }
+ document.addEventListener('MozReftestInvalidate', test, false);
+ </script>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-html-1b.xhtml b/layout/reftests/margin-collapsing/block-xhtml-html-1b.xhtml
new file mode 100644
index 0000000000..9661768c19
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-html-1b.xhtml
@@ -0,0 +1,21 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ margin: 20px 0;
+ }
+ div {
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-html-2-dyn.xhtml b/layout/reftests/margin-collapsing/block-xhtml-html-2-dyn.xhtml
new file mode 100644
index 0000000000..a2b18e0dbe
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-html-2-dyn.xhtml
@@ -0,0 +1,32 @@
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ }
+ body {
+ background-color: red;
+ margin: 20px 0;
+ }
+ div {
+ display: none;
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+ <script type="text/javascript">
+ function test() {
+ document.getElementsByTagName('div')[0].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+ }
+ document.addEventListener('MozReftestInvalidate', test, false);
+ </script>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-html-2-ref.xhtml b/layout/reftests/margin-collapsing/block-xhtml-html-2-ref.xhtml
new file mode 100644
index 0000000000..4c5e41d557
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-html-2-ref.xhtml
@@ -0,0 +1,27 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ html, body, div {
+ margin: 0; padding: 0;
+ background-color: white;
+ }
+ #the-html {
+ padding: 20px 0;
+ }
+ #the-body {
+ background-color: red;
+ }
+ #the-div {
+ background-color: green;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div id="the-html">
+ <div id="the-body">
+ <div id="the-div"></div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-html-2.xhtml b/layout/reftests/margin-collapsing/block-xhtml-html-2.xhtml
new file mode 100644
index 0000000000..72ab87bec3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-html-2.xhtml
@@ -0,0 +1,24 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ }
+ body {
+ background-color: red;
+ margin: 20px 0;
+ }
+ div {
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-html-3-dyn.xhtml b/layout/reftests/margin-collapsing/block-xhtml-html-3-dyn.xhtml
new file mode 100644
index 0000000000..514050f08f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-html-3-dyn.xhtml
@@ -0,0 +1,33 @@
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ margin: 10px 0;
+ }
+ body {
+ background-color: red;
+ margin: 20px 0;
+ }
+ div {
+ display: none;
+ background-color: green;
+ margin: 40px 0;
+ height: 100px;
+ }
+ </style>
+ <script type="text/javascript">
+ function test() {
+ document.getElementsByTagName('div')[0].style.display = 'block';
+ document.documentElement.removeAttribute('class');
+ }
+ document.addEventListener('MozReftestInvalidate', test, false);
+ </script>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-html-3-ref.xhtml b/layout/reftests/margin-collapsing/block-xhtml-html-3-ref.xhtml
new file mode 100644
index 0000000000..48081fffd9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-html-3-ref.xhtml
@@ -0,0 +1,27 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ html, body, div {
+ margin: 0; padding: 0;
+ background-color: white;
+ }
+ #the-html {
+ padding: 50px 0;
+ }
+ #the-body {
+ background-color: red;
+ }
+ #the-div {
+ background-color: green;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div id="the-html">
+ <div id="the-body">
+ <div id="the-div"></div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-html-3.xhtml b/layout/reftests/margin-collapsing/block-xhtml-html-3.xhtml
new file mode 100644
index 0000000000..53862af809
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-html-3.xhtml
@@ -0,0 +1,25 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ html, body {
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: white;
+ margin: 10px 0;
+ }
+ body {
+ background-color: red;
+ margin: 20px 0;
+ }
+ div {
+ background-color: green;
+ margin: 40px 0;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-root-1-ref.xhtml b/layout/reftests/margin-collapsing/block-xhtml-root-1-ref.xhtml
new file mode 100644
index 0000000000..2ef19cbb3b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-root-1-ref.xhtml
@@ -0,0 +1,24 @@
+<root>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ root, html, body {
+ display: block;
+ margin: 0; padding: 0;
+ }
+ #the-root {
+ padding: 30px 0;
+ }
+ #the-html {
+ background-color: green;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div id="the-root">
+ <div id="the-html"></div>
+</div>
+</body>
+</html>
+</root>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-root-1a.xhtml b/layout/reftests/margin-collapsing/block-xhtml-root-1a.xhtml
new file mode 100644
index 0000000000..50d476bdc5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-root-1a.xhtml
@@ -0,0 +1,20 @@
+<root>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ root, html {
+ display: block;
+ margin: 0; padding: 0;
+ }
+ root {
+ margin: 20px 0;
+ }
+ html {
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+</head>
+</html>
+</root>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-root-1b.xhtml b/layout/reftests/margin-collapsing/block-xhtml-root-1b.xhtml
new file mode 100644
index 0000000000..fe2668163b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-root-1b.xhtml
@@ -0,0 +1,22 @@
+<root>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ root, html, body {
+ display: block;
+ margin: 0; padding: 0;
+ }
+ root {
+ margin: 20px 0;
+ }
+ body {
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+</body>
+</html>
+</root>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-root-2-ref.xhtml b/layout/reftests/margin-collapsing/block-xhtml-root-2-ref.xhtml
new file mode 100644
index 0000000000..148aa1ab5b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-root-2-ref.xhtml
@@ -0,0 +1,29 @@
+<root>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ root, html, body {
+ display: block;
+ margin: 0; padding: 0;
+ }
+ #the-root {
+ padding: 20px 0;
+ }
+ #the-html {
+ background-color: lightgreen;
+ }
+ #the-body {
+ background-color: green;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div id="the-root">
+ <div id="the-html">
+ <div id="the-body"></div>
+ </div>
+</div>
+</body>
+</html>
+</root>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-root-2.xhtml b/layout/reftests/margin-collapsing/block-xhtml-root-2.xhtml
new file mode 100644
index 0000000000..5d71978e23
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-root-2.xhtml
@@ -0,0 +1,23 @@
+<root>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ root, html, body {
+ display: block;
+ margin: 0; padding: 0;
+ }
+ html {
+ background-color: lightgreen;
+ margin: 20px 0;
+ }
+ body {
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+</body>
+</html>
+</root>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-root-3-ref.xhtml b/layout/reftests/margin-collapsing/block-xhtml-root-3-ref.xhtml
new file mode 100644
index 0000000000..2771c87ca3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-root-3-ref.xhtml
@@ -0,0 +1,29 @@
+<root>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ root, html, body {
+ display: block;
+ margin: 0; padding: 0;
+ }
+ #the-root {
+ padding: 50px 0;
+ }
+ #the-html {
+ background-color: lightgreen;
+ }
+ #the-body {
+ background-color: green;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div id="the-root">
+ <div id="the-html">
+ <div id="the-body"></div>
+ </div>
+</div>
+</body>
+</html>
+</root>
diff --git a/layout/reftests/margin-collapsing/block-xhtml-root-3.xhtml b/layout/reftests/margin-collapsing/block-xhtml-root-3.xhtml
new file mode 100644
index 0000000000..bf94b4d23b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xhtml-root-3.xhtml
@@ -0,0 +1,26 @@
+<root>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style type="text/css">
+ root, html, body {
+ display: block;
+ margin: 0; padding: 0;
+ }
+ root {
+ margin: 10px 0;
+ }
+ html {
+ background-color: lightgreen;
+ margin: 20px 0;
+ }
+ body {
+ background-color: green;
+ margin: 40px 0;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+</body>
+</html>
+</root>
diff --git a/layout/reftests/margin-collapsing/block-xml-root-1-ref.css b/layout/reftests/margin-collapsing/block-xml-root-1-ref.css
new file mode 100644
index 0000000000..346f63a2f2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xml-root-1-ref.css
@@ -0,0 +1,9 @@
+root {
+ display: block;
+ padding: 30px 0;
+}
+leaf {
+ display: block;
+ background-color: green;
+ height: 100px;
+}
diff --git a/layout/reftests/margin-collapsing/block-xml-root-1-ref.xml b/layout/reftests/margin-collapsing/block-xml-root-1-ref.xml
new file mode 100644
index 0000000000..de6d6de020
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xml-root-1-ref.xml
@@ -0,0 +1,2 @@
+<?xml-stylesheet href="block-xml-root-1-ref.css" ?>
+<root><leaf/></root>
diff --git a/layout/reftests/margin-collapsing/block-xml-root-1.css b/layout/reftests/margin-collapsing/block-xml-root-1.css
new file mode 100644
index 0000000000..8289e32053
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xml-root-1.css
@@ -0,0 +1,10 @@
+root {
+ display: block;
+ margin: 20px 0;
+}
+leaf {
+ display: block;
+ background-color: green;
+ margin: 10px 0;
+ height: 100px;
+}
diff --git a/layout/reftests/margin-collapsing/block-xml-root-1.xml b/layout/reftests/margin-collapsing/block-xml-root-1.xml
new file mode 100644
index 0000000000..a0681c6aed
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-xml-root-1.xml
@@ -0,0 +1,2 @@
+<?xml-stylesheet href="block-xml-root-1.css" ?>
+<root><leaf/></root>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-1a-ref.html b/layout/reftests/margin-collapsing/block-zero-height-1a-ref.html
new file mode 100644
index 0000000000..3c16bc617d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-1a-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#b {
+ height: 10px;
+ background-color: red;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-1a.html b/layout/reftests/margin-collapsing/block-zero-height-1a.html
new file mode 100644
index 0000000000..871a556f5e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-1a.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+}
+#b {
+ background-color: green;
+ margin-top: 10px;
+}
+#c {
+ margin-top: 20px;
+ margin-bottom: 30px;
+ height: 0;
+}
+#d {
+ height: 10px;
+ background-color: red;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b">
+ <div id="c">
+ <div id="d"></div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-1b-ref.html b/layout/reftests/margin-collapsing/block-zero-height-1b-ref.html
new file mode 100644
index 0000000000..9a976b3efa
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-1b-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#b {
+ background-color: red;
+ padding-top: 10px;
+}
+#c {
+ background-color: green;
+ padding-top: 20px;
+}
+#d {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b">
+ <div id="c">
+ <div id="d"></div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-1b.html b/layout/reftests/margin-collapsing/block-zero-height-1b.html
new file mode 100644
index 0000000000..8db97a5b36
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-1b.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ height: 20px;
+ background-color: green;
+}
+#b {
+ background-color: green;
+ margin-top: 10px;
+}
+#c {
+ margin-top: 20px;
+ margin-bottom: 30px;
+ height: 0;
+}
+#d {
+ height: 10px;
+ background-color: red;
+}
+#e {
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b">
+ <div id="c">
+ <div id="d"></div>
+ </div>
+ <div id="e"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-2a-ref.html b/layout/reftests/margin-collapsing/block-zero-height-2a-ref.html
new file mode 100644
index 0000000000..74f4601c87
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-2a-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+ height: 50px;
+}
+#b {
+ height: 10px; width: 100px;
+ background-color: red;
+ margin-bottom: 30px;
+}
+#c {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+<div id="c"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-2a.html b/layout/reftests/margin-collapsing/block-zero-height-2a.html
new file mode 100644
index 0000000000..1f4cc6f3a3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-2a.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a {
+ background-color: green;
+}
+#b {
+ height: 20px;
+}
+#c {
+ margin-top: 30px;
+ margin-bottom: 40px;
+ height: 0;
+}
+#d {
+ height: 10px; width: 100px;
+ background-color: red;
+}
+#e {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="a">
+ <div id="b"></div>
+ <div id="c">
+ <div id="d"></div>
+ </div>
+</div>
+<div id="e"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-2b-ref.html b/layout/reftests/margin-collapsing/block-zero-height-2b-ref.html
new file mode 100644
index 0000000000..6d1914451a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-2b-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#a, #c {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 30px;
+}
+#b {
+ height: 10px; width: 100px;
+ background-color: red;
+ margin-top: 30px;
+ margin-bottom: 30px;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+<div id="c"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-2b.html b/layout/reftests/margin-collapsing/block-zero-height-2b.html
new file mode 100644
index 0000000000..b2e0647826
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-2b.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#b {
+ height: 20px;
+ background-color: green;
+}
+#c {
+ margin-top: 30px;
+ margin-bottom: 40px;
+ height: 0;
+}
+#d {
+ height: 10px; width: 100px;
+ background-color: red;
+}
+#e {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="b"></div>
+<div id="a">
+ <div id="c">
+ <div id="d"></div>
+ </div>
+</div>
+<div id="e"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-2c-ref.html b/layout/reftests/margin-collapsing/block-zero-height-2c-ref.html
new file mode 100644
index 0000000000..78ed9af998
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-2c-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin-top: 0;
+}
+#a {
+ margin-top: 30px;
+ height: 10px; width: 100px;
+ background-color: red;
+}
+#b {
+ height: 20px;
+ background-color: green;
+ margin-top: 30px;
+}
+</style>
+</head>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-2c.html b/layout/reftests/margin-collapsing/block-zero-height-2c.html
new file mode 100644
index 0000000000..14153a3248
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-2c.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+html, body {
+ margin-top: 0;
+}
+#a {
+ background-color: green;
+}
+#c {
+ margin-top: 30px;
+ margin-bottom: 40px;
+ height: 0;
+}
+#d {
+ height: 10px; width: 100px;
+ background-color: red;
+}
+#e {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="a">
+ <div id="b"></div>
+ <div id="c">
+ <div id="d"></div>
+ </div>
+</div>
+<div id="e"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-3-ref.html b/layout/reftests/margin-collapsing/block-zero-height-3-ref.html
new file mode 100644
index 0000000000..30c3b2e4a3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-3-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#abs {
+ position: absolute;
+ left: 20px; top: 20px;
+ width: 100px; height: 100px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="abs"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-3a.html b/layout/reftests/margin-collapsing/block-zero-height-3a.html
new file mode 100644
index 0000000000..52b1c231e3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-3a.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#abs {
+ position: absolute;
+ left: 20px; top: 20px;
+ width: 100px;
+ background-color: red;
+}
+#parent {
+ margin-bottom: 70px;
+}
+#zero-height {
+ margin-bottom: 100px;
+ height: 0;
+}
+#child-of-zero-height {
+ height: 100px; background: green;
+}
+</style>
+</head>
+<body>
+<div id="abs">
+ <div id="parent">
+ <div id="zero-height">
+ <div id="child-of-zero-height"></div>
+ </div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-3b.html b/layout/reftests/margin-collapsing/block-zero-height-3b.html
new file mode 100644
index 0000000000..72b4c64a93
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-3b.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#abs {
+ position: absolute;
+ left: 20px; top: 20px;
+ width: 100px;
+ background-color: red;
+}
+#parent {
+ margin-bottom: 100px;
+}
+#zero-height {
+ margin-bottom: 70px;
+ height: 0;
+}
+#child-of-zero-height {
+ height: 100px; background: green;
+}
+</style>
+</head>
+<body>
+<div id="abs">
+ <div id="parent">
+ <div id="zero-height">
+ <div id="child-of-zero-height"></div>
+ </div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-height-3c.html b/layout/reftests/margin-collapsing/block-zero-height-3c.html
new file mode 100644
index 0000000000..8b9205c587
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-height-3c.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#abs {
+ position: absolute;
+ left: 20px; top: 20px;
+ width: 100px;
+ background-color: red;
+}
+#parent {
+ margin-bottom: 100px;
+}
+#zero-height {
+ margin-bottom: 100px;
+ height: 0;
+}
+#child-of-zero-height {
+ height: 100px; background: green;
+}
+</style>
+</head>
+<body>
+<div id="abs">
+ <div id="parent">
+ <div id="zero-height">
+ <div id="child-of-zero-height"></div>
+ </div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-1-noref.html b/layout/reftests/margin-collapsing/block-zero-min-height-1-noref.html
new file mode 100644
index 0000000000..feabf5f2d8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-1-noref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ height: 30px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-1-ref.html b/layout/reftests/margin-collapsing/block-zero-min-height-1-ref.html
new file mode 100644
index 0000000000..e7cee1f905
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-1a.html b/layout/reftests/margin-collapsing/block-zero-min-height-1a.html
new file mode 100644
index 0000000000..a1f2300401
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-1a.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 0;
+ height: auto;
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-1b.html b/layout/reftests/margin-collapsing/block-zero-min-height-1b.html
new file mode 100644
index 0000000000..3f365be011
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-1b.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 0;
+ height: auto;
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-1c.html b/layout/reftests/margin-collapsing/block-zero-min-height-1c.html
new file mode 100644
index 0000000000..9b1d1a5496
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-1c.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 0;
+ height: auto;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-1d.html b/layout/reftests/margin-collapsing/block-zero-min-height-1d.html
new file mode 100644
index 0000000000..aaf8c231ec
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-1d.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 0;
+ height: 0;
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-1e.html b/layout/reftests/margin-collapsing/block-zero-min-height-1e.html
new file mode 100644
index 0000000000..81e8ab7c5c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-1e.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 0;
+ height: 0;
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-1f.html b/layout/reftests/margin-collapsing/block-zero-min-height-1f.html
new file mode 100644
index 0000000000..5f1ac0c840
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-1f.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 0;
+ height: 0;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-2-noref.html b/layout/reftests/margin-collapsing/block-zero-min-height-2-noref.html
new file mode 100644
index 0000000000..e7cee1f905
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-2-noref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-2a.html b/layout/reftests/margin-collapsing/block-zero-min-height-2a.html
new file mode 100644
index 0000000000..cf3bb13b93
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-2a.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ font-size: 15px;
+ line-height: 1;
+ min-height: 0;
+ height: auto;
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height">&nbsp;</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-2ab-ref.html b/layout/reftests/margin-collapsing/block-zero-min-height-2ab-ref.html
new file mode 100644
index 0000000000..c707433726
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-2ab-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ height: 45px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-2b.html b/layout/reftests/margin-collapsing/block-zero-min-height-2b.html
new file mode 100644
index 0000000000..51fb629edd
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-2b.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ font-size: 15px;
+ line-height: 1;
+ min-height: 0;
+ height: auto;
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height">&nbsp;</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-2c-ref.html b/layout/reftests/margin-collapsing/block-zero-min-height-2c-ref.html
new file mode 100644
index 0000000000..af25626d42
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-2c-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ height: 55px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-2c.html b/layout/reftests/margin-collapsing/block-zero-min-height-2c.html
new file mode 100644
index 0000000000..955796927f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-2c.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ font-size: 15px;
+ line-height: 1;
+ min-height: 0;
+ height: auto;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height">&nbsp;</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-2d.html b/layout/reftests/margin-collapsing/block-zero-min-height-2d.html
new file mode 100644
index 0000000000..7dc0832d00
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-2d.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 0;
+ height: 0;
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height">&nbsp;</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-2de-ref.html b/layout/reftests/margin-collapsing/block-zero-min-height-2de-ref.html
new file mode 100644
index 0000000000..feabf5f2d8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-2de-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ height: 30px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-2e.html b/layout/reftests/margin-collapsing/block-zero-min-height-2e.html
new file mode 100644
index 0000000000..1877a34467
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-2e.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 0;
+ height: 0;
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height">&nbsp;</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-2f-ref.html b/layout/reftests/margin-collapsing/block-zero-min-height-2f-ref.html
new file mode 100644
index 0000000000..dcc932318d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-2f-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ height: 40px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-2f.html b/layout/reftests/margin-collapsing/block-zero-min-height-2f.html
new file mode 100644
index 0000000000..20e8af97e9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-2f.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 0;
+ height: 0;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height">&nbsp;</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-3-ref.html b/layout/reftests/margin-collapsing/block-zero-min-height-3-ref.html
new file mode 100644
index 0000000000..dcc932318d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-3-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ height: 40px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height"></div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-3a.html b/layout/reftests/margin-collapsing/block-zero-min-height-3a.html
new file mode 100644
index 0000000000..0f11a0efb0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-3a.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 0;
+ height: auto;
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+#margin-only-child {
+ margin-top: 30px;
+ margin-bottom: 40px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height">
+ <div id="margin-only-child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-3b.html b/layout/reftests/margin-collapsing/block-zero-min-height-3b.html
new file mode 100644
index 0000000000..3a5406cf7b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-3b.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 0;
+ height: auto;
+ margin-top: 40px;
+ margin-bottom: 10px;
+}
+#margin-only-child {
+ margin-top: 20px;
+ margin-bottom: 30px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height">
+ <div id="margin-only-child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-3c.html b/layout/reftests/margin-collapsing/block-zero-min-height-3c.html
new file mode 100644
index 0000000000..969b4dd2a5
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-3c.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 0;
+ height: auto;
+ margin-top: 30px;
+ margin-bottom: 40px;
+}
+#margin-only-child {
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height">
+ <div id="margin-only-child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/block-zero-min-height-3d.html b/layout/reftests/margin-collapsing/block-zero-min-height-3d.html
new file mode 100644
index 0000000000..6fb57e0243
--- /dev/null
+++ b/layout/reftests/margin-collapsing/block-zero-min-height-3d.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#min-height {
+ min-height: 0;
+ height: auto;
+ margin-top: 20px;
+ margin-bottom: 30px;
+}
+#margin-only-child {
+ margin-top: 40px;
+ margin-bottom: 10px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="min-height">
+ <div id="margin-only-child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-child-1-dyn.html b/layout/reftests/margin-collapsing/caption-child-1-dyn.html
new file mode 100644
index 0000000000..8a6d6349f8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-child-1-dyn.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#table {
+ display: table;
+ width: 100px;
+}
+#caption {
+ display: table-cell;
+ background-color: yellow;
+}
+#block {
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="table">
+ <div id="caption">
+ <div id="block"></div>
+ </div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-child-1-ref.html b/layout/reftests/margin-collapsing/caption-child-1-ref.html
new file mode 100644
index 0000000000..5ebbe84653
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-child-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator, #block {
+ height: 20px;
+ background-color: blue;
+}
+#table {
+ width: 100px;
+}
+#caption {
+ padding: 20px 0;
+ background-color: yellow;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="table">
+ <div id="caption">
+ <div id="block"></div>
+ </div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-child-1.html b/layout/reftests/margin-collapsing/caption-child-1.html
new file mode 100644
index 0000000000..e54ad40e42
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-child-1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: blue;
+}
+#table {
+ display: table;
+ width: 100px;
+}
+#caption {
+ display: table-caption;
+ background-color: yellow;
+}
+#block {
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="table">
+ <div id="caption">
+ <div id="block"></div>
+ </div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-sibling-1-noref.html b/layout/reftests/margin-collapsing/caption-sibling-1-noref.html
new file mode 100644
index 0000000000..796478cfaa
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-sibling-1-noref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- dbaron thinks the validity of this test is questionable, see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=477462#c20 and #c21 -->
+<style type="text/css">
+#table {
+ width: 100px;
+}
+#caption1 {
+ height: 20px;
+ background-color: red;
+ margin-bottom: 30px;
+}
+#caption2 {
+ height: 20px;
+ background-color: blue;
+ margin-bottom: 30px;
+}
+#caption3 {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="table">
+ <div id="caption1"></div>
+ <div id="caption2"></div>
+ <div id="caption3"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-sibling-1-noref2.html b/layout/reftests/margin-collapsing/caption-sibling-1-noref2.html
new file mode 100644
index 0000000000..185eb860a7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-sibling-1-noref2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- dbaron thinks the validity of this test is questionable, see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=477462#c20 and #c21 -->
+<style type="text/css">
+#table {
+ width: 100px;
+}
+#caption1 {
+ height: 20px;
+ background-color: red;
+ margin-bottom: 40px;
+}
+#caption2 {
+ height: 20px;
+ background-color: blue;
+ margin-bottom: 40px;
+}
+#caption3 {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="table">
+ <div id="caption1"></div>
+ <div id="caption2"></div>
+ <div id="caption3"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-sibling-1-ref.html b/layout/reftests/margin-collapsing/caption-sibling-1-ref.html
new file mode 100644
index 0000000000..c6b2f2d83d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-sibling-1-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- dbaron thinks the validity of this test is questionable, see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=477462#c20 and #c21 -->
+<style type="text/css">
+#table {
+ width: 100px;
+}
+#caption1 {
+ height: 20px;
+ background-color: red;
+ margin-bottom: 20px;
+}
+#caption2 {
+ height: 20px;
+ background-color: blue;
+ margin-bottom: 20px;
+}
+#caption3 {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="table">
+ <div id="caption1"></div>
+ <div id="caption2"></div>
+ <div id="caption3"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-sibling-1a-dyn.html b/layout/reftests/margin-collapsing/caption-sibling-1a-dyn.html
new file mode 100644
index 0000000000..dd8d1aa692
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-sibling-1a-dyn.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<!-- dbaron thinks the validity of this test is questionable, see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=477462#c20 and #c21 -->
+<style type="text/css">
+#table {
+ display: table;
+ width: 100px;
+}
+#caption1 {
+ display: table-caption;
+ height: 20px;
+ background-color: red;
+ margin-bottom: 10px;
+}
+#caption2 {
+ display: none;
+ height: 20px;
+ background-color: blue;
+ margin: 20px 0;
+}
+#caption3 {
+ display: table-caption;
+ height: 20px;
+ background-color: green;
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption2').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="table">
+ <div id="caption1"></div>
+ <div id="caption2"></div>
+ <div id="caption3"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-sibling-1a.html b/layout/reftests/margin-collapsing/caption-sibling-1a.html
new file mode 100644
index 0000000000..07ce4b2585
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-sibling-1a.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- dbaron thinks the validity of this test is questionable, see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=477462#c20 and #c21 -->
+<style type="text/css">
+#table {
+ display: table;
+ width: 100px;
+}
+#caption1 {
+ display: table-caption;
+ height: 20px;
+ background-color: red;
+ margin-bottom: 10px;
+}
+#caption2 {
+ display: table-caption;
+ height: 20px;
+ background-color: blue;
+ margin: 20px 0;
+}
+#caption3 {
+ display: table-caption;
+ height: 20px;
+ background-color: green;
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="table">
+ <div id="caption1"></div>
+ <div id="caption2"></div>
+ <div id="caption3"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-sibling-1b-dyn.html b/layout/reftests/margin-collapsing/caption-sibling-1b-dyn.html
new file mode 100644
index 0000000000..8540971d2d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-sibling-1b-dyn.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<!-- dbaron thinks the validity of this test is questionable, see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=477462#c20 and #c21 -->
+<style type="text/css">
+#table {
+ display: table;
+ width: 100px;
+}
+#caption1 {
+ display: table-caption;
+ height: 20px;
+ background-color: red;
+ margin-bottom: 20px;
+}
+#caption2 {
+ display: none;
+ height: 20px;
+ background-color: blue;
+ margin: 20px 0;
+}
+#caption3 {
+ display: table-caption;
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption2').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="table">
+ <div id="caption1"></div>
+ <div id="caption2"></div>
+ <div id="caption3"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-sibling-1b.html b/layout/reftests/margin-collapsing/caption-sibling-1b.html
new file mode 100644
index 0000000000..5bb76cfd7b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-sibling-1b.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- dbaron thinks the validity of this test is questionable, see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=477462#c20 and #c21 -->
+<style type="text/css">
+#table {
+ display: table;
+ width: 100px;
+}
+#caption1 {
+ display: table-caption;
+ height: 20px;
+ background-color: red;
+ margin-bottom: 20px;
+}
+#caption2 {
+ display: table-caption;
+ height: 20px;
+ background-color: blue;
+ margin: 20px 0;
+}
+#caption3 {
+ display: table-caption;
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="table">
+ <div id="caption1"></div>
+ <div id="caption2"></div>
+ <div id="caption3"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-sibling-1c-dyn.html b/layout/reftests/margin-collapsing/caption-sibling-1c-dyn.html
new file mode 100644
index 0000000000..d8c812479d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-sibling-1c-dyn.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<!-- dbaron thinks the validity of this test is questionable, see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=477462#c20 and #c21 -->
+<style type="text/css">
+#table {
+ display: table;
+ width: 100px;
+}
+#caption1 {
+ display: table-caption;
+ height: 20px;
+ background-color: red;
+ margin-bottom: 20px;
+}
+#caption2 {
+ display: none;
+ height: 20px;
+ background-color: blue;
+ margin: 10px 0;
+}
+#caption3 {
+ display: table-caption;
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption2').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="table">
+ <div id="caption1"></div>
+ <div id="caption2"></div>
+ <div id="caption3"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-sibling-1c.html b/layout/reftests/margin-collapsing/caption-sibling-1c.html
new file mode 100644
index 0000000000..836c46e32a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-sibling-1c.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- dbaron thinks the validity of this test is questionable, see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=477462#c20 and #c21 -->
+<style type="text/css">
+#table {
+ display: table;
+ width: 100px;
+}
+#caption1 {
+ display: table-caption;
+ height: 20px;
+ background-color: red;
+ margin-bottom: 20px;
+}
+#caption2 {
+ display: table-caption;
+ height: 20px;
+ background-color: blue;
+ margin: 10px 0;
+}
+#caption3 {
+ display: table-caption;
+ height: 20px;
+ background-color: green;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="table">
+ <div id="caption1"></div>
+ <div id="caption2"></div>
+ <div id="caption3"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-sibling-2-dyn.html b/layout/reftests/margin-collapsing/caption-sibling-2-dyn.html
new file mode 100644
index 0000000000..28cf78cf23
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-sibling-2-dyn.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<!-- dbaron thinks the validity of this test is questionable, see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=477462#c20 and #c21 -->
+<style type="text/css">
+#table {
+ display: table;
+ width: 100px;
+}
+#caption1 {
+ display: table-caption;
+ height: 20px;
+ background-color: red;
+ margin-bottom: 20px;
+}
+#caption2 {
+ display: table-caption;
+ height: 20px;
+ background-color: blue;
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+#caption3 {
+ display: table-caption;
+ height: 20px;
+ background-color: green;
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption2').style.display = 'none';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="table">
+ <div id="caption1"></div>
+ <div id="caption2"></div>
+ <div id="caption3"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-sibling-2-noref.html b/layout/reftests/margin-collapsing/caption-sibling-2-noref.html
new file mode 100644
index 0000000000..cfd34effb6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-sibling-2-noref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- dbaron thinks the validity of this test is questionable, see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=477462#c20 and #c21 -->
+<style type="text/css">
+#table {
+ display: table;
+ width: 100px;
+}
+#caption1 {
+ display: block;
+ height: 20px;
+ background-color: red;
+ margin-bottom: 30px;
+}
+#caption3 {
+ display: block;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="table">
+ <div id="caption1"></div>
+ <div id="caption2"></div>
+ <div id="caption3"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/caption-sibling-2-ref.html b/layout/reftests/margin-collapsing/caption-sibling-2-ref.html
new file mode 100644
index 0000000000..a9c3f7e8f8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/caption-sibling-2-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- dbaron thinks the validity of this test is questionable, see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=477462#c20 and #c21 -->
+<style type="text/css">
+#table {
+ display: table;
+ width: 100px;
+}
+#caption1 {
+ display: block;
+ height: 20px;
+ background-color: red;
+ margin-bottom: 20px;
+}
+#caption3 {
+ display: block;
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="table">
+ <div id="caption1"></div>
+ <div id="caption2"></div>
+ <div id="caption3"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-child-1-dyn.html b/layout/reftests/margin-collapsing/column-child-1-dyn.html
new file mode 100644
index 0000000000..0487086ee8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-child-1-dyn.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator, #child {
+ height: 20px;
+ background-color: blue;
+}
+#multi-column {
+ background-color: yellow;
+}
+#child {
+ margin: 20px 0;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('multi-column').style.columnCount = 1;
+ document.getElementById('multi-column').style.columnCount = 1;
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="multi-column">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-child-1-ref.html b/layout/reftests/margin-collapsing/column-child-1-ref.html
new file mode 100644
index 0000000000..7715129b64
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-child-1-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator, #child {
+ height: 20px;
+ background-color: blue;
+}
+#multi-column {
+ background-color: yellow;
+}
+.margin {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="multi-column">
+ <div class="margin"></div>
+ <div id="child"></div>
+ <div class="margin"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-child-1.html b/layout/reftests/margin-collapsing/column-child-1.html
new file mode 100644
index 0000000000..42a9c2ad10
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-child-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator, #child {
+ height: 20px;
+ background-color: blue;
+}
+#multi-column {
+ column-count: 1;
+ background-color: yellow;
+}
+#child {
+ margin: 20px 0;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="multi-column">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-1-ref.html b/layout/reftests/margin-collapsing/column-sibling-1-ref.html
new file mode 100644
index 0000000000..1c7c66311f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: orange;
+}
+#multi-column {
+ height: 20px;
+ background-color: blue;
+}
+.spacer {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div class="spacer"></div>
+<div id="multi-column"></div>
+<div class="spacer"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-1a-dyn.html b/layout/reftests/margin-collapsing/column-sibling-1a-dyn.html
new file mode 100644
index 0000000000..c296d8ea43
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-1a-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: orange;
+}
+#block1 {
+ margin-bottom: 10px;
+}
+#multi-column {
+ display: none;
+ column-count: 1;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#block2 {
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('multi-column').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="multi-column"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-1a.html b/layout/reftests/margin-collapsing/column-sibling-1a.html
new file mode 100644
index 0000000000..f721c61dd7
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-1a.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: orange;
+}
+#block1 {
+ margin-bottom: 10px;
+}
+#multi-column {
+ column-count: 1;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#block2 {
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="multi-column"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-1b-dyn.html b/layout/reftests/margin-collapsing/column-sibling-1b-dyn.html
new file mode 100644
index 0000000000..5aebce1ad8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-1b-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: orange;
+}
+#block1 {
+ margin-bottom: 20px;
+}
+#multi-column {
+ display: none;
+ column-count: 1;
+ height: 20px;
+ margin: 10px 0;
+ background-color: blue;
+}
+#block2 {
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('multi-column').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="multi-column"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-1b.html b/layout/reftests/margin-collapsing/column-sibling-1b.html
new file mode 100644
index 0000000000..cca3d6ee78
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-1b.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: orange;
+}
+#block1 {
+ margin-bottom: 20px;
+}
+#multi-column {
+ column-count: 1;
+ height: 20px;
+ margin: 10px 0;
+ background-color: blue;
+}
+#block2 {
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="multi-column"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-1c-dyn.html b/layout/reftests/margin-collapsing/column-sibling-1c-dyn.html
new file mode 100644
index 0000000000..24eb62dadb
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-1c-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: orange;
+}
+#block1 {
+ margin-bottom: 20px;
+}
+#multi-column {
+ display: none;
+ column-count: 1;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#block2 {
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('multi-column').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="multi-column"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-1c.html b/layout/reftests/margin-collapsing/column-sibling-1c.html
new file mode 100644
index 0000000000..43ac8c4423
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-1c.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: orange;
+}
+#block1 {
+ margin-bottom: 20px;
+}
+#multi-column {
+ column-count: 1;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#block2 {
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="multi-column"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-2-ref.html b/layout/reftests/margin-collapsing/column-sibling-2-ref.html
new file mode 100644
index 0000000000..3d160baaa3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-2-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.multi-column {
+ height: 20px;
+ background-color: blue;
+}
+.spacer {
+ height: 20px;
+}
+</style>
+</head>
+<body>
+<div class="multi-column"></div>
+<div class="spacer"></div>
+<div class="multi-column"></div>
+<div class="spacer"></div>
+<div class="multi-column"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-2a-dyn.html b/layout/reftests/margin-collapsing/column-sibling-2a-dyn.html
new file mode 100644
index 0000000000..9267626599
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-2a-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#multi-column1, #multi-column2, #multi-column3 {
+ column-count: 1;
+ height: 20px;
+ background-color: blue;
+}
+#multi-column1 {
+ margin-bottom: 10px;
+}
+#multi-column2 {
+ display: none;
+ margin: 20px 0;
+}
+#multi-column3 {
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('multi-column2').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="multi-column1"></div>
+<div id="multi-column2"></div>
+<div id="multi-column3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-2a.html b/layout/reftests/margin-collapsing/column-sibling-2a.html
new file mode 100644
index 0000000000..003d3cd540
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-2a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#multi-column1, #multi-column2, #multi-column3 {
+ column-count: 1;
+ height: 20px;
+ background-color: blue;
+}
+#multi-column1 {
+ margin-bottom: 10px;
+}
+#multi-column2 {
+ margin: 20px 0;
+}
+#multi-column3 {
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="multi-column1"></div>
+<div id="multi-column2"></div>
+<div id="multi-column3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-2b-dyn.html b/layout/reftests/margin-collapsing/column-sibling-2b-dyn.html
new file mode 100644
index 0000000000..b75429e3b2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-2b-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#multi-column1, #multi-column2, #multi-column3 {
+ column-count: 1;
+ height: 20px;
+ background-color: blue;
+}
+#multi-column1 {
+ margin-bottom: 20px;
+}
+#multi-column2 {
+ display: none;
+ margin: 10px 0;
+}
+#multi-column3 {
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('multi-column2').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="multi-column1"></div>
+<div id="multi-column2"></div>
+<div id="multi-column3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-2b.html b/layout/reftests/margin-collapsing/column-sibling-2b.html
new file mode 100644
index 0000000000..fbec143c87
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-2b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#multi-column1, #multi-column2, #multi-column3 {
+ column-count: 1;
+ height: 20px;
+ background-color: blue;
+}
+#multi-column1 {
+ margin-bottom: 20px;
+}
+#multi-column2 {
+ margin: 10px 0;
+}
+#multi-column3 {
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="multi-column1"></div>
+<div id="multi-column2"></div>
+<div id="multi-column3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-2c-dyn.html b/layout/reftests/margin-collapsing/column-sibling-2c-dyn.html
new file mode 100644
index 0000000000..3bf48213dc
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-2c-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#multi-column1, #multi-column2, #multi-column3 {
+ column-count: 1;
+ height: 20px;
+ background-color: blue;
+}
+#multi-column1 {
+ margin-bottom: 20px;
+}
+#multi-column2 {
+ display: none;
+ margin: 20px 0;
+}
+#multi-column3 {
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('multi-column2').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="multi-column1"></div>
+<div id="multi-column2"></div>
+<div id="multi-column3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/column-sibling-2c.html b/layout/reftests/margin-collapsing/column-sibling-2c.html
new file mode 100644
index 0000000000..c55e1f6a2d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/column-sibling-2c.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#multi-column1, #multi-column2, #multi-column3 {
+ column-count: 1;
+ height: 20px;
+ background-color: blue;
+}
+#multi-column1 {
+ margin-bottom: 20px;
+}
+#multi-column2 {
+ margin: 20px 0;
+}
+#multi-column3 {
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="multi-column1"></div>
+<div id="multi-column2"></div>
+<div id="multi-column3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/dynamic-add-text-1-ref.html b/layout/reftests/margin-collapsing/dynamic-add-text-1-ref.html
new file mode 100644
index 0000000000..9e201e0017
--- /dev/null
+++ b/layout/reftests/margin-collapsing/dynamic-add-text-1-ref.html
@@ -0,0 +1,6 @@
+<html>
+ <head></head>
+ <body>
+ <div id="a" style="margin-bottom: 1em;">A</div>x<div style="margin-top: 2em;">B</div>
+ </body>
+</html>
diff --git a/layout/reftests/margin-collapsing/dynamic-add-text-1.html b/layout/reftests/margin-collapsing/dynamic-add-text-1.html
new file mode 100644
index 0000000000..cc8b2bf357
--- /dev/null
+++ b/layout/reftests/margin-collapsing/dynamic-add-text-1.html
@@ -0,0 +1,6 @@
+<html>
+ <head></head>
+ <body onload="document.getElementById('a').nextSibling.data = 'x';">
+ <div id="a" style="margin-bottom: 1em;">A</div> <div style="margin-top: 2em;">B</div>
+ </body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-child-1-dyn.html b/layout/reftests/margin-collapsing/fieldset-child-1-dyn.html
new file mode 100644
index 0000000000..43804b19ca
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-child-1-dyn.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+fieldset {
+ margin: 0;
+ padding: 0;
+ border: none;
+ background-color: lightgreen;
+}
+#child {
+ height: 40px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('child').style.margin = '20px 0';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<fieldset>
+ <div id="child"></div>
+</fieldset>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-child-1-ref.html b/layout/reftests/margin-collapsing/fieldset-child-1-ref.html
new file mode 100644
index 0000000000..585dc56d9b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-child-1-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#fieldset {
+ padding: 20px 0;
+ background-color: lightgreen;
+}
+#child {
+ height: 40px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="fieldset">
+ <div id="child"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-child-1.html b/layout/reftests/margin-collapsing/fieldset-child-1.html
new file mode 100644
index 0000000000..a9e7a7820e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-child-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+fieldset {
+ margin: 0;
+ padding: 0;
+ border: none;
+ background-color: lightgreen;
+}
+#child {
+ height: 40px;
+ margin: 20px 0;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<fieldset>
+ <div id="child"></div>
+</fieldset>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-1-ref.html b/layout/reftests/margin-collapsing/fieldset-sibling-1-ref.html
new file mode 100644
index 0000000000..dd04af13a0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator, #fieldset {
+ height: 20px;
+ background-color: green;
+}
+#spacer {
+ padding: 20px 0;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="spacer">
+ <div id="fieldset"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-1a-dyn.html b/layout/reftests/margin-collapsing/fieldset-sibling-1a-dyn.html
new file mode 100644
index 0000000000..c8c9cd3191
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-1a-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+fieldset {
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ border: none;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('fieldset')[0].style.margin = '20px 0';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator-top"></div>
+<fieldset></fieldset>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-1a.html b/layout/reftests/margin-collapsing/fieldset-sibling-1a.html
new file mode 100644
index 0000000000..5c01bed86b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-1a.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: green;
+}
+fieldset {
+ height: 20px;
+ margin: 20px 0;
+ padding: 0;
+ border: none;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 10px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="separator-top"></div>
+<fieldset></fieldset>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-1b-dyn.html b/layout/reftests/margin-collapsing/fieldset-sibling-1b-dyn.html
new file mode 100644
index 0000000000..29e1c38cc8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-1b-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+fieldset {
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ border: none;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 20px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('fieldset')[0].style.margin = '10px 0';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator-top"></div>
+<fieldset></fieldset>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-1b.html b/layout/reftests/margin-collapsing/fieldset-sibling-1b.html
new file mode 100644
index 0000000000..2099d35883
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-1b.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+fieldset {
+ height: 20px;
+ margin: 10px 0;
+ padding: 0;
+ border: none;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="separator-top"></div>
+<fieldset></fieldset>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-1c-dyn.html b/layout/reftests/margin-collapsing/fieldset-sibling-1c-dyn.html
new file mode 100644
index 0000000000..2ec89e2f49
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-1c-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+fieldset {
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ border: none;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 20px;
+ background-color: green;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementsByTagName('fieldset')[0].style.margin = '20px 0';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="separator-top"></div>
+<fieldset></fieldset>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-1c.html b/layout/reftests/margin-collapsing/fieldset-sibling-1c.html
new file mode 100644
index 0000000000..e525761d49
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-1c.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#separator-top {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+fieldset {
+ height: 20px;
+ margin: 20px 0;
+ padding: 0;
+ border: none;
+ background-color: green;
+}
+#separator-bottom {
+ height: 20px;
+ margin-top: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="separator-top"></div>
+<fieldset></fieldset>
+<div id="separator-bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-2-ref1.html b/layout/reftests/margin-collapsing/fieldset-sibling-2-ref1.html
new file mode 100644
index 0000000000..f9ad41b9e2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-2-ref1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+fieldset {
+ height: 20px;
+ margin: 0 0 20px;
+ padding: 0;
+ border: none;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<fieldset></fieldset>
+<fieldset></fieldset>
+<fieldset></fieldset>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-2-ref2.html b/layout/reftests/margin-collapsing/fieldset-sibling-2-ref2.html
new file mode 100644
index 0000000000..48cda7961b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-2-ref2.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+div {
+ height: 20px;
+}
+.fieldset {
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="fieldset"></div>
+<div></div>
+<div class="fieldset"></div>
+<div></div>
+<div class="fieldset"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-2a-dyn.html b/layout/reftests/margin-collapsing/fieldset-sibling-2a-dyn.html
new file mode 100644
index 0000000000..82c939a42c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-2a-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+fieldset {
+ height: 20px;
+ padding: 0;
+ border: none;
+ background-color: green;
+}
+#top {
+ margin: 0 0 10px;
+}
+#middle {
+ margin: 0;
+}
+#bottom {
+ margin: 10px 0 0;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('middle').style.margin = '20px 0';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<fieldset id="top"></fieldset>
+<fieldset id="middle"></fieldset>
+<fieldset id="bottom"></fieldset>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-2a.html b/layout/reftests/margin-collapsing/fieldset-sibling-2a.html
new file mode 100644
index 0000000000..1b4ff33e13
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-2a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+fieldset {
+ height: 20px;
+ padding: 0;
+ border: none;
+ background-color: green;
+}
+#top {
+ margin: 0 0 10px;
+}
+#middle {
+ margin: 20px 0;
+}
+#bottom {
+ margin: 10px 0 0;
+}
+</style>
+</head>
+<body>
+<fieldset id="top"></fieldset>
+<fieldset id="middle"></fieldset>
+<fieldset id="bottom"></fieldset>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-2b-dyn.html b/layout/reftests/margin-collapsing/fieldset-sibling-2b-dyn.html
new file mode 100644
index 0000000000..baa738e437
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-2b-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+fieldset {
+ height: 20px;
+ padding: 0;
+ border: none;
+ background-color: green;
+}
+#top {
+ margin: 0 0 20px;
+}
+#middle {
+ margin: 0;
+}
+#bottom {
+ margin: 20px 0 0;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('middle').style.margin = '10px 0';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<fieldset id="top"></fieldset>
+<fieldset id="middle"></fieldset>
+<fieldset id="bottom"></fieldset>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-2b.html b/layout/reftests/margin-collapsing/fieldset-sibling-2b.html
new file mode 100644
index 0000000000..824127c34a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-2b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+fieldset {
+ height: 20px;
+ padding: 0;
+ border: none;
+ background-color: green;
+}
+#top {
+ margin: 0 0 20px;
+}
+#middle {
+ margin: 10px 0;
+}
+#bottom {
+ margin: 20px 0 0;
+}
+</style>
+</head>
+<body>
+<fieldset id="top"></fieldset>
+<fieldset id="middle"></fieldset>
+<fieldset id="bottom"></fieldset>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-2c-dyn.html b/layout/reftests/margin-collapsing/fieldset-sibling-2c-dyn.html
new file mode 100644
index 0000000000..c9befc453d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-2c-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+fieldset {
+ height: 20px;
+ padding: 0;
+ border: none;
+ background-color: green;
+}
+#top {
+ margin: 0 0 20px;
+}
+#middle {
+ margin: 0;
+}
+#bottom {
+ margin: 20px 0 0;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('middle').style.margin = '20px 0';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<fieldset id="top"></fieldset>
+<fieldset id="middle"></fieldset>
+<fieldset id="bottom"></fieldset>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/fieldset-sibling-2c.html b/layout/reftests/margin-collapsing/fieldset-sibling-2c.html
new file mode 100644
index 0000000000..de4e16cbf2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/fieldset-sibling-2c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+fieldset {
+ height: 20px;
+ padding: 0;
+ border: none;
+ background-color: green;
+}
+#top {
+ margin: 0 0 20px;
+}
+#middle {
+ margin: 20px 0;
+}
+#bottom {
+ margin: 20px 0 0;
+}
+</style>
+</head>
+<body>
+<fieldset id="top"></fieldset>
+<fieldset id="middle"></fieldset>
+<fieldset id="bottom"></fieldset>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-child-1-dyn.html b/layout/reftests/margin-collapsing/inline-block-child-1-dyn.html
new file mode 100644
index 0000000000..8ecbe49d26
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-child-1-dyn.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ display: inline-block;
+ background-color: green;
+}
+#child {
+ display: inline;
+ height: 40px; width: 200px;
+ margin: 20px 0;
+ vertical-align: bottom;
+ background-color: lightgreen;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('child').style.display = 'inline-block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-child-1-ref.html b/layout/reftests/margin-collapsing/inline-block-child-1-ref.html
new file mode 100644
index 0000000000..8a9ef9d6d8
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-child-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ height: 40px; width: 200px;
+ padding: 20px 0;
+ background-color: green;
+}
+#child {
+ height: 40px; width: 200px;
+ background-color: lightgreen;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-child-1.html b/layout/reftests/margin-collapsing/inline-block-child-1.html
new file mode 100644
index 0000000000..80e3c9c684
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-child-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ display: inline-block;
+ background-color: green;
+}
+#child {
+ display: inline-block;
+ height: 40px; width: 200px;
+ margin: 20px 0;
+ vertical-align: bottom;
+ background-color: lightgreen;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-child-2-dyn.html b/layout/reftests/margin-collapsing/inline-block-child-2-dyn.html
new file mode 100644
index 0000000000..388da365ad
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-child-2-dyn.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#inline-block {
+ display: inline-block;
+ margin: 10px 0;
+ background-color: green;
+}
+#block {
+ margin: 10px 0;
+ background-color: lightgreen;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('block').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="inline-block"><span id="block">Hello Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-child-2-noref.html b/layout/reftests/margin-collapsing/inline-block-child-2-noref.html
new file mode 100644
index 0000000000..b76c90f115
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-child-2-noref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#inline-block {
+ display: inline-block;
+ margin: 10px 0;
+ background-color: green;
+}
+#block {
+ margin: 10px 0;
+ background-color: lightgreen;
+}
+</style>
+</head>
+<body>
+<div id="inline-block"><span id="block">Hello Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-child-2-ref.html b/layout/reftests/margin-collapsing/inline-block-child-2-ref.html
new file mode 100644
index 0000000000..7380c72d46
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-child-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#inline-block {
+ display: inline-block;
+ margin: 10px 0;
+ padding: 10px 0;
+ background-color: green;
+}
+#block {
+ display: inline-block;
+ background-color: lightgreen;
+}
+</style>
+</head>
+<body>
+<div id="inline-block"><span id="block">Hello Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-child-2.html b/layout/reftests/margin-collapsing/inline-block-child-2.html
new file mode 100644
index 0000000000..f031640be0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-child-2.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#inline-block {
+ display: inline-block;
+ margin: 10px 0;
+ background-color: green;
+}
+#block {
+ display: block;
+ margin: 10px 0;
+ background-color: lightgreen;
+}
+</style>
+</head>
+<body>
+<div id="inline-block"><span id="block">Hello Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-child-3-dyn.html b/layout/reftests/margin-collapsing/inline-block-child-3-dyn.html
new file mode 100644
index 0000000000..a4dfc0c432
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-child-3-dyn.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+body {
+ margin: 0;
+}
+#block {
+ background-color: green;
+ margin: 10px 0;
+}
+#inline-block {
+ display: block;
+ margin: 10px 0;
+ background-color: lightgreen;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('inline-block').style.display = 'inline-block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block"><div id="inline-block">Hello Kitty</div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-child-3-ref.html b/layout/reftests/margin-collapsing/inline-block-child-3-ref.html
new file mode 100644
index 0000000000..6ca83dd06e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-child-3-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ margin: 0;
+ padding: 10px 0;
+}
+#block {
+ background-color: green;
+ padding: 10px 0;
+}
+#inline-block {
+ display: inline-block;
+ background-color: lightgreen;
+}
+</style>
+</head>
+<body>
+<div id="block"><div id="inline-block">Hello Kitty</div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-child-3.html b/layout/reftests/margin-collapsing/inline-block-child-3.html
new file mode 100644
index 0000000000..e0bd8ae1db
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-child-3.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ margin: 0;
+}
+#block {
+ background-color: green;
+ margin: 10px 0;
+}
+#inline-block {
+ display: inline-block;
+ margin: 10px 0;
+ background-color: lightgreen;
+}
+</style>
+</head>
+<body>
+<div id="block"><div id="inline-block">Hello Kitty</div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-horizontal-1-dyn.html b/layout/reftests/margin-collapsing/inline-block-horizontal-1-dyn.html
new file mode 100644
index 0000000000..ccb0377782
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-horizontal-1-dyn.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#ib1 {
+ display: inline-block;
+ margin-right: 20px;
+}
+#ib2 {
+ display: none;
+ margin-left: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('ib2').style.display = 'inline-block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div><span id="ib1">Hello</span><span id="ib2">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-horizontal-1-noref.html b/layout/reftests/margin-collapsing/inline-block-horizontal-1-noref.html
new file mode 100644
index 0000000000..c7c9d93d0b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-horizontal-1-noref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+span {
+ display: inline-block;
+}
+#ib1 {
+ margin-right: 20px;
+}
+</style>
+</head>
+<body>
+<div><span id="ib1">Hello</span><span>Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-horizontal-1-ref.html b/layout/reftests/margin-collapsing/inline-block-horizontal-1-ref.html
new file mode 100644
index 0000000000..1f7901bfa3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-horizontal-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+span {
+ display: inline-block;
+}
+#ib1 {
+ margin-right: 30px;
+}
+</style>
+</head>
+<body>
+<div><span id="ib1">Hello</span><span>Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-horizontal-1.html b/layout/reftests/margin-collapsing/inline-block-horizontal-1.html
new file mode 100644
index 0000000000..243bc12963
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-horizontal-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#ib1 {
+ display: inline-block;
+ margin-right: 20px;
+}
+#ib2 {
+ display: inline-block;
+ margin-left: 10px;
+}
+</style>
+</head>
+<body>
+<div><span id="ib1">Hello</span><span id="ib2">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-horizontal-2-dyn.html b/layout/reftests/margin-collapsing/inline-block-horizontal-2-dyn.html
new file mode 100644
index 0000000000..f0b325e69d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-horizontal-2-dyn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#ib1 {
+ display: inline-block;
+ margin-right: 10px;
+}
+#ib2 {
+ display: none;
+ margin-left: 10px;
+ margin-right: 20px;
+}
+#ib3 {
+ display: inline-block;
+ margin-left: 40px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('ib2').style.display = 'inline-block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div><span id="ib1">Hello<span id="ib2">my</span></span><span id="ib3">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-horizontal-2-noref.html b/layout/reftests/margin-collapsing/inline-block-horizontal-2-noref.html
new file mode 100644
index 0000000000..369fd04bae
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-horizontal-2-noref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+span {
+ display: inline-block;
+}
+#ib2 {
+ margin-left: 10px;
+ margin-right: 40px;
+}
+</style>
+</head>
+<body>
+<div><span id="ib1">Hello<span id="ib2">my</span></span><span id="ib3">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-horizontal-2-ref.html b/layout/reftests/margin-collapsing/inline-block-horizontal-2-ref.html
new file mode 100644
index 0000000000..c477651ecd
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-horizontal-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+span {
+ display: inline-block;
+}
+#ib2 {
+ margin-left: 10px;
+ margin-right: 70px;
+}
+</style>
+</head>
+<body>
+<div><span id="ib1">Hello<span id="ib2">my</span></span><span id="ib3">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-horizontal-2.html b/layout/reftests/margin-collapsing/inline-block-horizontal-2.html
new file mode 100644
index 0000000000..8c5be5f701
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-horizontal-2.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#ib1 {
+ display: inline-block;
+ margin-right: 10px;
+}
+#ib2 {
+ display: inline-block;
+ margin-left: 10px;
+ margin-right: 20px;
+}
+#ib3 {
+ display: inline-block;
+ margin-left: 40px;
+}
+</style>
+</head>
+<body>
+<div><span id="ib1">Hello<span id="ib2">my</span></span><span id="ib3">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-sibling-1-ref.html b/layout/reftests/margin-collapsing/inline-block-sibling-1-ref.html
new file mode 100644
index 0000000000..1e1026bb85
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-sibling-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- specifying all heights in em units so that large font sizes
+ don't disrupt relationships; everything will scale together -->
+<style type="text/css">
+#parent {
+ width: 200px;
+ background-color: lightgreen;
+}
+#inline-block1, #inline-block2 {
+ height: 2em;
+ background-color: green;
+}
+#margin {
+ height: 2em;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="inline-block1"></div>
+ <div id="margin"></div>
+ <div id="inline-block2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-sibling-1a-dyn.html b/layout/reftests/margin-collapsing/inline-block-sibling-1a-dyn.html
new file mode 100644
index 0000000000..fb9448fde0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-sibling-1a-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ width: 200px;
+ background-color: lightgreen;
+}
+#inline-block1, #inline-block2 {
+ height: 2em; width: 200px;
+ background-color: green;
+ vertical-align: bottom;
+}
+#inline-block1 {
+ margin-bottom: .5em;
+}
+#inline-block2 {
+ margin-top: 1.5em;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('inline-block1').style.display = 'inline-block';
+ document.getElementById('inline-block2').style.display = 'inline-block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="inline-block1"></div>
+ <div id="inline-block2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-sibling-1a.html b/layout/reftests/margin-collapsing/inline-block-sibling-1a.html
new file mode 100644
index 0000000000..f337963f46
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-sibling-1a.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ width: 200px;
+ background-color: lightgreen;
+}
+#inline-block1, #inline-block2 {
+ display: inline-block;
+ height: 2em; width: 200px;
+ background-color: green;
+ vertical-align: bottom;
+}
+#inline-block1 {
+ margin-bottom: .5em;
+}
+#inline-block2 {
+ margin-top: 1.5em;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="inline-block1"></div>
+ <div id="inline-block2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-sibling-1b-dyn.html b/layout/reftests/margin-collapsing/inline-block-sibling-1b-dyn.html
new file mode 100644
index 0000000000..7d5dd782e3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-sibling-1b-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ width: 200px;
+ background-color: lightgreen;
+}
+#inline-block1, #inline-block2 {
+ height: 2em; width: 200px;
+ background-color: green;
+ vertical-align: bottom;
+}
+#inline-block1 {
+ margin-bottom: 1.5em;
+}
+#inline-block2 {
+ margin-top: .5em;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('inline-block1').style.display = 'inline-block';
+ document.getElementById('inline-block2').style.display = 'inline-block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="inline-block1"></div>
+ <div id="inline-block2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-sibling-1b.html b/layout/reftests/margin-collapsing/inline-block-sibling-1b.html
new file mode 100644
index 0000000000..4a9df61da9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-sibling-1b.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ width: 200px;
+ background-color: lightgreen;
+}
+#inline-block1, #inline-block2 {
+ display: inline-block;
+ height: 2em; width: 200px;
+ background-color: green;
+ vertical-align: bottom;
+}
+#inline-block1 {
+ margin-bottom: 1.5em;
+}
+#inline-block2 {
+ margin-top: .5em;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="inline-block1"></div>
+ <div id="inline-block2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-sibling-1c-dyn.html b/layout/reftests/margin-collapsing/inline-block-sibling-1c-dyn.html
new file mode 100644
index 0000000000..6749ce8aae
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-sibling-1c-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#parent {
+ width: 200px;
+ background-color: lightgreen;
+}
+#inline-block1, #inline-block2 {
+ height: 2em; width: 200px;
+ background-color: green;
+ vertical-align: bottom;
+}
+#inline-block1 {
+ margin-bottom: 1em;
+}
+#inline-block2 {
+ margin-top: 1em;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('inline-block1').style.display = 'inline-block';
+ document.getElementById('inline-block2').style.display = 'inline-block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="parent">
+ <div id="inline-block1"></div>
+ <div id="inline-block2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-sibling-1c.html b/layout/reftests/margin-collapsing/inline-block-sibling-1c.html
new file mode 100644
index 0000000000..6b1c30db9e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-sibling-1c.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#parent {
+ width: 200px;
+ background-color: lightgreen;
+}
+#inline-block1, #inline-block2 {
+ display: inline-block;
+ height: 2em; width: 200px;
+ background-color: green;
+ vertical-align: bottom;
+}
+#inline-block1 {
+ margin-bottom: 1em;
+}
+#inline-block2 {
+ margin-top: 1em;
+}
+</style>
+</head>
+<body>
+<div id="parent">
+ <div id="inline-block1"></div>
+ <div id="inline-block2"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-sibling-2-dyn.html b/layout/reftests/margin-collapsing/inline-block-sibling-2-dyn.html
new file mode 100644
index 0000000000..bf73bdf98b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-sibling-2-dyn.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+div {
+ height: 20px; width: 100%;
+ background-color: blue;
+ vertical-align: bottom;
+}
+#block1 {
+ margin-bottom: 15px;
+}
+#inline-block1 {
+ margin: 25px 0 25px;
+}
+#inline-block2 {
+ margin: 15px 0 15px;
+}
+#block2 {
+ margin-top: 25px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('inline-block1').style.display = 'inline-block';
+ document.getElementById('inline-block2').style.display = 'inline-block';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="inline-block1"></div>
+<div id="inline-block2"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-sibling-2-noref.html b/layout/reftests/margin-collapsing/inline-block-sibling-2-noref.html
new file mode 100644
index 0000000000..09b45c5b51
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-sibling-2-noref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+div {
+ height: 20px; width: 100%;
+ background-color: blue;
+ margin-bottom: 25px;
+}
+</style>
+</head>
+<body>
+<div></div>
+<div></div>
+<div></div>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-sibling-2-ref.html b/layout/reftests/margin-collapsing/inline-block-sibling-2-ref.html
new file mode 100644
index 0000000000..fe69bdaf20
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-sibling-2-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+div {
+ height: 20px; width: 100%;
+ background-color: blue;
+ margin-bottom: 40px;
+}
+</style>
+</head>
+<body>
+<div></div>
+<div></div>
+<div></div>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-block-sibling-2.html b/layout/reftests/margin-collapsing/inline-block-sibling-2.html
new file mode 100644
index 0000000000..7a569b86da
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-block-sibling-2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+div {
+ height: 20px; width: 100%;
+ background-color: blue;
+ vertical-align: bottom;
+}
+#block1 {
+ margin-bottom: 15px;
+}
+#inline-block1 {
+ display: inline-block;
+ margin: 25px 0 25px;
+}
+#inline-block2 {
+ display: inline-block;
+ margin: 15px 0 15px;
+}
+#block2 {
+ margin-top: 25px;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="inline-block1"></div>
+<div id="inline-block2"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-horizontal-1-dyn.html b/layout/reftests/margin-collapsing/inline-horizontal-1-dyn.html
new file mode 100644
index 0000000000..95f9958129
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-horizontal-1-dyn.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#inline1 {
+ margin-right: 10px;
+}
+#inline2 {
+ display: none;
+ margin-left: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('inline2').style.display = 'inline';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div><span id="inline1">Hello</span><span id="inline2">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-horizontal-1-noref.html b/layout/reftests/margin-collapsing/inline-horizontal-1-noref.html
new file mode 100644
index 0000000000..2cef9cb2ad
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-horizontal-1-noref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#inline1 {
+ margin-right: 20px;
+}
+</style>
+</head>
+<body>
+<div><span id="inline1">Hello</span><span>Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-horizontal-1-ref.html b/layout/reftests/margin-collapsing/inline-horizontal-1-ref.html
new file mode 100644
index 0000000000..1011242a0b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-horizontal-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#inline1 {
+ margin-right: 30px;
+}
+</style>
+</head>
+<body>
+<div><span id="inline1">Hello</span><span>Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-horizontal-1.html b/layout/reftests/margin-collapsing/inline-horizontal-1.html
new file mode 100644
index 0000000000..2b5be7c105
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-horizontal-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#inline1 {
+ margin-right: 10px;
+}
+#inline2 {
+ margin-left: 20px;
+}
+</style>
+</head>
+<body>
+<div><span id="inline1">Hello</span><span id="inline2">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-horizontal-2-dyn.html b/layout/reftests/margin-collapsing/inline-horizontal-2-dyn.html
new file mode 100644
index 0000000000..493a32a82b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-horizontal-2-dyn.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#inline1 {
+ margin-right: 10px;
+}
+#inline2 {
+ display: none;
+ margin-left: 10px;
+ margin-right: 20px;
+}
+#inline3 {
+ margin-left: 40px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('inline2').style.display = 'inline';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div><span id="inline1">Hello<span id="inline2">my</span></span><span id="inline3">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-horizontal-2-noref.html b/layout/reftests/margin-collapsing/inline-horizontal-2-noref.html
new file mode 100644
index 0000000000..a039f15849
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-horizontal-2-noref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#inline2 {
+ margin-left: 10px;
+ margin-right: 40px;
+}
+</style>
+</head>
+<body>
+<div><span id="inline1">Hello<span id="inline2">my</span></span><span id="inline3">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-horizontal-2-ref.html b/layout/reftests/margin-collapsing/inline-horizontal-2-ref.html
new file mode 100644
index 0000000000..3939978bd9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-horizontal-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#inline2 {
+ margin-left: 10px;
+ margin-right: 70px;
+}
+</style>
+</head>
+<body>
+<div><span id="inline1">Hello<span id="inline2">my</span></span><span id="inline3">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-horizontal-2.html b/layout/reftests/margin-collapsing/inline-horizontal-2.html
new file mode 100644
index 0000000000..f723c7d44c
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-horizontal-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#inline1 {
+ margin-right: 10px;
+}
+#inline2 {
+ margin-left: 10px;
+ margin-right: 20px;
+}
+#inline3 {
+ margin-left: 40px;
+}
+</style>
+</head>
+<body>
+<div><span id="inline1">Hello<span id="inline2">my</span></span><span id="inline3">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-table-horizontal-1-dyn.html b/layout/reftests/margin-collapsing/inline-table-horizontal-1-dyn.html
new file mode 100644
index 0000000000..9610d53bb4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-table-horizontal-1-dyn.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#it1 {
+ display: inline-table;
+ margin-right: 20px;
+}
+#it2 {
+ display: none;
+ margin-left: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('it2').style.display = 'inline-table';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div><span id="it1">Hello</span><span id="it2">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-table-horizontal-1-noref.html b/layout/reftests/margin-collapsing/inline-table-horizontal-1-noref.html
new file mode 100644
index 0000000000..abccb7feb1
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-table-horizontal-1-noref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#it1 {
+ display: inline-table;
+ margin-right: 20px;
+}
+#it2 {
+ display: inline-table;
+}
+</style>
+</head>
+<body>
+<div><span id="it1">Hello</span><span id="it2">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-table-horizontal-1-ref.html b/layout/reftests/margin-collapsing/inline-table-horizontal-1-ref.html
new file mode 100644
index 0000000000..aad63ec3a4
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-table-horizontal-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#it1 {
+ display: inline-table;
+ margin-right: 30px;
+}
+#it2 {
+ display: inline-table;
+}
+</style>
+</head>
+<body>
+<div><span id="it1">Hello</span><span id="it2">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/inline-table-horizontal-1.html b/layout/reftests/margin-collapsing/inline-table-horizontal-1.html
new file mode 100644
index 0000000000..0496c962ae
--- /dev/null
+++ b/layout/reftests/margin-collapsing/inline-table-horizontal-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+body {
+ font-family: sans-serif;
+}
+#it1 {
+ display: inline-table;
+ margin-right: 20px;
+}
+#it2 {
+ display: inline-table;
+ margin-left: 10px;
+}
+</style>
+</head>
+<body>
+<div><span id="it1">Hello</span><span id="it2">Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/reftest.list b/layout/reftests/margin-collapsing/reftest.list
new file mode 100644
index 0000000000..c4dd8b0603
--- /dev/null
+++ b/layout/reftests/margin-collapsing/reftest.list
@@ -0,0 +1,851 @@
+# Test Suite for CSS 2.1, 8.3.1 Collapsing margins - See Bug 477462
+# Based on CSS 2.1: http://www.w3.org/TR/2011/REC-CSS2-20110607/
+# and its Errata, Last revised: $Date: 2013-09-09 17:40:16 $
+# The structure of this manifest is intended to resemble the structure of
+# the prose that defines collapsing margins. As a result, there are several
+# sections where inline-block-, block-, and other- series are combined.
+# E.g. the first section is about horizontal margins and includes both
+# inline- and block series.
+# "Horizontal margins never collapse."
+# Horizontal margins of inline boxes do not collapse.
+# The norefs for these tests depict margins that incorrectly collapsed.
+== inline-horizontal-1.html inline-horizontal-1-ref.html
+!= inline-horizontal-1.html inline-horizontal-1-noref.html
+== inline-horizontal-2.html inline-horizontal-2-ref.html
+!= inline-horizontal-2.html inline-horizontal-2-noref.html
+== inline-horizontal-1-dyn.html inline-horizontal-1-ref.html
+!= inline-horizontal-1-dyn.html inline-horizontal-1-noref.html
+== inline-horizontal-2-dyn.html inline-horizontal-2-ref.html
+!= inline-horizontal-2-dyn.html inline-horizontal-2-noref.html
+# Horizontal margins of block boxes do not collapse.
+# These block boxes are actually floats - in CSS 2.1 there is no other
+# method to create horizontally adjacent block boxes.
+== block-horizontal-1.html block-horizontal-1-ref.html
+!= block-horizontal-1.html block-horizontal-1-noref.html
+== block-horizontal-2.html block-horizontal-2-ref.html
+!= block-horizontal-2.html block-horizontal-2-noref.html
+== block-horizontal-3.html block-horizontal-3-ref.html
+!= block-horizontal-3.html block-horizontal-3-noref.html
+== block-horizontal-4.html block-horizontal-4-ref.html
+!= block-horizontal-4.html block-horizontal-4-noref.html
+== block-horizontal-1-dyn.html block-horizontal-1-ref.html
+!= block-horizontal-1-dyn.html block-horizontal-1-noref.html
+== block-horizontal-2-dyn.html block-horizontal-2-ref.html
+!= block-horizontal-2-dyn.html block-horizontal-2-noref.html
+== block-horizontal-3-dyn.html block-horizontal-3-ref.html
+!= block-horizontal-3-dyn.html block-horizontal-3-noref.html
+== block-horizontal-4-dyn.html block-horizontal-4-ref.html
+!= block-horizontal-4-dyn.html block-horizontal-4-noref.html
+# Horizontal margins of inline-block boxes do not collapse.
+== inline-block-horizontal-1.html inline-block-horizontal-1-ref.html
+!= inline-block-horizontal-1.html inline-block-horizontal-1-noref.html
+== inline-block-horizontal-2.html inline-block-horizontal-2-ref.html
+!= inline-block-horizontal-2.html inline-block-horizontal-2-noref.html
+== inline-block-horizontal-1-dyn.html inline-block-horizontal-1-ref.html
+!= inline-block-horizontal-1-dyn.html inline-block-horizontal-1-noref.html
+== inline-block-horizontal-2-dyn.html inline-block-horizontal-2-ref.html
+!= inline-block-horizontal-2-dyn.html inline-block-horizontal-2-noref.html
+# Horizontal margins of inline-tables do not collapse.
+== inline-table-horizontal-1.html inline-table-horizontal-1-ref.html
+!= inline-table-horizontal-1.html inline-table-horizontal-1-noref.html
+== inline-table-horizontal-1-dyn.html inline-table-horizontal-1-ref.html
+!= inline-table-horizontal-1-dyn.html inline-table-horizontal-1-noref.html
+# "In CSS, the adjoining margins of two or more boxes
+# (which might or might not be siblings) can combine to form a single margin.
+# Margins that combine this way are said to collapse,
+# and the resulting combined margin is called a collapsed margin."
+# "Two margins are adjoining if and only if:" [...]
+# "both belong to vertically-adjacent box edges,
+# i.e. form one of the following pairs:" [...]
+# "bottom margin of box and top margin of its next in-flow following sibling"
+# "When two or more margins collapse,
+# the resulting margin width is the maximum of the collapsing margins' widths."
+# The margins of two in-flow siblings should collapse.
+# These tests feature margins of different or equal sizes on each box.
+# The norefs depict incorrect results where the margins did not collapse.
+== block-sibling-1a.html block-sibling-1-ref.html
+== block-sibling-1a.html block-sibling-1-ref2.html
+!= block-sibling-1a.html block-sibling-1-noref.html
+== block-sibling-1b.html block-sibling-1-ref.html
+== block-sibling-1b.html block-sibling-1-ref2.html
+!= block-sibling-1b.html block-sibling-1-noref.html
+== block-sibling-1c.html block-sibling-1-ref.html
+== block-sibling-1c.html block-sibling-1-ref2.html
+!= block-sibling-1c.html block-sibling-1-noref2.html
+== block-sibling-2.html block-sibling-2-ref.html
+== block-sibling-2.html block-sibling-2-ref2.html
+!= block-sibling-2.html block-sibling-2-noref.html
+== block-sibling-3.html block-sibling-1-ref.html
+== block-sibling-3.html block-sibling-1-ref2.html
+!= block-sibling-3.html block-sibling-1-noref.html
+== block-sibling-1a-dyn.html block-sibling-1-ref.html
+== block-sibling-1a-dyn.html block-sibling-1-ref2.html
+!= block-sibling-1a-dyn.html block-sibling-1-noref.html
+== block-sibling-1b-dyn.html block-sibling-1-ref.html
+== block-sibling-1b-dyn.html block-sibling-1-ref2.html
+!= block-sibling-1b-dyn.html block-sibling-1-noref.html
+== block-sibling-1c-dyn.html block-sibling-1-ref.html
+== block-sibling-1c-dyn.html block-sibling-1-ref2.html
+!= block-sibling-1c-dyn.html block-sibling-1-noref2.html
+== block-sibling-2-dyn.html block-sibling-2-ref.html
+== block-sibling-2-dyn.html block-sibling-2-ref2.html
+!= block-sibling-2-dyn.html block-sibling-2-noref.html
+== block-sibling-3-dyn.html block-sibling-1-ref.html
+== block-sibling-3-dyn.html block-sibling-1-ref2.html
+!= block-sibling-3-dyn.html block-sibling-1-noref.html
+# "In the case of negative margins, the maximum of the absolute values of the
+# negative adjoining margins is deducted from the maximum of the positive
+# adjoining margins. If there are no positive margins, the maximum of the
+# absolute values of the adjoining margins is deducted from zero."
+# These tests feature sibling block boxes where one or two margins are negative.
+# The norefs depict possible incorrect addition or subtraction of margins.
+== block-negative-1a.html block-negative-1-ref.html
+!= block-negative-1a.html block-negative-1-noref1.html
+!= block-negative-1a.html block-negative-1-noref2.html
+== block-negative-1b.html block-negative-1-ref.html
+!= block-negative-1b.html block-negative-1-noref1.html
+!= block-negative-1b.html block-negative-1-noref2.html
+== block-negative-2a.html block-negative-2-ref.html
+!= block-negative-2a.html block-negative-2-noref1.html
+!= block-negative-2a.html block-negative-2-noref2.html
+== block-negative-2b.html block-negative-2-ref.html
+!= block-negative-2b.html block-negative-2-noref1.html
+!= block-negative-2b.html block-negative-2-noref2.html
+== block-negative-3a.html block-negative-3-ref.html
+== block-negative-3a.html block-negative-3-ref2.html
+!= block-negative-3a.html block-negative-3-noref1.html
+!= block-negative-3a.html block-negative-3-noref2.html
+== block-negative-3b.html block-negative-3-ref.html
+== block-negative-3b.html block-negative-3-ref2.html
+!= block-negative-3b.html block-negative-3-noref1.html
+!= block-negative-3b.html block-negative-3-noref2.html
+== block-negative-4a.html block-negative-4-ref.html
+== block-negative-4a.html block-negative-4-ref2.html
+!= block-negative-4a.html block-negative-4-noref1.html
+!= block-negative-4a.html block-negative-4-noref2.html
+== block-negative-4b.html block-negative-4-ref.html
+== block-negative-4b.html block-negative-4-ref2.html
+!= block-negative-4b.html block-negative-4-noref1.html
+!= block-negative-4b.html block-negative-4-noref2.html
+== block-negative-5.html block-negative-5-ref.html
+== block-negative-5.html block-negative-5-ref2.html
+!= block-negative-5.html block-negative-5-noref1.html
+!= block-negative-5.html block-negative-5-noref2.html
+== block-negative-1a-dyn1.html block-negative-1-ref.html
+!= block-negative-1a-dyn1.html block-negative-1-noref1.html
+!= block-negative-1a-dyn1.html block-negative-1-noref2.html
+== block-negative-1a-dyn2.html block-negative-1-ref.html
+!= block-negative-1a-dyn2.html block-negative-1-noref1.html
+!= block-negative-1a-dyn2.html block-negative-1-noref2.html
+== block-negative-1b-dyn1.html block-negative-1-ref.html
+!= block-negative-1b-dyn1.html block-negative-1-noref1.html
+!= block-negative-1b-dyn1.html block-negative-1-noref2.html
+== block-negative-1b-dyn2.html block-negative-1-ref.html
+!= block-negative-1b-dyn2.html block-negative-1-noref1.html
+!= block-negative-1b-dyn2.html block-negative-1-noref2.html
+== block-negative-2a-dyn1.html block-negative-2-ref.html
+!= block-negative-2a-dyn1.html block-negative-2-noref1.html
+!= block-negative-2a-dyn1.html block-negative-2-noref2.html
+== block-negative-2a-dyn2.html block-negative-2-ref.html
+!= block-negative-2a-dyn2.html block-negative-2-noref1.html
+!= block-negative-2a-dyn2.html block-negative-2-noref2.html
+== block-negative-2b-dyn1.html block-negative-2-ref.html
+!= block-negative-2b-dyn1.html block-negative-2-noref1.html
+!= block-negative-2b-dyn1.html block-negative-2-noref2.html
+== block-negative-2b-dyn2.html block-negative-2-ref.html
+!= block-negative-2b-dyn2.html block-negative-2-noref1.html
+!= block-negative-2b-dyn2.html block-negative-2-noref2.html
+== block-negative-3a-dyn1.html block-negative-3-ref.html
+== block-negative-3a-dyn1.html block-negative-3-ref2.html
+!= block-negative-3a-dyn1.html block-negative-3-noref1.html
+!= block-negative-3a-dyn1.html block-negative-3-noref2.html
+== block-negative-3a-dyn2.html block-negative-3-ref.html
+== block-negative-3a-dyn2.html block-negative-3-ref2.html
+!= block-negative-3a-dyn2.html block-negative-3-noref1.html
+!= block-negative-3a-dyn2.html block-negative-3-noref2.html
+== block-negative-3b-dyn1.html block-negative-3-ref.html
+== block-negative-3b-dyn1.html block-negative-3-ref2.html
+!= block-negative-3b-dyn1.html block-negative-3-noref1.html
+!= block-negative-3b-dyn1.html block-negative-3-noref2.html
+== block-negative-3b-dyn2.html block-negative-3-ref.html
+== block-negative-3b-dyn2.html block-negative-3-ref2.html
+!= block-negative-3b-dyn2.html block-negative-3-noref1.html
+!= block-negative-3b-dyn2.html block-negative-3-noref2.html
+== block-negative-4a-dyn1.html block-negative-4-ref.html
+== block-negative-4a-dyn1.html block-negative-4-ref2.html
+!= block-negative-4a-dyn1.html block-negative-4-noref1.html
+!= block-negative-4a-dyn1.html block-negative-4-noref2.html
+== block-negative-4a-dyn2.html block-negative-4-ref.html
+== block-negative-4a-dyn2.html block-negative-4-ref2.html
+!= block-negative-4a-dyn2.html block-negative-4-noref1.html
+!= block-negative-4a-dyn2.html block-negative-4-noref2.html
+== block-negative-4b-dyn1.html block-negative-4-ref.html
+== block-negative-4b-dyn1.html block-negative-4-ref2.html
+!= block-negative-4b-dyn1.html block-negative-4-noref1.html
+!= block-negative-4b-dyn1.html block-negative-4-noref2.html
+== block-negative-4b-dyn2.html block-negative-4-ref.html
+== block-negative-4b-dyn2.html block-negative-4-ref2.html
+!= block-negative-4b-dyn2.html block-negative-4-noref1.html
+!= block-negative-4b-dyn2.html block-negative-4-noref2.html
+== block-negative-5-dyn1.html block-negative-5-ref.html
+== block-negative-5-dyn1.html block-negative-5-ref2.html
+!= block-negative-5-dyn1.html block-negative-5-noref1.html
+!= block-negative-5-dyn1.html block-negative-5-noref2.html
+== block-negative-5-dyn2.html block-negative-5-ref.html
+== block-negative-5-dyn2.html block-negative-5-ref2.html
+!= block-negative-5-dyn2.html block-negative-5-noref1.html
+!= block-negative-5-dyn2.html block-negative-5-noref2.html
+# "Two margins are adjoining if and only if:" [...]
+# "both belong to vertically-adjacent box edges,
+# i.e. form one of the following pairs:" [...]
+# "top margin of a box and top margin of its first in-flow child"
+# "bottom margin of a last in-flow child and bottom margin of its parent
+# if the parent has 'auto' computed height"
+# "A collapsed margin is considered adjoining to another margin if
+# any of its component margins is adjoining to that margin."
+# "Note. Adjoining margins can be generated by elements that are
+# not related as siblings or ancestors."
+# These tests check whether margins are correctly collapsed even when the
+# boxes participating are not related as siblings or ancestors.
+# The tests feature different sizes of margins on different boxes.
+== block-non-sibling-1a.html block-non-sibling-1-ref.html
+== block-non-sibling-1a.html block-non-sibling-1-ref2.html
+== block-non-sibling-1b.html block-non-sibling-1-ref.html
+== block-non-sibling-1b.html block-non-sibling-1-ref2.html
+== block-non-sibling-1c.html block-non-sibling-1-ref.html
+== block-non-sibling-1c.html block-non-sibling-1-ref2.html
+== block-non-sibling-1d.html block-non-sibling-1-ref.html
+== block-non-sibling-1d.html block-non-sibling-1-ref2.html
+== block-non-sibling-1e.html block-non-sibling-1-ref.html
+== block-non-sibling-1e.html block-non-sibling-1-ref2.html
+== block-non-sibling-1f.html block-non-sibling-1-ref.html
+== block-non-sibling-1f.html block-non-sibling-1-ref2.html
+== block-non-sibling-2a.html block-non-sibling-2-ref.html
+== block-non-sibling-2a.html block-non-sibling-2-ref2.html
+== block-non-sibling-2b.html block-non-sibling-2-ref.html
+== block-non-sibling-2b.html block-non-sibling-2-ref2.html
+== block-non-sibling-2c.html block-non-sibling-2-ref.html
+== block-non-sibling-2c.html block-non-sibling-2-ref2.html
+== block-non-sibling-2d.html block-non-sibling-2-ref.html
+== block-non-sibling-2d.html block-non-sibling-2-ref2.html
+== block-non-sibling-2e.html block-non-sibling-2-ref.html
+== block-non-sibling-2e.html block-non-sibling-2-ref2.html
+== block-non-sibling-2f.html block-non-sibling-2-ref.html
+== block-non-sibling-2f.html block-non-sibling-2-ref2.html
+== block-non-sibling-3a.html block-non-sibling-3-ref.html
+== block-non-sibling-3a.html block-non-sibling-3-ref2.html
+== block-non-sibling-3b.html block-non-sibling-3-ref.html
+== block-non-sibling-3b.html block-non-sibling-3-ref2.html
+== block-non-sibling-3c.html block-non-sibling-3-ref.html
+== block-non-sibling-3c.html block-non-sibling-3-ref2.html
+== block-non-sibling-3d.html block-non-sibling-3-ref.html
+== block-non-sibling-3d.html block-non-sibling-3-ref2.html
+== block-non-sibling-4.html block-non-sibling-4-ref.html
+== block-non-sibling-4.html block-non-sibling-4-ref2.html
+== block-non-sibling-1a-dyn.html block-non-sibling-1-ref2.html
+== block-non-sibling-1b-dyn.html block-non-sibling-1-ref2.html
+== block-non-sibling-1c-dyn.html block-non-sibling-1-ref2.html
+== block-non-sibling-1d-dyn.html block-non-sibling-1-ref2.html
+== block-non-sibling-1e-dyn.html block-non-sibling-1-ref2.html
+== block-non-sibling-1f-dyn.html block-non-sibling-1-ref2.html
+== block-non-sibling-2a-dyn.html block-non-sibling-2-ref2.html
+== block-non-sibling-2b-dyn.html block-non-sibling-2-ref2.html
+== block-non-sibling-2c-dyn.html block-non-sibling-2-ref2.html
+== block-non-sibling-2d-dyn.html block-non-sibling-2-ref2.html
+== block-non-sibling-2e-dyn.html block-non-sibling-2-ref2.html
+== block-non-sibling-2f-dyn.html block-non-sibling-2-ref2.html
+== block-non-sibling-3a-dyn.html block-non-sibling-3-ref2.html
+== block-non-sibling-3b-dyn.html block-non-sibling-3-ref2.html
+== block-non-sibling-3c-dyn.html block-non-sibling-3-ref2.html
+== block-non-sibling-3d-dyn.html block-non-sibling-3-ref2.html
+== block-non-sibling-4-dyn.html block-non-sibling-4-ref2.html
+# The first-child series tests cases where the top margin of a box collapses
+# with the top margin of its parent element.
+# This series is more extensive than the non-sibling series, because
+# various combinations of positive and negative margins are tested.
+== block-first-child-1a.html block-first-child-1-ref.html
+== block-first-child-1b.html block-first-child-1-ref.html
+== block-first-child-1c.html block-first-child-1-ref.html
+== block-first-child-2.html block-first-child-2-ref.html
+== block-first-child-3.html block-first-child-3-ref.html
+== block-first-child-4.html block-first-child-4-ref.html
+== block-first-child-5.html block-first-child-5-ref.html
+== block-first-child-6.html block-first-child-6-ref.html
+== block-first-child-7.html block-first-child-7-ref.html
+== block-first-child-8a.html block-first-child-8-ref.html
+== block-first-child-8b.html block-first-child-8-ref.html
+== block-first-child-8c.html block-first-child-8-ref.html
+== block-first-child-1a-dyn.html block-first-child-1-ref.html
+== block-first-child-1b-dyn.html block-first-child-1-ref.html
+== block-first-child-1c-dyn.html block-first-child-1-ref.html
+== block-first-child-2-dyn.html block-first-child-2-ref.html
+== block-first-child-3-dyn.html block-first-child-3-ref.html
+== block-first-child-4-dyn.html block-first-child-4-ref.html
+== block-first-child-5-dyn.html block-first-child-5-ref.html
+== block-first-child-6-dyn.html block-first-child-6-ref.html
+== block-first-child-7-dyn.html block-first-child-7-ref.html
+== block-first-child-8a-dyn.html block-first-child-8-ref.html
+== block-first-child-8b-dyn.html block-first-child-8-ref.html
+== block-first-child-8c-dyn.html block-first-child-8-ref.html
+# "The bottom margin of an in-flow block box with a 'height' of 'auto'
+# collapses with its last in-flow block-level child's bottom margin"
+# Note: The block-auto-height-last-child series automatically covers
+# all cases where 'min-height' is '0' and 'max-height' is 'none' as
+# these are the default values of those properties.
+== block-auto-height-last-child-1a.html block-auto-height-last-child-1-ref.html
+== block-auto-height-last-child-1b.html block-auto-height-last-child-1-ref.html
+== block-auto-height-last-child-1c.html block-auto-height-last-child-1-ref.html
+== block-auto-height-last-child-2.html block-auto-height-last-child-2-ref.html
+== block-auto-height-last-child-3.html block-auto-height-last-child-3-ref.html
+== block-auto-height-last-child-4.html block-auto-height-last-child-4-ref.html
+== block-auto-height-last-child-5.html block-auto-height-last-child-5-ref.html
+== block-auto-height-last-child-6.html block-auto-height-last-child-6-ref.html
+== block-auto-height-last-child-7.html block-auto-height-last-child-7-ref.html
+== block-auto-height-last-child-8a.html block-auto-height-last-child-8-ref.html
+== block-auto-height-last-child-8b.html block-auto-height-last-child-8-ref.html
+== block-auto-height-last-child-8c.html block-auto-height-last-child-8-ref.html
+== block-auto-height-last-child-1a-dyn.html block-auto-height-last-child-1-ref.html
+== block-auto-height-last-child-1b-dyn.html block-auto-height-last-child-1-ref.html
+== block-auto-height-last-child-1c-dyn.html block-auto-height-last-child-1-ref.html
+== block-auto-height-last-child-2-dyn.html block-auto-height-last-child-2-ref.html
+== block-auto-height-last-child-3-dyn.html block-auto-height-last-child-3-ref.html
+== block-auto-height-last-child-4-dyn.html block-auto-height-last-child-4-ref.html
+== block-auto-height-last-child-5-dyn.html block-auto-height-last-child-5-ref.html
+== block-auto-height-last-child-6-dyn.html block-auto-height-last-child-6-ref.html
+== block-auto-height-last-child-7-dyn.html block-auto-height-last-child-7-ref.html
+== block-auto-height-last-child-8a-dyn.html block-auto-height-last-child-8-ref.html
+== block-auto-height-last-child-8b-dyn.html block-auto-height-last-child-8-ref.html
+== block-auto-height-last-child-8c-dyn.html block-auto-height-last-child-8-ref.html
+# The last-child series is an older variant of the
+# block-auto-height-last-child tests.
+== block-last-child-1a.html block-last-child-1-ref.html
+== block-last-child-1b.html block-last-child-1-ref.html
+== block-last-child-1c.html block-last-child-1-ref.html
+== block-last-child-2a.html block-last-child-2-ref.html
+== block-last-child-2b.html block-last-child-2-ref.html
+== block-last-child-2c.html block-last-child-2-ref.html
+== block-last-child-2d.html block-last-child-2-ref.html
+== block-last-child-3a.html block-last-child-3-ref.html
+== block-last-child-3b.html block-last-child-3-ref.html
+== block-last-child-3c.html block-last-child-3-ref.html
+== block-last-child-3d.html block-last-child-3-ref.html
+== block-last-child-4a.html block-last-child-4-ref.html
+== block-last-child-4b.html block-last-child-4-ref.html
+== block-last-child-4c.html block-last-child-4-ref.html
+== block-last-child-4d.html block-last-child-4-ref.html
+# There's also the older block-zero-min-height series which explicitly
+# adds min-height: 0; to boxes with height: auto;
+# This should have no effect on margin-collapsing.
+== block-zero-min-height-1a.html block-zero-min-height-1-ref.html
+== block-zero-min-height-1b.html block-zero-min-height-1-ref.html
+== block-zero-min-height-1c.html block-zero-min-height-1-ref.html
+== block-zero-min-height-1d.html block-zero-min-height-1-ref.html
+== block-zero-min-height-1e.html block-zero-min-height-1-ref.html
+== block-zero-min-height-1f.html block-zero-min-height-1-ref.html
+!= block-zero-min-height-1a.html block-zero-min-height-1-noref.html
+!= block-zero-min-height-1b.html block-zero-min-height-1-noref.html
+!= block-zero-min-height-1c.html block-zero-min-height-1-noref.html
+!= block-zero-min-height-1d.html block-zero-min-height-1-noref.html
+!= block-zero-min-height-1e.html block-zero-min-height-1-noref.html
+!= block-zero-min-height-1f.html block-zero-min-height-1-noref.html
+== block-zero-min-height-2a.html block-zero-min-height-2ab-ref.html
+== block-zero-min-height-2b.html block-zero-min-height-2ab-ref.html
+== block-zero-min-height-2c.html block-zero-min-height-2c-ref.html
+== block-zero-min-height-2d.html block-zero-min-height-2de-ref.html
+== block-zero-min-height-2e.html block-zero-min-height-2de-ref.html
+== block-zero-min-height-2f.html block-zero-min-height-2f-ref.html
+!= block-zero-min-height-2a.html block-zero-min-height-2-noref.html
+!= block-zero-min-height-2b.html block-zero-min-height-2-noref.html
+!= block-zero-min-height-2c.html block-zero-min-height-2-noref.html
+!= block-zero-min-height-2d.html block-zero-min-height-2-noref.html
+!= block-zero-min-height-2e.html block-zero-min-height-2-noref.html
+!= block-zero-min-height-2f.html block-zero-min-height-2-noref.html
+== block-zero-min-height-3a.html block-zero-min-height-3-ref.html
+== block-zero-min-height-3b.html block-zero-min-height-3-ref.html
+== block-zero-min-height-3c.html block-zero-min-height-3-ref.html
+== block-zero-min-height-3d.html block-zero-min-height-3-ref.html
+# If a parent box's height is 'auto' and its 'min-height' is non-zero,
+# then its bottom margin collapses with its last-child's bottom margin.
+# This is true even if the two margins do not actually touch each other,
+# as they are still considered 'adjoining'.
+fails == block-min-height-last-child-1a.html block-min-height-last-child-1-ref.html # Bug 616339
+== block-min-height-last-child-1b.html block-min-height-last-child-1-ref.html
+== block-min-height-last-child-1c.html block-min-height-last-child-1-ref.html
+fails == block-min-height-last-child-2a.html block-min-height-last-child-2-ref.html # Bug 616339
+fails == block-min-height-last-child-2b.html block-min-height-last-child-2-ref.html # Bug 616339
+fails == block-min-height-last-child-3a.html block-min-height-last-child-3-ref.html # Bug 616339
+== block-min-height-last-child-3b.html block-min-height-last-child-3-ref.html
+== block-min-height-last-child-3c.html block-min-height-last-child-3-ref.html
+== block-min-height-last-child-4a.html block-min-height-last-child-4-ref.html
+== block-min-height-last-child-4b.html block-min-height-last-child-4-ref.html
+== block-min-height-last-child-4c.html block-min-height-last-child-4-ref.html
+== block-min-height-last-child-5a.html block-min-height-last-child-5-ref.html
+== block-min-height-last-child-5b.html block-min-height-last-child-5-ref.html
+== block-min-height-last-child-6a.html block-min-height-last-child-6-ref.html
+== block-min-height-last-child-6b.html block-min-height-last-child-6-ref.html
+== block-min-height-last-child-6c.html block-min-height-last-child-6-ref.html
+== block-min-height-last-child-7a.html block-min-height-last-child-7-ref.html
+== block-min-height-last-child-7b.html block-min-height-last-child-7-ref.html
+== block-min-height-last-child-7c.html block-min-height-last-child-7-ref.html
+== block-min-height-last-child-8a.html block-min-height-last-child-8-ref.html
+== block-min-height-last-child-8b.html block-min-height-last-child-8-ref.html
+== block-min-height-last-child-9a.html block-min-height-last-child-9-ref.html
+== block-min-height-last-child-9b.html block-min-height-last-child-9-ref.html
+== block-min-height-last-child-9c.html block-min-height-last-child-9-ref.html
+fails == block-min-height-last-child-1a-dyn.html block-min-height-last-child-1-ref.html # Bug 616339
+== block-min-height-last-child-1b-dyn.html block-min-height-last-child-1-ref.html
+== block-min-height-last-child-1c-dyn.html block-min-height-last-child-1-ref.html
+fails == block-min-height-last-child-2a-dyn.html block-min-height-last-child-2-ref.html # Bug 616339
+fails == block-min-height-last-child-2b-dyn.html block-min-height-last-child-2-ref.html # Bug 616339
+fails == block-min-height-last-child-3a-dyn.html block-min-height-last-child-3-ref.html # Bug 616339
+== block-min-height-last-child-3b-dyn.html block-min-height-last-child-3-ref.html
+== block-min-height-last-child-3c-dyn.html block-min-height-last-child-3-ref.html
+== block-min-height-last-child-4a-dyn.html block-min-height-last-child-4-ref.html
+== block-min-height-last-child-4b-dyn.html block-min-height-last-child-4-ref.html
+== block-min-height-last-child-4c-dyn.html block-min-height-last-child-4-ref.html
+== block-min-height-last-child-5a-dyn.html block-min-height-last-child-5-ref.html
+== block-min-height-last-child-5b-dyn.html block-min-height-last-child-5-ref.html
+== block-min-height-last-child-6a-dyn.html block-min-height-last-child-6-ref.html
+== block-min-height-last-child-6b-dyn.html block-min-height-last-child-6-ref.html
+== block-min-height-last-child-6c-dyn.html block-min-height-last-child-6-ref.html
+== block-min-height-last-child-7a-dyn.html block-min-height-last-child-7-ref.html
+== block-min-height-last-child-7b-dyn.html block-min-height-last-child-7-ref.html
+== block-min-height-last-child-7c-dyn.html block-min-height-last-child-7-ref.html
+== block-min-height-last-child-8a-dyn.html block-min-height-last-child-8-ref.html
+== block-min-height-last-child-8b-dyn.html block-min-height-last-child-8-ref.html
+== block-min-height-last-child-9a-dyn.html block-min-height-last-child-9-ref.html
+== block-min-height-last-child-9b-dyn.html block-min-height-last-child-9-ref.html
+== block-min-height-last-child-9c-dyn.html block-min-height-last-child-9-ref.html
+# If a parent box's height is 'auto' and its 'max-height' is not 'none'
+# then its bottom margin collapses with its last-child's bottom margin.
+# According to CSS 2.1 §10.7 (Minimum and maximum heights) this is true,
+# even if the descendant's height is bigger than the defined max-height.
+== block-max-height-last-child-1a.html block-max-height-last-child-1-ref.html
+== block-max-height-last-child-1b.html block-max-height-last-child-1-ref.html
+== block-max-height-last-child-1c.html block-max-height-last-child-1-ref.html
+== block-max-height-last-child-2a.html block-max-height-last-child-2-ref.html
+== block-max-height-last-child-2b.html block-max-height-last-child-2-ref.html
+== block-max-height-last-child-3a.html block-max-height-last-child-3-ref.html
+== block-max-height-last-child-3b.html block-max-height-last-child-3-ref.html
+== block-max-height-last-child-3c.html block-max-height-last-child-3-ref.html
+== block-max-height-last-child-4a.html block-max-height-last-child-4-ref.html
+== block-max-height-last-child-4b.html block-max-height-last-child-4-ref.html
+== block-max-height-last-child-4c.html block-max-height-last-child-4-ref.html
+== block-max-height-last-child-5a.html block-max-height-last-child-5-ref.html
+== block-max-height-last-child-5b.html block-max-height-last-child-5-ref.html
+== block-max-height-last-child-6a.html block-max-height-last-child-6-ref.html
+== block-max-height-last-child-6b.html block-max-height-last-child-6-ref.html
+== block-max-height-last-child-6c.html block-max-height-last-child-6-ref.html
+fails == block-max-height-last-child-7a.html block-max-height-last-child-7-ref.html # Bug 616339
+== block-max-height-last-child-7b.html block-max-height-last-child-7-ref.html
+== block-max-height-last-child-7c.html block-max-height-last-child-7-ref.html
+fails == block-max-height-last-child-8a.html block-max-height-last-child-8-ref.html # Bug 616339
+fails == block-max-height-last-child-8b.html block-max-height-last-child-8-ref.html # Bug 616339
+fails == block-max-height-last-child-9a.html block-max-height-last-child-9-ref.html # Bug 616339
+== block-max-height-last-child-9b.html block-max-height-last-child-9-ref.html
+== block-max-height-last-child-9c.html block-max-height-last-child-9-ref.html
+== block-max-height-last-child-1a-dyn.html block-max-height-last-child-1-ref.html
+== block-max-height-last-child-1b-dyn.html block-max-height-last-child-1-ref.html
+== block-max-height-last-child-1c-dyn.html block-max-height-last-child-1-ref.html
+== block-max-height-last-child-2a-dyn.html block-max-height-last-child-2-ref.html
+== block-max-height-last-child-2b-dyn.html block-max-height-last-child-2-ref.html
+== block-max-height-last-child-3a-dyn.html block-max-height-last-child-3-ref.html
+== block-max-height-last-child-3b-dyn.html block-max-height-last-child-3-ref.html
+== block-max-height-last-child-3c-dyn.html block-max-height-last-child-3-ref.html
+== block-max-height-last-child-4a-dyn.html block-max-height-last-child-4-ref.html
+== block-max-height-last-child-4b-dyn.html block-max-height-last-child-4-ref.html
+== block-max-height-last-child-4c-dyn.html block-max-height-last-child-4-ref.html
+== block-max-height-last-child-5a-dyn.html block-max-height-last-child-5-ref.html
+== block-max-height-last-child-5b-dyn.html block-max-height-last-child-5-ref.html
+== block-max-height-last-child-6a-dyn.html block-max-height-last-child-6-ref.html
+== block-max-height-last-child-6b-dyn.html block-max-height-last-child-6-ref.html
+== block-max-height-last-child-6c-dyn.html block-max-height-last-child-6-ref.html
+fails == block-max-height-last-child-7a-dyn.html block-max-height-last-child-7-ref.html # Bug 616339
+== block-max-height-last-child-7b-dyn.html block-max-height-last-child-7-ref.html
+== block-max-height-last-child-7c-dyn.html block-max-height-last-child-7-ref.html
+fails == block-max-height-last-child-8a-dyn.html block-max-height-last-child-8-ref.html # Bug 616339
+fails == block-max-height-last-child-8b-dyn.html block-max-height-last-child-8-ref.html # Bug 616339
+fails == block-max-height-last-child-9a-dyn.html block-max-height-last-child-9-ref.html # Bug 616339
+== block-max-height-last-child-9b-dyn.html block-max-height-last-child-9-ref.html
+== block-max-height-last-child-9c-dyn.html block-max-height-last-child-9-ref.html
+# If a parent box's height is not 'auto' then its bottom margin
+# never collapses with its last-child's bottom margin,
+# as these margins are not considered 'adjoining'.
+# According to CSS 2.1 §10.7 (Minimum and maximum heights) this is true,
+# even if the value of min- or max-height is used instead.
+== block-fix-height-last-child-1a.html block-fix-height-last-child-1-ref.html
+== block-fix-height-last-child-1b.html block-fix-height-last-child-1-ref.html
+== block-fix-height-last-child-2a.html block-fix-height-last-child-2-ref.html
+== block-fix-height-last-child-2b.html block-fix-height-last-child-2-ref.html
+== block-fix-height-last-child-3a.html block-fix-height-last-child-3-ref.html
+== block-fix-height-last-child-3b.html block-fix-height-last-child-3-ref.html
+== block-fix-height-last-child-4a.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4b.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4c.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4d.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4e.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4f.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4g.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4h.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-1a-dyn.html block-fix-height-last-child-1-ref.html
+== block-fix-height-last-child-1b-dyn.html block-fix-height-last-child-1-ref.html
+== block-fix-height-last-child-2a-dyn.html block-fix-height-last-child-2-ref.html
+== block-fix-height-last-child-2b-dyn.html block-fix-height-last-child-2-ref.html
+== block-fix-height-last-child-3a-dyn.html block-fix-height-last-child-3-ref.html
+== block-fix-height-last-child-3b-dyn.html block-fix-height-last-child-3-ref.html
+== block-fix-height-last-child-4a-dyn.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4b-dyn.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4c-dyn.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4d-dyn.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4e-dyn.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4f-dyn.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4g-dyn.html block-fix-height-last-child-4-ref.html
+== block-fix-height-last-child-4h-dyn.html block-fix-height-last-child-4-ref.html
+# "Two margins are adjoining if and only if:" [...]
+# "both belong to vertically-adjacent box edges,
+# i.e. form one of the following pairs:" [...]
+# "top and bottom margins of a box that does not establish a new block
+# formatting context and that has zero computed 'min-height', zero or
+# 'auto' computed 'height', and no in-flow children"
+# Note that "if the top and bottom margins of a box are adjoining, then it is
+# possible for margins to collapse through it."
+# I.e. a parent's top and bottom margin are still considered adjoining if
+# they collapse through their in-flow children's margins.
+== block-no-content-1a.html block-no-content-1-ref.html
+== block-no-content-1b.html block-no-content-1-ref.html
+== block-no-content-1c.html block-no-content-1-ref.html
+== block-no-content-1d.html block-no-content-1-ref.html
+== block-no-content-2a.html block-no-content-2-ref.html
+== block-no-content-2b.html block-no-content-2-ref.html
+== block-no-content-2c.html block-no-content-2-ref.html
+== block-no-content-2d.html block-no-content-2-ref.html
+== block-no-content-2e.html block-no-content-2-ref.html
+== block-no-content-3a.html block-no-content-3-ref.html
+== block-no-content-3b.html block-no-content-3-ref.html
+== block-no-content-3c.html block-no-content-3-ref.html
+== block-no-content-4a.html block-no-content-4-ref.html
+== block-no-content-4b.html block-no-content-4-ref.html
+== block-no-content-4c.html block-no-content-4-ref.html
+== block-no-content-5a.html block-no-content-5-ref.html
+== block-no-content-5b.html block-no-content-5-ref.html
+== block-no-content-6.html block-no-content-6-ref.html
+== block-no-content-7.html block-no-content-7-ref.html
+# "If the top margin of a box with non-zero computed 'min-height' and 'auto'
+# computed 'height' collapses with the bottom margin of its last in-flow
+# child, then the child's bottom margin does not collapse with the parent's
+# bottom margin."
+== block-no-content-8.html block-no-content-8-ref.html
+== block-no-content-1a-dyn.html block-no-content-1-ref.html
+== block-no-content-1b-dyn.html block-no-content-1-ref.html
+== block-no-content-1c-dyn.html block-no-content-1-ref.html
+== block-no-content-1d-dyn.html block-no-content-1-ref.html
+== block-no-content-2a-dyn.html block-no-content-2-ref.html
+== block-no-content-2b-dyn.html block-no-content-2-ref.html
+== block-no-content-2c-dyn.html block-no-content-2-ref.html
+== block-no-content-2d-dyn.html block-no-content-2-ref.html
+== block-no-content-2e-dyn.html block-no-content-2-ref.html
+== block-no-content-3a-dyn.html block-no-content-3-ref.html
+== block-no-content-3b-dyn.html block-no-content-3-ref.html
+== block-no-content-3c-dyn.html block-no-content-3-ref.html
+== block-no-content-4a-dyn.html block-no-content-4-ref.html
+== block-no-content-4b-dyn.html block-no-content-4-ref.html
+== block-no-content-4c-dyn.html block-no-content-4-ref.html
+== block-no-content-5a-dyn.html block-no-content-5-ref.html
+== block-no-content-5b-dyn.html block-no-content-5-ref.html
+== block-no-content-6-dyn.html block-no-content-6-ref.html
+== block-no-content-7-dyn.html block-no-content-7-ref.html
+== block-no-content-8-dyn.html block-no-content-8-ref.html
+# These tests are similar to the no-content ones, except that some boxes
+# have height: 0; declared on them.
+== block-zero-height-1a.html block-zero-height-1a-ref.html
+== block-zero-height-1b.html block-zero-height-1b-ref.html
+== block-zero-height-2a.html block-zero-height-2a-ref.html
+== block-zero-height-2b.html block-zero-height-2b-ref.html
+== block-zero-height-2c.html block-zero-height-2c-ref.html
+== block-zero-height-3a.html block-zero-height-3-ref.html
+== block-zero-height-3b.html block-zero-height-3-ref.html
+== block-zero-height-3c.html block-zero-height-3-ref.html
+# "Margins of elements that establish new block formatting contexts ([...])
+# do not collapse with their in-flow children."
+# The margins of a block formatting context can collapse with margins of
+# in-flow sibling boxes, but not with margins of their in-flow children.
+# Elements that establish a block formatting context are:
+# * "elements with 'overflow' other than 'visible'"
+== block-overflow-1.html block-overflow-1-ref.html
+== block-overflow-1.html block-overflow-1-ref2.html
+== block-overflow-2.html block-overflow-2-ref.html
+== block-overflow-2.html block-overflow-2-ref2.html
+== block-overflow-3.html block-overflow-3-ref.html
+== block-overflow-3.html block-overflow-3-ref2.html
+== block-overflow-4.html block-overflow-4-ref.html
+== block-overflow-4.html block-overflow-4-ref2.html
+== block-overflow-5a.html block-overflow-5-ref.html
+== block-overflow-5a.html block-overflow-5-ref2.html
+== block-overflow-5b.html block-overflow-5-ref.html
+== block-overflow-5b.html block-overflow-5-ref2.html
+== block-overflow-5c.html block-overflow-5c-ref.html
+== block-overflow-5c.html block-overflow-5c-ref2.html
+== block-overflow-5d.html block-overflow-5-ref.html
+== block-overflow-5d.html block-overflow-5-ref2.html
+== block-overflow-1-dyn.html block-overflow-1-ref2.html
+== block-overflow-2-dyn.html block-overflow-2-ref2.html
+== block-overflow-3-dyn.html block-overflow-3-ref2.html
+== block-overflow-4-dyn.html block-overflow-4-ref2.html
+== block-overflow-5a-dyn.html block-overflow-5-ref2.html
+== block-overflow-5b-dyn.html block-overflow-5-ref2.html
+fuzzy-if(winWidget,0-4,0-36) == block-overflow-5c-dyn.html block-overflow-5c-ref2.html
+== block-overflow-5d-dyn.html block-overflow-5-ref2.html
+# * 'fieldset' elements, per HTML5 (Candidate Recommendation 6 August 2013):
+# §10.3.13 (The fieldset and legend elements): "The fieldset element is
+# expected to establish a new block formatting context."
+== fieldset-sibling-1a.html fieldset-sibling-1-ref.html
+== fieldset-sibling-1b.html fieldset-sibling-1-ref.html
+== fieldset-sibling-1c.html fieldset-sibling-1-ref.html
+== fieldset-sibling-2a.html fieldset-sibling-2-ref1.html
+== fieldset-sibling-2b.html fieldset-sibling-2-ref1.html
+== fieldset-sibling-2c.html fieldset-sibling-2-ref1.html
+== fieldset-sibling-2a.html fieldset-sibling-2-ref2.html
+== fieldset-sibling-2b.html fieldset-sibling-2-ref2.html
+== fieldset-sibling-2c.html fieldset-sibling-2-ref2.html
+== fieldset-sibling-1a-dyn.html fieldset-sibling-1-ref.html
+== fieldset-sibling-1b-dyn.html fieldset-sibling-1-ref.html
+== fieldset-sibling-1c-dyn.html fieldset-sibling-1-ref.html
+== fieldset-sibling-2a-dyn.html fieldset-sibling-2-ref2.html
+== fieldset-sibling-2b-dyn.html fieldset-sibling-2-ref2.html
+== fieldset-sibling-2c-dyn.html fieldset-sibling-2-ref2.html
+== fieldset-child-1.html fieldset-child-1-ref.html
+== fieldset-child-1-dyn.html fieldset-child-1-ref.html
+# * Tables, per CSS 2.1 §17.4 (Tables in the visual formatting model):
+# "The table wrapper box establishes a block formatting context."
+# "The table wrapper box is a 'block' box if the table is block-level [...]"
+== table-sibling-1a.html table-sibling-1-ref.html
+!= table-sibling-1a.html table-sibling-1-noref.html
+== table-sibling-1b.html table-sibling-1-ref.html
+!= table-sibling-1b.html table-sibling-1-noref.html
+== table-sibling-1c.html table-sibling-1-ref.html
+!= table-sibling-1c.html table-sibling-1-noref2.html
+== table-sibling-2a.html table-sibling-2-ref.html
+!= table-sibling-2a.html table-sibling-2-noref.html
+== table-sibling-2b.html table-sibling-2-ref.html
+!= table-sibling-2b.html table-sibling-2-noref.html
+== table-sibling-2c.html table-sibling-2-ref.html
+!= table-sibling-2c.html table-sibling-2-noref2.html
+== table-sibling-1a-dyn.html table-sibling-1-ref.html
+!= table-sibling-1a-dyn.html table-sibling-1-noref.html
+== table-sibling-1b-dyn.html table-sibling-1-ref.html
+!= table-sibling-1b-dyn.html table-sibling-1-noref.html
+== table-sibling-1c-dyn.html table-sibling-1-ref.html
+!= table-sibling-1c-dyn.html table-sibling-1-noref2.html
+== table-sibling-2a-dyn.html table-sibling-2-ref.html
+!= table-sibling-2a-dyn.html table-sibling-2-noref.html
+== table-sibling-2b-dyn.html table-sibling-2-ref.html
+!= table-sibling-2b-dyn.html table-sibling-2-noref.html
+== table-sibling-2c-dyn.html table-sibling-2-ref.html
+!= table-sibling-2c-dyn.html table-sibling-2-noref2.html
+== table-sibling-3-dyn.html table-sibling-3-ref.html
+!= table-sibling-3-dyn.html table-sibling-3-noref.html
+# * table-caption boxes, per CSS 2.1 §9.4.1 (Block formatting contexts):
+# "[...] block containers (such as [...] table-captions) [...]
+# establish new block formatting contexts for their contents."
+# The margins of a table-caption do not collapse with the margins
+# of the table wrapper box. They can collapse with the margins of other
+# table-captions, though, if they share the same caption-side.
+== table-caption-1a.html table-caption-1-ref.html
+== table-caption-1b.html table-caption-1-ref.html
+== table-caption-1c.html table-caption-1-ref.html
+== table-caption-2a.html table-caption-2-ref.html
+== table-caption-2b.html table-caption-2-ref.html
+== table-caption-2c.html table-caption-2-ref.html
+== table-caption-1a-dyn.html table-caption-1-ref.html
+== table-caption-1b-dyn.html table-caption-1-ref.html
+== table-caption-1c-dyn.html table-caption-1-ref.html
+== table-caption-2a-dyn.html table-caption-2-ref.html
+== table-caption-2b-dyn.html table-caption-2-ref.html
+== table-caption-2c-dyn.html table-caption-2-ref.html
+== table-caption-top-1.html table-caption-top-1-ref.html
+== table-caption-top-2.html table-caption-top-2-ref.html
+== table-caption-bottom-1.html table-caption-bottom-1-ref.html
+== table-caption-bottom-2.html table-caption-bottom-2-ref.html
+== table-caption-top-1-dyn.html table-caption-top-1-ref.html
+== table-caption-top-2-dyn.html table-caption-top-1-ref.html
+== table-caption-bottom-1-dyn.html table-caption-bottom-1-ref.html
+== table-caption-bottom-2-dyn.html table-caption-bottom-1-ref.html
+fails == caption-sibling-1a.html caption-sibling-1-ref.html # Bug 144517
+!= caption-sibling-1a.html caption-sibling-1-noref.html
+fails == caption-sibling-1b.html caption-sibling-1-ref.html # Bug 144517
+!= caption-sibling-1b.html caption-sibling-1-noref.html
+fails == caption-sibling-1c.html caption-sibling-1-ref.html # Bug 144517
+!= caption-sibling-1c.html caption-sibling-1-noref2.html
+fails == caption-sibling-1a-dyn.html caption-sibling-1-ref.html # Bug 144517
+!= caption-sibling-1a-dyn.html caption-sibling-1-noref.html
+fails == caption-sibling-1b-dyn.html caption-sibling-1-ref.html # Bug 144517
+!= caption-sibling-1b-dyn.html caption-sibling-1-noref.html
+fails == caption-sibling-1c-dyn.html caption-sibling-1-ref.html # Bug 144517
+!= caption-sibling-1c-dyn.html caption-sibling-1-noref2.html
+fails == caption-sibling-2-dyn.html caption-sibling-2-ref.html # Bug 144517
+!= caption-sibling-2-dyn.html caption-sibling-2-noref.html
+== caption-child-1.html caption-child-1-ref.html
+== caption-child-1-dyn.html caption-child-1-ref.html
+# * Multi-column elements, per CSS Multi-column Layout Module
+# (Candidate Recommendation 12 April 2011):
+# "A multi-column element establishes a new block formatting context [...]"
+== column-sibling-1a.html column-sibling-1-ref.html
+== column-sibling-1b.html column-sibling-1-ref.html
+== column-sibling-1c.html column-sibling-1-ref.html
+== column-sibling-1a-dyn.html column-sibling-1-ref.html
+== column-sibling-1b-dyn.html column-sibling-1-ref.html
+== column-sibling-1c-dyn.html column-sibling-1-ref.html
+== column-sibling-2a.html column-sibling-2-ref.html
+== column-sibling-2b.html column-sibling-2-ref.html
+== column-sibling-2c.html column-sibling-2-ref.html
+== column-sibling-2a-dyn.html column-sibling-2-ref.html
+== column-sibling-2b-dyn.html column-sibling-2-ref.html
+== column-sibling-2c-dyn.html column-sibling-2-ref.html
+== column-child-1.html column-child-1-ref.html
+== column-child-1-dyn.html column-child-1-ref.html
+# * inline-block boxes
+# "Margins of inline-block boxes do not collapse
+# (not even with their in-flow children)."
+== inline-block-sibling-1a.html inline-block-sibling-1-ref.html
+== inline-block-sibling-1b.html inline-block-sibling-1-ref.html
+== inline-block-sibling-1c.html inline-block-sibling-1-ref.html
+== inline-block-sibling-2.html inline-block-sibling-2-ref.html
+!= inline-block-sibling-2.html inline-block-sibling-2-noref.html
+== inline-block-sibling-1a-dyn.html inline-block-sibling-1-ref.html
+== inline-block-sibling-1b-dyn.html inline-block-sibling-1-ref.html
+== inline-block-sibling-1c-dyn.html inline-block-sibling-1-ref.html
+== inline-block-sibling-2-dyn.html inline-block-sibling-2-ref.html
+== inline-block-child-1.html inline-block-child-1-ref.html
+== inline-block-child-2.html inline-block-child-2-ref.html
+!= inline-block-child-2.html inline-block-child-2-noref.html
+== inline-block-child-3.html inline-block-child-3-ref.html
+== inline-block-child-1-dyn.html inline-block-child-1-ref.html
+== inline-block-child-2-dyn.html inline-block-child-2-ref.html
+== inline-block-child-3-dyn.html inline-block-child-3-ref.html
+# * absolutely positioned elements
+# "Margins of absolutely positioned boxes do not collapse
+# (not even with their in-flow children)."
+== block-abs-pos-1.html block-abs-pos-1-ref.html
+== block-abs-pos-2.html block-abs-pos-2-ref.html
+== block-abs-pos-2.html block-abs-pos-2-ref2.html
+== block-abs-pos-1-dyn.html block-abs-pos-1-ref.html
+== block-abs-pos-2-dyn.html block-abs-pos-2-ref2.html
+# * Floats
+# "Margins between a floated box and any other box do not collapse
+# (not even between a float and its in-flow children)."
+== block-float-1a.html block-float-1a-ref.html
+== block-float-1a.html block-float-1a-ref2.html
+!= block-float-1a.html block-float-1a-noref.html
+== block-float-1b.html block-float-1b-ref.html
+== block-float-1b.html block-float-1b-ref2.html
+!= block-float-1b.html block-float-1b-noref.html
+== block-float-2a.html block-float-2a-ref.html
+!= block-float-2a.html block-float-2a-noref.html
+== block-float-2b.html block-float-2b-ref.html
+!= block-float-2b.html block-float-2b-noref.html
+== block-float-3a.html block-float-3a-ref.html
+== block-float-3b.html block-float-3b-ref.html
+== block-float-1a-dyn.html block-float-1a-ref.html
+== block-float-1b-dyn.html block-float-1b-ref.html
+== block-float-2a-dyn.html block-float-2a-ref.html
+== block-float-2b-dyn.html block-float-2b-ref.html
+== block-float-3a-dyn.html block-float-3a-ref.html
+== block-float-3b-dyn.html block-float-3b-ref.html
+# Tests for various cases where clearance is applied and collapsing is
+# prevented or only allows for certain margins.
+== block-clear-1a.html block-clear-1a-ref.html
+== block-clear-1b.html block-clear-1b-ref.html
+== block-clear-2.html block-clear-2-ref.html
+!= block-clear-2.html block-clear-2-noref.html
+== block-clear-3a.html block-clear-3-ref-left.html
+== block-clear-3b.html block-clear-3-ref-right.html
+== block-clear-3c.html block-clear-3-ref-left.html
+== block-clear-3d.html block-clear-3-ref-right.html
+== block-clear-3e.html block-clear-3-ref-left.html
+== block-clear-3f.html block-clear-3-ref-right.html
+== block-clear-4a.html block-clear-4-ref-left.html
+== block-clear-4b.html block-clear-4-ref-left.html
+== block-clear-4c.html block-clear-4-ref-left.html
+== block-clear-4d.html block-clear-4-ref-right.html
+== block-clear-4e.html block-clear-4-ref-right.html
+== block-clear-4f.html block-clear-4-ref-right.html
+== block-clear-5a.html block-clear-5-left-ref.html
+== block-clear-5b.html block-clear-5-left-ref.html
+== block-clear-5c.html block-clear-5-left-ref.html
+== block-clear-5d.html block-clear-5-left-ref.html
+== block-clear-5e.html block-clear-5-right-ref.html
+== block-clear-5f.html block-clear-5-right-ref.html
+== block-clear-5g.html block-clear-5-right-ref.html
+== block-clear-5h.html block-clear-5-right-ref.html
+fails == block-clear-6a-left.html block-clear-6abc-left-ref.html # Bug 493380
+== block-clear-6b-left.html block-clear-6abc-left-ref.html
+== block-clear-6c-left.html block-clear-6abc-left-ref.html
+fails == block-clear-6d-left.html block-clear-6def-left-ref1.html # Bug 493380
+fails == block-clear-6d-left.html block-clear-6def-left-ref2.html # Bug 493380
+== block-clear-6e-left.html block-clear-6def-left-ref1.html
+== block-clear-6e-left.html block-clear-6def-left-ref2.html
+== block-clear-6f-left.html block-clear-6def-left-ref1.html
+== block-clear-6f-left.html block-clear-6def-left-ref2.html
+fails == block-clear-7a-left.html block-clear-7abcd-left-ref.html # Bug 493380
+fails == block-clear-7b-left.html block-clear-7abcd-left-ref.html # Bug 493380
+fails == block-clear-7c-left.html block-clear-7abcd-left-ref.html # Bug 493380
+== block-clear-7d-left.html block-clear-7abcd-left-ref.html
+fails == block-clear-7e-left.html block-clear-7efgh-left-ref1.html # Bug 493380
+fails == block-clear-7e-left.html block-clear-7efgh-left-ref2.html # Bug 493380
+fails == block-clear-7f-left.html block-clear-7efgh-left-ref1.html # Bug 493380
+fails == block-clear-7f-left.html block-clear-7efgh-left-ref2.html # Bug 493380
+fails == block-clear-7g-left.html block-clear-7efgh-left-ref1.html # Bug 493380
+fails == block-clear-7g-left.html block-clear-7efgh-left-ref2.html # Bug 493380
+== block-clear-7h-left.html block-clear-7efgh-left-ref1.html
+== block-clear-7h-left.html block-clear-7efgh-left-ref2.html
+# "Margins of the root element's box do not collapse."
+# Testing the root margins of a generic XML document.
+== block-xml-root-1.xml block-xml-root-1-ref.xml
+# In XML and XHTML, the html element is not necessarily the root element of
+# a document. In that case, the margins of the html element collapse
+# like the margins of any other block boxes.
+== block-xhtml-root-1a.xhtml block-xhtml-root-1-ref.xhtml
+== block-xhtml-root-1b.xhtml block-xhtml-root-1-ref.xhtml
+== block-xhtml-root-2.xhtml block-xhtml-root-2-ref.xhtml
+== block-xhtml-root-3.xhtml block-xhtml-root-3-ref.xhtml
+# When the html element is the root element of the document, its margins
+# do not collapse.
+== block-xhtml-html-1a.xhtml block-xhtml-html-1-ref.xhtml
+== block-xhtml-html-1b.xhtml block-xhtml-html-1-ref.xhtml
+== block-xhtml-html-2.xhtml block-xhtml-html-2-ref.xhtml
+== block-xhtml-html-3.xhtml block-xhtml-html-3-ref.xhtml
+== block-xhtml-html-1a-dyn.xhtml block-xhtml-html-1-ref.xhtml
+== block-xhtml-html-1b-dyn.xhtml block-xhtml-html-1-ref.xhtml
+== block-xhtml-html-2-dyn.xhtml block-xhtml-html-2-ref.xhtml
+== block-xhtml-html-3-dyn.xhtml block-xhtml-html-3-ref.xhtml
+# In HTML documents only the html element can be the root element.
+# Its margins do not collapse.
+== block-html-html-1a.html block-html-html-1-ref.html
+== block-html-html-1b.html block-html-html-1-ref.html
+== block-html-html-2.html block-html-html-2-ref.html
+== block-html-html-3.html block-html-html-3-ref.html
+== block-html-html-1a-dyn.html block-html-html-1-ref.html
+== block-html-html-1b-dyn.html block-html-html-1-ref.html
+== block-html-html-2-dyn.html block-html-html-2-ref.html
+== block-html-html-3-dyn.html block-html-html-3-ref.html
+# These are older tests that check whether margins on the root element collapse.
+== block-root-1a.html block-root-1a-ref.html
+== block-root-1a.html block-root-1a-ref2.html
+!= block-root-1a.html block-root-1a-noref1.html
+!= block-root-1a.html block-root-1a-noref2.html
+== block-root-1b.html block-root-1b-ref.html
+== block-root-1b.html block-root-1b-ref2.html
+== block-html-body-1.html block-html-body-1-ref.html
+== block-html-body-1.html block-html-body-1-ref2.html
+!= block-html-body-1.html block-html-body-1-noref.html
+# Some basic tests for margins given in percent and em.
+== block-percent-1.html block-percent-1-ref.html
+== block-percent-1-dyn.html block-percent-1-ref.html
+== block-percent-2.html block-percent-2-ref.html
+== block-percent-2-dyn.html block-percent-2-ref.html
+== block-em-length-1.html block-em-length-1-ref.html
+== block-em-length-1-dyn.html block-em-length-1-ref.html
+# Other tests.
+== dynamic-add-text-1.html dynamic-add-text-1-ref.html # Bug 467321
+== scrollable-vertical-margin.html scrollable-vertical-margin-ref.html
+== scrollable-horizontal-margin.html scrollable-horizontal-margin-ref.html
diff --git a/layout/reftests/margin-collapsing/scrollable-horizontal-margin-ref.html b/layout/reftests/margin-collapsing/scrollable-horizontal-margin-ref.html
new file mode 100644
index 0000000000..358c1f2bbc
--- /dev/null
+++ b/layout/reftests/margin-collapsing/scrollable-horizontal-margin-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>Testcase for bug 724352</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+x1,x2,x3,x4,x5,x6 { display:block; }
+x2 { overflow:auto; width:100px; background:grey; }
+x4 { width: 70px; }
+x3 { width: 70px; padding-left: 20px; padding-right: 10px; }
+ </style>
+</head>
+<body>
+
+<x1><x2 style="height:50px;">
+ <x3><x4 style="height:20px; background:lime; "></x4></x3>
+</x2></x1>
+
+
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/scrollable-horizontal-margin.html b/layout/reftests/margin-collapsing/scrollable-horizontal-margin.html
new file mode 100644
index 0000000000..5616b36fca
--- /dev/null
+++ b/layout/reftests/margin-collapsing/scrollable-horizontal-margin.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>Testcase for bug 724352</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+x1,x2,x3,x4,x5,x6 { display:block; }
+x2 { overflow:auto; width:100px; background:grey; }
+x4 { width: 70px; margin: 0 20px; }
+ </style>
+</head>
+<body>
+
+<x1><x2 style="height:50px;">
+ <x4 style="height:20px; background:lime; "></x4>
+</x2></x1>
+
+
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/scrollable-vertical-margin-ref.html b/layout/reftests/margin-collapsing/scrollable-vertical-margin-ref.html
new file mode 100644
index 0000000000..280f975335
--- /dev/null
+++ b/layout/reftests/margin-collapsing/scrollable-vertical-margin-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>Testcase for bug 724352</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+x1,x2,x3,x4,x5,x6 { display:block; }
+x7 {display:block; height:20px;background:lime;}
+ </style>
+</head>
+<body>
+
+<x1><x2 style="overflow:auto; background:grey; height:50px;">
+ <x3><x4 style="padding:20px 0 10px 0; height:20px;"><x7></x7></x4></x3>
+</x2>
+<x6 style="padding-top:10px">x</x6></x1>
+
+
+
+<x1><x2 style="overflow:auto; background:grey; height:70px;">
+ <x3 style="padding-bottom:30px"><x4 style="padding-top:20px; height:20px;"><x7></x7></x4></x3>
+</x2>
+<x6 style="padding-top:10px">x</x6></x1>
+
+
+
+<x1><x2 style="overflow:auto; background:grey; height:60px;">
+ <x3 style="padding-bottom:10px"><x4 style="padding-top:20px; height:20px;"><x7></x7></x4></x3>
+</x2>
+<x6 style="padding-top:10px">x</x6></x1>
+
+
+
+<x1><x2 style="overflow:auto; background:grey; height:50px;">
+ <x3 style="padding-bottom:10px"><x4 style="padding-top:20px; height:20px;"><x7></x7></x4></x3>
+</x2>
+<x6 style="padding-top:10px">x</x6></x1>
+
+
+
+<x1><x2 style="overflow:auto; background:grey; height:60px;">
+ <x3><x4 style="padding:20px 0; height:20px;"><x7></x7></x4></x3>
+</x2>
+<x6 style="padding-top:10px">x</x6></x1>
+
+
+
+<x1><x2 style="overflow:auto; background:grey; height:60px;">
+ <x3><x4 style="padding:20px 0; height:20px;"><x7></x7></x4></x3>
+</x2>
+<x6 style="padding-top:10px">x</x6></x1>
+
+
+
+<x1><x2 style="overflow:auto; background:grey; height:50px;">
+ <x3><x4 style="padding:10px 0 20px 0; height:20px;"><x7></x7></x4></x3>
+</x2>
+<x6 style="padding-top:10px">x</x6></x1>
+
+
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/scrollable-vertical-margin.html b/layout/reftests/margin-collapsing/scrollable-vertical-margin.html
new file mode 100644
index 0000000000..d752417a3b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/scrollable-vertical-margin.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>Testcase for bug 724352</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+x1,x2,x3,x4,x5,x6 { display:block; }
+ </style>
+</head>
+<body>
+
+<x1><x2 style="overflow:auto; background:grey; height:50px;">
+ <x3 style="margin-bottom:-10px"><x4 style="margin:20px 0; height:20px; background:lime; "></x4></x3>
+</x2>
+<x6 style="margin-top:10px">x</x6></x1>
+
+
+
+<x1><x2 style="overflow:auto; background:grey; height:70px;">
+ <x3 style="margin-bottom:30px"><x4 style="margin:20px 0; height:20px; background:lime; "></x4></x3>
+</x2>
+<x6 style="margin-top:10px">x</x6></x1>
+
+
+
+<x1><x2 style="overflow:auto; background:grey; height:60px;">
+ <x3 style="margin-bottom:10px"><x4 style="margin:20px 0; height:20px; background:lime; "></x4></x3>
+</x2>
+<x6 style="margin-top:10px">x</x6></x1>
+
+
+
+<x1><x2 style="overflow:auto; background:grey; height:50px;">
+ <x3 style="margin-bottom:20px"><x4 style="margin:20px 0 -10px 0; height:20px; background:lime; "></x4></x3>
+</x2>
+<x6 style="margin-top:10px">x</x6></x1>
+
+
+
+<x1><x2 style="overflow:auto; background:grey; height:60px;">
+ <x3 style="margin-bottom:20px"><x4 style="margin:20px 0; height:20px; background:lime; "></x4></x3>
+</x2>
+<x6 style="margin-top:10px">x</x6></x1>
+
+
+
+<x1><x2 style="overflow:auto; background:grey; height:60px;">
+ <x3 style="margin-top:20px"><x4 style="margin:20px 0; height:20px; background:lime; "></x4></x3>
+</x2>
+<x6 style="margin-top:10px">x</x6></x1>
+
+
+
+<x1><x2 style="overflow:auto; background:grey; height:50px;">
+ <x3 style="margin-top:-10px"><x4 style="margin:20px 0; height:20px; background:lime; "></x4></x3>
+</x2>
+<x6 style="margin-top:10px">x</x6></x1>
+
+
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-1-ref.html b/layout/reftests/margin-collapsing/table-caption-1-ref.html
new file mode 100644
index 0000000000..0b98396d10
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-1-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ width: 100px;
+ margin-right: auto;
+}
+#caption {
+ height: 20px;
+ background-color: blue;
+}
+.spacer {
+ height: 30px;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div class="spacer"></div>
+<div id="table">
+ <div id="caption"></div>
+</div>
+<div class="spacer"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-1a-dyn.html b/layout/reftests/margin-collapsing/table-caption-1a-dyn.html
new file mode 100644
index 0000000000..a046d4d11e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-1a-dyn.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: green;
+}
+#block1 {
+ margin-bottom: 10px;
+}
+#table {
+ display: table;
+ width: 100px;
+}
+#caption {
+ display: table-cell;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#block2 {
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table">
+ <div id="caption"></div>
+</div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-1a.html b/layout/reftests/margin-collapsing/table-caption-1a.html
new file mode 100644
index 0000000000..b03965a6ea
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-1a.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: green;
+}
+#block1 {
+ margin-bottom: 10px;
+}
+#table {
+ display: table;
+ width: 100px;
+}
+#caption {
+ display: table-caption;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#block2 {
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table">
+ <div id="caption"></div>
+</div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-1b-dyn.html b/layout/reftests/margin-collapsing/table-caption-1b-dyn.html
new file mode 100644
index 0000000000..d1f67398d0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-1b-dyn.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: green;
+}
+#block1 {
+ margin-bottom: 20px;
+}
+#table {
+ display: table;
+ width: 100px;
+}
+#caption {
+ display: table-cell;
+ height: 20px;
+ margin: 10px 0;
+ background-color: blue;
+}
+#block2 {
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table">
+ <div id="caption"></div>
+</div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-1b.html b/layout/reftests/margin-collapsing/table-caption-1b.html
new file mode 100644
index 0000000000..20cc93bec6
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-1b.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: green;
+}
+#block1 {
+ margin-bottom: 20px;
+}
+#table {
+ display: table;
+ width: 100px;
+}
+#caption {
+ display: table-caption;
+ height: 20px;
+ margin: 10px 0;
+ background-color: blue;
+}
+#block2 {
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table">
+ <div id="caption"></div>
+</div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-1c-dyn.html b/layout/reftests/margin-collapsing/table-caption-1c-dyn.html
new file mode 100644
index 0000000000..04a5fdc322
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-1c-dyn.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: green;
+}
+#block1 {
+ margin-bottom: 15px;
+}
+#table {
+ display: table;
+ width: 100px;
+}
+#caption {
+ display: table-cell;
+ height: 20px;
+ margin: 15px 0;
+ background-color: blue;
+}
+#block2 {
+ margin-top: 15px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table">
+ <div id="caption"></div>
+</div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-1c.html b/layout/reftests/margin-collapsing/table-caption-1c.html
new file mode 100644
index 0000000000..b7956a130b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-1c.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: green;
+}
+#block1 {
+ margin-bottom: 15px;
+}
+#table {
+ display: table;
+ width: 100px;
+}
+#caption {
+ display: table-caption;
+ height: 20px;
+ margin: 15px 0;
+ background-color: blue;
+}
+#block2 {
+ margin-top: 15px;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table">
+ <div id="caption"></div>
+</div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-2-ref.html b/layout/reftests/margin-collapsing/table-caption-2-ref.html
new file mode 100644
index 0000000000..dbb6e7ec53
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-2-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ margin-bottom: 30px;
+ background-color: green;
+}
+#caption {
+ width: 100px;
+ height: 20px;
+ margin-bottom: 30px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div>
+ <div id="caption"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-2a-dyn.html b/layout/reftests/margin-collapsing/table-caption-2a-dyn.html
new file mode 100644
index 0000000000..18651e4ff9
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-2a-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ display: table;
+ width: 100px;
+ margin: 10px 0;
+}
+#caption {
+ display: table-cell;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="table">
+ <div id="caption"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-2a.html b/layout/reftests/margin-collapsing/table-caption-2a.html
new file mode 100644
index 0000000000..f8a71b9162
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-2a.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ display: table;
+ width: 100px;
+ margin: 10px 0;
+}
+#caption {
+ display: table-caption;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="table">
+ <div id="caption"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-2b-dyn.html b/layout/reftests/margin-collapsing/table-caption-2b-dyn.html
new file mode 100644
index 0000000000..e3b470b192
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-2b-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ display: table;
+ width: 100px;
+ margin: 20px 0;
+}
+#caption {
+ display: table-cell;
+ height: 20px;
+ margin: 10px 0;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="table">
+ <div id="caption"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-2b.html b/layout/reftests/margin-collapsing/table-caption-2b.html
new file mode 100644
index 0000000000..4d2cc46ced
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-2b.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ display: table;
+ width: 100px;
+ margin: 20px 0;
+}
+#caption {
+ display: table-caption;
+ height: 20px;
+ margin: 10px 0;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="table">
+ <div id="caption"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-2c-dyn.html b/layout/reftests/margin-collapsing/table-caption-2c-dyn.html
new file mode 100644
index 0000000000..a5846a3862
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-2c-dyn.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ display: table;
+ width: 100px;
+ margin: 15px 0;
+}
+#caption {
+ display: table-cell;
+ height: 20px;
+ margin: 15px 0;
+ background-color: blue;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="separator"></div>
+<div id="table">
+ <div id="caption"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-2c.html b/layout/reftests/margin-collapsing/table-caption-2c.html
new file mode 100644
index 0000000000..43eb548429
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-2c.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.separator {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ display: table;
+ width: 100px;
+ margin: 15px 0;
+}
+#caption {
+ display: table-caption;
+ height: 20px;
+ margin: 15px 0;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div class="separator"></div>
+<div id="table">
+ <div id="caption"></div>
+</div>
+<div class="separator"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-bottom-1-dyn.html b/layout/reftests/margin-collapsing/table-caption-bottom-1-dyn.html
new file mode 100644
index 0000000000..549a529533
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-bottom-1-dyn.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: green;
+}
+#block1 {
+ margin-bottom: 10px;
+}
+#block2 {
+ margin-top: 10px;
+}
+#table {
+ display: table;
+}
+#caption {
+ display: table-cell;
+ caption-side: bottom;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#cell {
+ display: table-cell;
+ width: 100px;
+ height: 20px;
+ background-color: orange;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table">
+ <div id="caption"></div>
+ <div id="cell"></div>
+</div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-bottom-1-ref.html b/layout/reftests/margin-collapsing/table-caption-bottom-1-ref.html
new file mode 100644
index 0000000000..9f554fcdce
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-bottom-1-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.block {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ width: 100px;
+}
+#caption {
+ height: 20px;
+ background-color: blue;
+}
+#cell {
+ height: 20px;
+ background-color: orange;
+}
+#spacer1 {
+ height: 10px;
+}
+#spacer2 {
+ height: 20px;
+}
+#spacer3 {
+ height: 30px;
+}
+</style>
+</head>
+<body>
+<div class="block"></div>
+<div id="spacer1"></div>
+<div id="table">
+ <div id="cell"></div>
+ <div id="spacer2"></div>
+ <div id="caption"></div>
+</div>
+<div id="spacer3"></div>
+<div class="block"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-bottom-1.html b/layout/reftests/margin-collapsing/table-caption-bottom-1.html
new file mode 100644
index 0000000000..2bfa7c997d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-bottom-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: green;
+}
+#block1 {
+ margin-bottom: 10px;
+}
+#block2 {
+ margin-top: 10px;
+}
+#table {
+ display: table;
+}
+#caption {
+ display: table-caption;
+ caption-side: bottom;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#cell {
+ display: table-cell;
+ width: 100px;
+ height: 20px;
+ background-color: orange;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table">
+ <div id="caption"></div>
+ <div id="cell"></div>
+</div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-bottom-2-dyn.html b/layout/reftests/margin-collapsing/table-caption-bottom-2-dyn.html
new file mode 100644
index 0000000000..41b05c6c28
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-bottom-2-dyn.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.block {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ display: table;
+ margin: 10px 0;
+}
+#caption {
+ display: table-cell;
+ caption-side: bottom;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#cell {
+ display: table-cell;
+ width: 100px;
+ height: 20px;
+ background-color: orange;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="block"></div>
+<div id="table">
+ <div id="caption"></div>
+ <div id="cell"></div>
+</div>
+<div class="block"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-bottom-2-ref.html b/layout/reftests/margin-collapsing/table-caption-bottom-2-ref.html
new file mode 100644
index 0000000000..9f18a88910
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-bottom-2-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.block {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ margin-top: 10px;
+ width: 100px;
+}
+#cell {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: orange;
+}
+#caption {
+ height: 20px;
+ margin-bottom: 30px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div class="block"></div>
+<div id="table">
+ <div id="cell"></div>
+ <div id="caption"></div>
+</div>
+<div class="block"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-bottom-2.html b/layout/reftests/margin-collapsing/table-caption-bottom-2.html
new file mode 100644
index 0000000000..9b3880c0f2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-bottom-2.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.block {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ display: table;
+ margin: 10px 0;
+}
+#caption {
+ display: table-caption;
+ caption-side: bottom;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#cell {
+ display: table-cell;
+ width: 100px;
+ height: 20px;
+ background-color: orange;
+}
+</style>
+</head>
+<body>
+<div class="block"></div>
+<div id="table">
+ <div id="caption"></div>
+ <div id="cell"></div>
+</div>
+<div class="block"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-top-1-dyn.html b/layout/reftests/margin-collapsing/table-caption-top-1-dyn.html
new file mode 100644
index 0000000000..a6e17d090e
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-top-1-dyn.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: green;
+}
+#block1 {
+ margin-bottom: 10px;
+}
+#block2 {
+ margin-top: 10px;
+}
+#table {
+ display: table;
+}
+#caption {
+ display: table-cell;
+ caption-side: top;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#cell {
+ display: table-cell;
+ width: 100px;
+ height: 20px;
+ background-color: orange;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table">
+ <div id="caption"></div>
+ <div id="cell"></div>
+</div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-top-1-ref.html b/layout/reftests/margin-collapsing/table-caption-top-1-ref.html
new file mode 100644
index 0000000000..0c622dfe90
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-top-1-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.block {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ width: 100px;
+}
+#caption {
+ height: 20px;
+ background-color: blue;
+}
+#cell {
+ height: 20px;
+ background-color: orange;
+}
+#spacer1 {
+ height: 10px;
+}
+#spacer2 {
+ height: 20px;
+}
+#spacer3 {
+ height: 30px;
+}
+</style>
+</head>
+<body>
+<div class="block"></div>
+<div id="spacer3"></div>
+<div id="table">
+ <div id="caption"></div>
+<div id="spacer2"></div>
+ <div id="cell"></div>
+</div>
+<div id="spacer1"></div>
+<div class="block"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-top-1.html b/layout/reftests/margin-collapsing/table-caption-top-1.html
new file mode 100644
index 0000000000..55af9b4e52
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-top-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1, #block2 {
+ height: 20px;
+ background-color: green;
+}
+#block1 {
+ margin-bottom: 10px;
+}
+#block2 {
+ margin-top: 10px;
+}
+#table {
+ display: table;
+}
+#caption {
+ display: table-caption;
+ caption-side: top;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#cell {
+ display: table-cell;
+ width: 100px;
+ height: 20px;
+ background-color: orange;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table">
+ <div id="caption"></div>
+ <div id="cell"></div>
+</div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-top-2-dyn.html b/layout/reftests/margin-collapsing/table-caption-top-2-dyn.html
new file mode 100644
index 0000000000..395d595c23
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-top-2-dyn.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+.block {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ display: table;
+ width: 100px;
+ margin: 10px 0;
+}
+#caption {
+ display: table-cell;
+ caption-side: top;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#cell {
+ display: table-cell;
+ height: 20px;
+ background-color: orange;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('caption').style.display = 'table-caption';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div class="block"></div>
+<div id="table">
+ <div id="caption"></div>
+ <div id="cell"></div>
+</div>
+<div class="block"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-top-2-ref.html b/layout/reftests/margin-collapsing/table-caption-top-2-ref.html
new file mode 100644
index 0000000000..f845aba141
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-top-2-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.block {
+ height: 20px;
+ background-color: green;
+ margin-bottom: 30px;
+}
+#table {
+ width: 100px;
+}
+#caption {
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: blue;
+}
+#cell {
+ height: 20px;
+ margin-bottom: 10px;
+ background-color: orange;
+}
+</style>
+</head>
+<body>
+<div class="block"></div>
+<div id="table">
+ <div id="caption"></div>
+ <div id="cell"></div>
+</div>
+<div class="block"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-caption-top-2.html b/layout/reftests/margin-collapsing/table-caption-top-2.html
new file mode 100644
index 0000000000..884c10687d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-caption-top-2.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.block {
+ height: 20px;
+ background-color: green;
+}
+#table {
+ display: table;
+ width: 100px;
+ margin: 10px 0;
+}
+#caption {
+ display: table-caption;
+ caption-side: top;
+ height: 20px;
+ margin: 20px 0;
+ background-color: blue;
+}
+#cell {
+ display: table-cell;
+ height: 20px;
+ background-color: orange;
+}
+</style>
+</head>
+<body>
+<div class="block"></div>
+<div id="table">
+ <div id="caption"></div>
+ <div id="cell"></div>
+</div>
+<div class="block"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-1-noref.html b/layout/reftests/margin-collapsing/table-sibling-1-noref.html
new file mode 100644
index 0000000000..c04fc069c2
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-1-noref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1 {
+ display: block;
+ height: 20px;
+ background-color: green;
+ margin-bottom: 30px;
+}
+#table {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-bottom: 30px;
+}
+#block2 {
+ display: block;
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-1-noref2.html b/layout/reftests/margin-collapsing/table-sibling-1-noref2.html
new file mode 100644
index 0000000000..256cae9f09
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-1-noref2.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1 {
+ display: block;
+ height: 20px;
+ background-color: green;
+ margin-bottom: 40px;
+}
+#table {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-bottom: 40px;
+}
+#block2 {
+ display: block;
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-1-ref.html b/layout/reftests/margin-collapsing/table-sibling-1-ref.html
new file mode 100644
index 0000000000..e12feb34fb
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1 {
+ display: block;
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#table {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-bottom: 20px;
+}
+#block2 {
+ display: block;
+ height: 20px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-1a-dyn.html b/layout/reftests/margin-collapsing/table-sibling-1a-dyn.html
new file mode 100644
index 0000000000..be2db0590b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-1a-dyn.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1 {
+ display: block;
+ height: 20px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#table {
+ display: none;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+#block2 {
+ display: block;
+ height: 20px;
+ background-color: blue;
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('table').style.display = 'table';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-1a.html b/layout/reftests/margin-collapsing/table-sibling-1a.html
new file mode 100644
index 0000000000..b7e76316ef
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-1a.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1 {
+ display: block;
+ height: 20px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#table {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+#block2 {
+ display: block;
+ height: 20px;
+ background-color: blue;
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-1b-dyn.html b/layout/reftests/margin-collapsing/table-sibling-1b-dyn.html
new file mode 100644
index 0000000000..e1666e28ba
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-1b-dyn.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1 {
+ display: block;
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#table {
+ display: none;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+#block2 {
+ display: block;
+ height: 20px;
+ background-color: blue;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('table').style.display = 'table';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-1b.html b/layout/reftests/margin-collapsing/table-sibling-1b.html
new file mode 100644
index 0000000000..46033bff63
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-1b.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1 {
+ display: block;
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#table {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+#block2 {
+ display: block;
+ height: 20px;
+ background-color: blue;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-1c-dyn.html b/layout/reftests/margin-collapsing/table-sibling-1c-dyn.html
new file mode 100644
index 0000000000..4fa52dfda3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-1c-dyn.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#block1 {
+ display: block;
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#table {
+ display: none;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+#block2 {
+ display: block;
+ height: 20px;
+ background-color: blue;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('table').style.display = 'table';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-1c.html b/layout/reftests/margin-collapsing/table-sibling-1c.html
new file mode 100644
index 0000000000..76c90a1aee
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-1c.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#block1 {
+ display: block;
+ height: 20px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#table {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+#block2 {
+ display: block;
+ height: 20px;
+ background-color: blue;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="block1"></div>
+<div id="table"></div>
+<div id="block2"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-2-noref.html b/layout/reftests/margin-collapsing/table-sibling-2-noref.html
new file mode 100644
index 0000000000..f0ffec8230
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-2-noref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#table1 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: green;
+ margin-bottom: 30px;
+}
+#table2 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-bottom: 30px;
+}
+#table3 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="table1"></div>
+<div id="table2"></div>
+<div id="table3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-2-noref2.html b/layout/reftests/margin-collapsing/table-sibling-2-noref2.html
new file mode 100644
index 0000000000..3d476c01de
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-2-noref2.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#table1 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: green;
+ margin-bottom: 40px;
+}
+#table2 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-bottom: 40px;
+}
+#table3 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="table1"></div>
+<div id="table2"></div>
+<div id="table3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-2-ref.html b/layout/reftests/margin-collapsing/table-sibling-2-ref.html
new file mode 100644
index 0000000000..f46d5b8dd3
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#table1 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#table2 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-bottom: 20px;
+}
+#table3 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="table1"></div>
+<div id="table2"></div>
+<div id="table3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-2a-dyn.html b/layout/reftests/margin-collapsing/table-sibling-2a-dyn.html
new file mode 100644
index 0000000000..dcfcb70ca0
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-2a-dyn.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#table1 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#table2 {
+ display: none;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+#table3 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: blue;
+ margin-top: 10px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('table2').style.display = 'table';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="table1"></div>
+<div id="table2"></div>
+<div id="table3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-2a.html b/layout/reftests/margin-collapsing/table-sibling-2a.html
new file mode 100644
index 0000000000..de97671351
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-2a.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#table1 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#table2 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+#table3 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: blue;
+ margin-top: 10px;
+}
+</style>
+</head>
+<body>
+<div id="table1"></div>
+<div id="table2"></div>
+<div id="table3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-2b-dyn.html b/layout/reftests/margin-collapsing/table-sibling-2b-dyn.html
new file mode 100644
index 0000000000..6007423a7b
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-2b-dyn.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#table1 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#table2 {
+ display: none;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+#table3 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: blue;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('table2').style.display = 'table';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="table1"></div>
+<div id="table2"></div>
+<div id="table3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-2b.html b/layout/reftests/margin-collapsing/table-sibling-2b.html
new file mode 100644
index 0000000000..20017bda1a
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-2b.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#table1 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#table2 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+#table3 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: blue;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="table1"></div>
+<div id="table2"></div>
+<div id="table3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-2c-dyn.html b/layout/reftests/margin-collapsing/table-sibling-2c-dyn.html
new file mode 100644
index 0000000000..0345a9f932
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-2c-dyn.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#table1 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#table2 {
+ display: none;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+#table3 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: blue;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('table2').style.display = 'table';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="table1"></div>
+<div id="table2"></div>
+<div id="table3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-2c.html b/layout/reftests/margin-collapsing/table-sibling-2c.html
new file mode 100644
index 0000000000..cb063c7063
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-2c.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#table1 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#table2 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+#table3 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: blue;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div id="table1"></div>
+<div id="table2"></div>
+<div id="table3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-3-dyn.html b/layout/reftests/margin-collapsing/table-sibling-3-dyn.html
new file mode 100644
index 0000000000..934a20fb2d
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-3-dyn.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style type="text/css">
+#table1 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: green;
+ margin-bottom: 10px;
+}
+#table2 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: red;
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+#table3 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: blue;
+ margin-top: 20px;
+}
+</style>
+<script type="text/javascript">
+function test() {
+ document.getElementById('table2').style.display = 'none';
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener('MozReftestInvalidate', test);
+</script>
+</head>
+<body>
+<div id="table1"></div>
+<div id="table2"></div>
+<div id="table3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-3-noref.html b/layout/reftests/margin-collapsing/table-sibling-3-noref.html
new file mode 100644
index 0000000000..69952b9024
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-3-noref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#table1 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: green;
+ margin-bottom: 30px;
+}
+#table3 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="table1"></div>
+<div id="table2"></div>
+<div id="table3"></div>
+</body>
+</html>
diff --git a/layout/reftests/margin-collapsing/table-sibling-3-ref.html b/layout/reftests/margin-collapsing/table-sibling-3-ref.html
new file mode 100644
index 0000000000..9b1dc0724f
--- /dev/null
+++ b/layout/reftests/margin-collapsing/table-sibling-3-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#table1 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: green;
+ margin-bottom: 20px;
+}
+#table3 {
+ display: table;
+ height: 20px; width: 100px;
+ background-color: blue;
+}
+</style>
+</head>
+<body>
+<div id="table1"></div>
+<div id="table2"></div>
+<div id="table3"></div>
+</body>
+</html>