diff options
Diffstat (limited to '')
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"> </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"> </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"> </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"> </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"> </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"> </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> |