diff options
Diffstat (limited to 'layout/reftests/abs-pos')
94 files changed, 3441 insertions, 0 deletions
diff --git a/layout/reftests/abs-pos/abs-pos-auto-margin-1-ref.html b/layout/reftests/abs-pos/abs-pos-auto-margin-1-ref.html new file mode 100644 index 0000000000..11a3ea5ee6 --- /dev/null +++ b/layout/reftests/abs-pos/abs-pos-auto-margin-1-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<title>'auto' top and bottom margins on absolutely positioned elements</title> +<style> + +body > div { + position: relative; + height: 100px; + border: medium solid; +} + +body > div > div { + position: absolute; + top: 0; + height: 40px; + width: 10px; + background: blue; +} + +</style> +<div> + <div style="left: 10px;top: 10px"></div> + <div style="left: 30px;top: 40px"></div> + <div style="left: 50px;top: 10px"></div> + <div style="left: 70px;top: 30px"></div> +</div> diff --git a/layout/reftests/abs-pos/abs-pos-auto-margin-1.html b/layout/reftests/abs-pos/abs-pos-auto-margin-1.html new file mode 100644 index 0000000000..86c5732344 --- /dev/null +++ b/layout/reftests/abs-pos/abs-pos-auto-margin-1.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<title>'auto' top and bottom margins on absolutely positioned elements</title> +<style> + +body > div { + position: relative; + height: 100px; + border: medium solid; +} + +body > div > div { + position: absolute; + top: 0; + bottom: 0; + height: 40px; + width: 10px; + background: blue; + margin-top: 10px; + margin-bottom: 20px; +} + +</style> +<div> + <div style="left: 10px;"></div> + <div style="left: 30px;margin-top: auto"></div> + <div style="left: 50px;margin-bottom: auto"></div> + <div style="left: 70px;margin-top: auto; margin-bottom: auto"></div> +</div> diff --git a/layout/reftests/abs-pos/abs-pos-auto-margin-centered-ref.html b/layout/reftests/abs-pos/abs-pos-auto-margin-centered-ref.html new file mode 100644 index 0000000000..169c4d37bf --- /dev/null +++ b/layout/reftests/abs-pos/abs-pos-auto-margin-centered-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<title> absolutely positioned element should be vertically centered even if the height is bigger than that of the containing block (reference) - bug 812899</title> +<style> +body > div { + font-size: 16px; + position: relative; + border: red solid; + margin-top: 5em; + width: 5em; + height: 5em; +} + +body > div > div { + position: absolute; + border: medium solid blue; + margin: -23px auto; + height: 150%; + width: 150%; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; +} +</style> + +<body> + <div> + <div></div> + </div> +</body> + +</html> diff --git a/layout/reftests/abs-pos/abs-pos-auto-margin-centered.html b/layout/reftests/abs-pos/abs-pos-auto-margin-centered.html new file mode 100644 index 0000000000..9ca4bdbe50 --- /dev/null +++ b/layout/reftests/abs-pos/abs-pos-auto-margin-centered.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<title> absolutely positioned element should be vertically centered even if the height is bigger than that of the containing block (reference) - bug 812899</title> +<style> +body > div { + font-size: 16px; + position: relative; + border: red solid; + margin-top: 5em; + width: 5em; + height: 5em; +} + +body > div > div { + position: absolute; + border: medium solid blue; + margin: auto auto; + height: 150%; + width: 150%; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; +} +</style> + +<body> + <div> + <div></div> + </div> +</body> + +</html> diff --git a/layout/reftests/abs-pos/auto-offset-inline-block-1-ref.html b/layout/reftests/abs-pos/auto-offset-inline-block-1-ref.html new file mode 100644 index 0000000000..d8ae9807cc --- /dev/null +++ b/layout/reftests/abs-pos/auto-offset-inline-block-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<title>'auto' offset properties on display:inline-block (reference)</title> +<style> +p { font-family: monospace /* avoid kerning */ } +</style> +<p>HelloWorld</p> diff --git a/layout/reftests/abs-pos/auto-offset-inline-block-1.html b/layout/reftests/abs-pos/auto-offset-inline-block-1.html new file mode 100644 index 0000000000..08a691ade3 --- /dev/null +++ b/layout/reftests/abs-pos/auto-offset-inline-block-1.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<title>'auto' offset properties on display:inline-block</title> +<style> +p { font-family: monospace /* avoid kerning */ } +span { + display: inline-block; + position: absolute; +} +</style> +<p>Hello<span>World</span></p> diff --git a/layout/reftests/abs-pos/button-1-ref.html b/layout/reftests/abs-pos/button-1-ref.html new file mode 100644 index 0000000000..a497de452f --- /dev/null +++ b/layout/reftests/abs-pos/button-1-ref.html @@ -0,0 +1,28 @@ +<!doctype html> +<html> +<head> +<style> +.outer { +position:relative; +left:0px; +top:0px; +width: +200px; +height:100px; +border:none; +background:#00ff00; +} +.inner { +position:absolute; +left:0px; +top:0px; +width:50px; +height:50px; +background:#ff0000; +} +</style> +</head> +<body> +<div class=outer><div class=inner></div></div> +</body> +</html> diff --git a/layout/reftests/abs-pos/button-1.html b/layout/reftests/abs-pos/button-1.html new file mode 100644 index 0000000000..2dc248946a --- /dev/null +++ b/layout/reftests/abs-pos/button-1.html @@ -0,0 +1,30 @@ +<!doctype html> +<html> +<head> +<style> +button { +position:relative; +left:0px; +top:0px; +width: +200px; +height:100px; +border:none; +background:#00ff00; +-moz-appearance: none; +border-radius: 0 !important; +} +div { +position:absolute; +left:0px; +top:0px; +width:50px; +height:50px; +background:#ff0000; +} +</style> +</head> +<body> +<button><div></div></button> +</body> +</html> diff --git a/layout/reftests/abs-pos/button-2-ref.html b/layout/reftests/abs-pos/button-2-ref.html new file mode 100644 index 0000000000..fd2cc66af1 --- /dev/null +++ b/layout/reftests/abs-pos/button-2-ref.html @@ -0,0 +1,31 @@ +<!doctype html> +<html> +<head> +<style> +div { +position:relative; +padding:0; +background:green; +width: 200px; +height: 100px; +border:none; +text-align: left; +font: 12px serif; +} +div span { +display:block; +position:absolute; +right:0; +top:0; +width:10px; +height:100%; +background:red; +} +</style> +</head> +<body> +<div> +<span></span> +</div> +</body> +</html> diff --git a/layout/reftests/abs-pos/button-2.html b/layout/reftests/abs-pos/button-2.html new file mode 100644 index 0000000000..a4ec462a32 --- /dev/null +++ b/layout/reftests/abs-pos/button-2.html @@ -0,0 +1,33 @@ +<!doctype html> +<html> +<head> +<style> +button { +position:relative; +padding:0; +background:green; +width: 200px; +height: 100px; +border:none; +text-align: left; +font: 12px serif; +-moz-appearance: none; +border-radius: 0 !important; +} +button span { +display:block; +position:absolute; +right:0; +top:0; +width:10px; +height:100%; +background:red; +} +</style> +</head> +<body> +<button> +<span></span> +</button> +</body> +</html> diff --git a/layout/reftests/abs-pos/continuation-positioned-inline-1.html b/layout/reftests/abs-pos/continuation-positioned-inline-1.html new file mode 100644 index 0000000000..1a2a627022 --- /dev/null +++ b/layout/reftests/abs-pos/continuation-positioned-inline-1.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <span style="position: relative; top: 100px">foo<br> + <span id="ins-point"><span style="position: absolute; top: 0">abs</span>bar</span></span> + </body> +</html> diff --git a/layout/reftests/abs-pos/continuation-positioned-inline-2.html b/layout/reftests/abs-pos/continuation-positioned-inline-2.html new file mode 100644 index 0000000000..669f3753b0 --- /dev/null +++ b/layout/reftests/abs-pos/continuation-positioned-inline-2.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <body onload="loaded()"> + <span style="position: relative; top: 100px">foo<br> + <span id="ins-point">bar</span></span> + <script> + function loaded() { + var insPoint = document.getElementById("ins-point"); + var span = document.createElement("span"); + span.style.position = "absolute"; + span.style.top = 0; + span.appendChild(document.createTextNode("abs")); + insPoint.insertBefore(span, insPoint.firstChild); + } + </script> + </body> +</html> diff --git a/layout/reftests/abs-pos/continuation-positioned-inline-ref.html b/layout/reftests/abs-pos/continuation-positioned-inline-ref.html new file mode 100644 index 0000000000..5c454fd3a8 --- /dev/null +++ b/layout/reftests/abs-pos/continuation-positioned-inline-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <span style="position: relative; top: 100px"><span style="position: absolute; top: 0; left: 0">abs</span>foo<br> + <span id="ins-point">bar</span></span> + </body> +</html> diff --git a/layout/reftests/abs-pos/fieldset-1-ref.html b/layout/reftests/abs-pos/fieldset-1-ref.html new file mode 100644 index 0000000000..6fab6e9199 --- /dev/null +++ b/layout/reftests/abs-pos/fieldset-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <head> + <style> + * { border: 0; margin: 0; padding: 0; } + </style> + </head> + <body> + <span style="position: absolute; top: 50px; left: 50px">test</span> + </body> +</html> diff --git a/layout/reftests/abs-pos/fieldset-1.html b/layout/reftests/abs-pos/fieldset-1.html new file mode 100644 index 0000000000..80d219203a --- /dev/null +++ b/layout/reftests/abs-pos/fieldset-1.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + * { border: 0; margin: 0; padding: 0; } + </style> + </head> + <body> + <fieldset style="position: relative; top: 25px; left: 20px; width: 100px;"> + <legend> + <span style="position: absolute; top: 25px; left: 30px">test</span> + </legend> + </fieldset> + </body> +</html> diff --git a/layout/reftests/abs-pos/fixed-pos-auto-offset-1-ref.html b/layout/reftests/abs-pos/fixed-pos-auto-offset-1-ref.html new file mode 100644 index 0000000000..4097705ba2 --- /dev/null +++ b/layout/reftests/abs-pos/fixed-pos-auto-offset-1-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>Testcase Bug 851514</title> + <style> + #parent { + position: fixed; + height: 30px; + width: 30px; + background: green; + left: 70px; + top: 70px; + } + #child { + position: fixed; + top: auto; + left: auto; + width: 10px; + height: 10px; + background: purple; + } + </style> +</head> +<body> + <div id="parent"> + <div id="child"></div> + </div> + The purple block should be inside the green block. +</body> +</html> diff --git a/layout/reftests/abs-pos/fixed-pos-auto-offset-1a.html b/layout/reftests/abs-pos/fixed-pos-auto-offset-1a.html new file mode 100644 index 0000000000..c093648528 --- /dev/null +++ b/layout/reftests/abs-pos/fixed-pos-auto-offset-1a.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>Testcase Bug 851514</title> + <style> + #parent { + position: fixed; + height: 30px; + width: 30px; + background: green; + left: 70px; + top: 70px; + overflow:hidden; + display: none; /* So we can make sure there is only one frame construction + and one reflow for the parent + child thing */ + } + #child { + position: fixed; + top: auto; + left: auto; + width: 10px; + height: 10px; + background: purple; + } + </style> + <script> + function doTest() { + var par = document.getElementById("parent"); + // Flush layout + par.getBoundingClientRect(); + par.style.display = "block"; + document.documentElement.className = ""; + } + </script> +</head> +<body onload="doTest();"> + <div id="parent"> + <div id="child"></div> + </div> + The purple block should be inside the green block. +</body> +</html> diff --git a/layout/reftests/abs-pos/fixed-pos-auto-offset-1b.html b/layout/reftests/abs-pos/fixed-pos-auto-offset-1b.html new file mode 100644 index 0000000000..f450bb4a2a --- /dev/null +++ b/layout/reftests/abs-pos/fixed-pos-auto-offset-1b.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <!-- Important: no meta charset! --> + <title>Testcase Bug 851514</title> + <style> + #parent { + position: fixed; + height: 30px; + width: 30px; + background: green; + left: 70px; + top: 70px; + overflow: hidden; + } + #child { + position: fixed; + top: auto; + left: auto; + width: 10px; + height: 10px; + background: purple; + } + </style> +</head> +<body> + <div id="parent"> + <div id="child"></div> + </div> + The purple block should be inside the green block. +</body> +</html> diff --git a/layout/reftests/abs-pos/font-size-wrap-ref.html b/layout/reftests/abs-pos/font-size-wrap-ref.html new file mode 100644 index 0000000000..1618d3ddc2 --- /dev/null +++ b/layout/reftests/abs-pos/font-size-wrap-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> +<head> +<title>Based on testcase #3 for bug 310451</title> + +<style type="text/css"> + body { font-size: 16px; } + div { position: absolute; border:1px solid black; } +</style> + +<script type="text/javascript">//<![CDATA[ +window.onload = function() { + var newSize = '32px'; + document.body.style.fontSize = newSize; +} + +//]]></script> + +</head> +<body> + +<div style="top:40px;"> + this text should be on one line <b>and not wrap</b> +</div> +</body> +</html> diff --git a/layout/reftests/abs-pos/font-size-wrap.html b/layout/reftests/abs-pos/font-size-wrap.html new file mode 100644 index 0000000000..bd201199e0 --- /dev/null +++ b/layout/reftests/abs-pos/font-size-wrap.html @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="reftest-wait"> +<head> +<title>Based on testcase #3 for bug 310451</title> + +<style type="text/css"> + body { font-size: 16px; } + div { position: absolute; border:1px solid black; } +</style> + +<script type="text/javascript">//<![CDATA[ +window.onload = function() { + var newSize = '32px'; + var div = document.getElementById('div'); + document.body.style.fontSize = newSize; + div.style.height = '1px'; + setTimeout(function() { + div.style.height = 'auto'; + document.documentElement.removeAttribute("class"); + }, 0); +} + +//]]></script> + +</head> +<body> + +<div id="div" style="top:40px;"> + this text should be on one line <b>and not wrap</b> +</div> +</body> +</html> diff --git a/layout/reftests/abs-pos/multi-column-1-ref.html b/layout/reftests/abs-pos/multi-column-1-ref.html new file mode 100644 index 0000000000..09ca0eaf19 --- /dev/null +++ b/layout/reftests/abs-pos/multi-column-1-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<head> +<style type="text/css"> +div { + color: #222; + padding: 10px; + border: 2px solid; + position:relative; + + width:10em; +} + +h2, h3 {position:absolute; width:3em; background: #f00; color:#fff;} +h2 { top: 0; left: 0; } +h3 { bottom: 0; right: 0; } + +p, h2, h3 {margin:0;} +p { visibility: hidden; } +</style> +</head> +<body> +<div> +<h2>Test</h2> +<h3>Test</h3> +<p>XXX<br>XXXX<br>XXX<br>XXXX<br>XXX </p> +</div> +</body> +</html> diff --git a/layout/reftests/abs-pos/multi-column-1.html b/layout/reftests/abs-pos/multi-column-1.html new file mode 100644 index 0000000000..3d711dde81 --- /dev/null +++ b/layout/reftests/abs-pos/multi-column-1.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<html> +<head> +<style type="text/css"> +div { + color: #222; + padding: 10px; + border: 2px solid; + position:relative; + + width:10em; + column-count:2; + -webkit-column-count:2; +} + +h2, h3 {position:absolute; width:3em; background: #f00; color:#fff;} +h2 { top: 0; left: 0; } +h3 { bottom: 0; right: 0; } + +p, h2, h3 {margin:0;} +p { visibility: hidden; } +</style> +</head> +<body> +<div> +<h2>Test</h2> +<h3>Test</h3> +<p>XXX<br>XXXX<br>XXX<br>XXXX<br>XXX<br>XXXX<br>XXX<br>XXXX<br>XXX<br>XXXX<br> </p> +</div> +</body> +</html> diff --git a/layout/reftests/abs-pos/reftest.list b/layout/reftests/abs-pos/reftest.list new file mode 100644 index 0000000000..3e5b85de9b --- /dev/null +++ b/layout/reftests/abs-pos/reftest.list @@ -0,0 +1,65 @@ +== font-size-wrap.html font-size-wrap-ref.html +== abs-pos-auto-margin-1.html abs-pos-auto-margin-1-ref.html +== auto-offset-inline-block-1.html auto-offset-inline-block-1-ref.html # bug 696670 +== fieldset-1.html fieldset-1-ref.html +== table-1.html table-1-ref.html +== table-2.html table-2-ref.html +== table-3.html table-3-ref.html +== table-caption-1.html table-internal-1-ref.html +== table-caption-2.html table-internal-2-ref.html +== table-caption-3.html table-internal-3-ref.html +== table-caption-4.html table-internal-8-ref.html +pref(layout.display-list.improve-fragmentation,false) != table-caption-5.html table-print-1-ref.html # TODO: change to == and remove pref when bug 967870 is fixed +pref(layout.display-list.improve-fragmentation,true) == table-caption-5.html table-print-1-ref.html # TODO: remove when bug 967870 is fixed +== table-cell-1.html table-internal-1-ref.html +== table-cell-2.html table-internal-2-ref.html +== table-cell-3.html table-internal-3-ref.html +== table-cell-4.html table-internal-4-ref.html +== table-cell-5.html table-internal-5-ref.html +== table-cell-6.html table-internal-6-ref.html +== table-cell-7.html table-internal-7-ref.html +pref(layout.display-list.improve-fragmentation,false) != table-cell-8.html table-print-1-ref.html # TODO: change to == and remove pref when bug 967870 is fixed +pref(layout.display-list.improve-fragmentation,true) == table-cell-8.html table-print-1-ref.html # TODO: remove when bug 967870 is fixed +== table-row-1.html table-internal-1-ref.html +== table-row-2.html table-internal-2-ref.html +== table-row-3.html table-internal-3-ref.html +== table-row-4.html table-internal-4-ref.html +== table-row-5.html table-internal-5-ref.html +== table-row-6.html table-internal-6-ref.html +== table-row-7.html table-internal-7-ref.html +== table-row-group-1.html table-internal-1-ref.html +== table-row-group-2.html table-internal-2-ref.html +== table-row-group-3.html table-internal-3-ref.html +== table-row-group-4.html table-internal-4-ref.html +== table-row-group-5.html table-internal-5-ref.html +== table-row-group-6.html table-internal-6-ref.html +== table-row-group-7.html table-internal-7-ref.html +== table-header-group-1.html table-internal-1-ref.html +== table-header-group-2.html table-internal-2-ref.html +== table-header-group-3.html table-internal-3-ref.html +== table-header-group-4.html table-internal-4-ref.html +== table-header-group-5.html table-internal-5-ref.html +== table-header-group-6.html table-internal-6-ref.html +== table-header-group-7.html table-internal-7-ref.html +== table-footer-group-1.html table-internal-1-ref.html +== table-footer-group-2.html table-internal-2-ref.html +== table-footer-group-3.html table-internal-3-ref.html +== table-footer-group-4.html table-internal-4-ref.html +== table-footer-group-5.html table-internal-5-ref.html +== table-footer-group-6.html table-internal-6-ref.html +== table-footer-group-7.html table-internal-7-ref.html +== continuation-positioned-inline-1.html continuation-positioned-inline-ref.html +== continuation-positioned-inline-2.html continuation-positioned-inline-ref.html +== scrollframe-1.html scrollframe-1-ref.html +fuzzy-if(gtkWidget,0-1,0-1) fuzzy-if(Android,0-9,0-185) fuzzy-if(asyncPan&&!layersGPUAccelerated,0-140,0-144) == scrollframe-2.html scrollframe-2-ref.html #bug 756530 +fuzzy-if(gtkWidget,0-1,0-8) fuzzy-if(Android,0-4,0-2) == select-1.html select-1-ref.html +fuzzy-if(gtkWidget,0-1,0-8) fuzzy-if(Android,0-4,0-2) == select-1-dynamic.html select-1-ref.html +== select-2.html select-2-ref.html +== select-3.html select-3-ref.html +fuzzy-if(gtkWidget||winWidget,0-1,0-4) fuzzy-if(cocoaWidget,0-1,0-8) == select-4.html select-4-ref.html +== multi-column-1.html multi-column-1-ref.html +== button-1.html button-1-ref.html +== button-2.html button-2-ref.html +== relative-row-animation-1.html relative-row-animation-1-ref.html +fuzzy-if(Android,0-12,0-50) == fixed-pos-auto-offset-1a.html fixed-pos-auto-offset-1-ref.html +fuzzy-if(Android,0-12,0-50) == fixed-pos-auto-offset-1b.html fixed-pos-auto-offset-1-ref.html diff --git a/layout/reftests/abs-pos/relative-row-animation-1-ref.html b/layout/reftests/abs-pos/relative-row-animation-1-ref.html new file mode 100644 index 0000000000..fa1f5a26f1 --- /dev/null +++ b/layout/reftests/abs-pos/relative-row-animation-1-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 845837</title> +<meta charset="UTF-8"> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=845837 +--> + +<div style="height: 20px"></div> + +<table border> + <tr style="position: relative"> + <td>hello +</table> diff --git a/layout/reftests/abs-pos/relative-row-animation-1.html b/layout/reftests/abs-pos/relative-row-animation-1.html new file mode 100644 index 0000000000..8be42a9e56 --- /dev/null +++ b/layout/reftests/abs-pos/relative-row-animation-1.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 845837</title> +<meta charset="UTF-8"> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=845837 +--> + +<div style="height: 20px"></div> + +<table border> + <tr id="tr" style="position: relative"> + <td>hello +</table> + +<script> +var tr = document.getElementById("tr"); +tr.offsetTop; +tr.style.top = '20px'; +tr.offsetTop; +tr.style.fontSize = '100px'; +tr.offsetTop; +tr.style.fontSize = ''; +tr.offsetTop; +tr.style.top = '0px'; +tr.offsetTop; +// Just check that we have no relative positioning applied when we're done, +// since we don't currently support relative positioning on table rows. +</script> diff --git a/layout/reftests/abs-pos/scrollframe-1-ref.html b/layout/reftests/abs-pos/scrollframe-1-ref.html new file mode 100644 index 0000000000..645db8947f --- /dev/null +++ b/layout/reftests/abs-pos/scrollframe-1-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <body onload="loaded()"> + <div style="position: relative; top: 100px; overflow: scroll; width: 100px; height: 100px;"> + <div style="height: 200px"></div></div> + <script> + function loaded() { + var insPoint = document.querySelector("div"); + insPoint.scrollTop = 50; + } + </script> + </body> +</html> diff --git a/layout/reftests/abs-pos/scrollframe-1.html b/layout/reftests/abs-pos/scrollframe-1.html new file mode 100644 index 0000000000..d0406f5a03 --- /dev/null +++ b/layout/reftests/abs-pos/scrollframe-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <body onload="loaded()"> + <div style="position: relative; top: 100px; overflow: scroll; width: 100px; height: 100px;"> + <div style="height: 200px">foo</div></div> + <script> + function loaded() { + var insPoint = document.querySelector("div"); + insPoint.scrollTop = 50; + var div = document.createElement("div"); + div.style.position = "absolute"; + div.style.top = 0; + div.appendChild(document.createTextNode("abs")); + insPoint.insertBefore(div, insPoint.firstChild); + } + </script> + </body> +</html> diff --git a/layout/reftests/abs-pos/scrollframe-2-ref.html b/layout/reftests/abs-pos/scrollframe-2-ref.html new file mode 100644 index 0000000000..b7eb799ba8 --- /dev/null +++ b/layout/reftests/abs-pos/scrollframe-2-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <body onload="loaded()"> + <div style="position: relative; top: 100px; overflow: scroll; width: 100px; height: 100px;"> + <div style="height: 200px"></div></div> + <div style="position: absolute; top: 100px;" id="abs">abs</div> + <script> + function loaded() { + var insPoint = document.querySelector("div"); + insPoint.scrollTop = 50; + var abs = document.getElementById("abs"); + abs.style.top = insPoint.offsetTop + "px"; + } + </script> + </body> +</html> diff --git a/layout/reftests/abs-pos/scrollframe-2.html b/layout/reftests/abs-pos/scrollframe-2.html new file mode 100644 index 0000000000..0c79dd6410 --- /dev/null +++ b/layout/reftests/abs-pos/scrollframe-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <body onload="loaded()"> + <div style="position: relative; top: 100px; overflow: scroll; width: 100px; height: 100px;"> + <div style="height: 200px">foo</div></div> + <script> + function loaded() { + var insPoint = document.querySelector("div"); + insPoint.scrollTop = 50; + var div = document.createElement("div"); + div.style.position = "absolute"; + div.style.top = '50px'; + div.appendChild(document.createTextNode("abs")); + insPoint.insertBefore(div, insPoint.firstChild); + } + </script> + </body> +</html> diff --git a/layout/reftests/abs-pos/select-1-dynamic.html b/layout/reftests/abs-pos/select-1-dynamic.html new file mode 100644 index 0000000000..ad917c5ed8 --- /dev/null +++ b/layout/reftests/abs-pos/select-1-dynamic.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <select style="position: relative" size=4> + <option>bar</option> + </select> + <select style="position: relative"> + <option>bar</option> + </select> + <script> + function injectAbsPosKid(s) { + var option = document.createElement("option"); + option.appendChild(document.createTextNode("foo")); + option.style.position = "absolute"; + option.style.top = "100px"; + s.insertBefore(option, s.firstChild); + + var div = document.createElement("div"); + div.appendChild(document.createTextNode("bar")); + div.style.position = "absolute"; + div.style.top = "200px"; + s.appendChild(div); + } + onload = function() { + var s1 = document.querySelectorAll("select")[0]; + var s2 = document.querySelectorAll("select")[1]; + injectAbsPosKid(s1); + injectAbsPosKid(s2); + s2.selectedIndex = 0; + }; + </script> +</html> diff --git a/layout/reftests/abs-pos/select-1-ref.html b/layout/reftests/abs-pos/select-1-ref.html new file mode 100644 index 0000000000..d863d51a49 --- /dev/null +++ b/layout/reftests/abs-pos/select-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <select size=4> + <option>foo</option> + <option>bar</option> + </select> + <select> + <option>foo</option> + <option>bar</option> + </select> +</html> diff --git a/layout/reftests/abs-pos/select-1.html b/layout/reftests/abs-pos/select-1.html new file mode 100644 index 0000000000..194b5f9fec --- /dev/null +++ b/layout/reftests/abs-pos/select-1.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <select style="position: relative" size=4> + <option style="position: absolute; top:100px;">foo</option> + <option>bar</option> + <div style="position: absolute; top: 200px;">baz</div> + </select> + <select style="position: relative"> + <option style="position: absolute; top:100px;">foo</option> + <option>bar</option> + <div style="position: absolute; top: 200px;">baz</div> + </select> +</html> diff --git a/layout/reftests/abs-pos/select-2-ref.html b/layout/reftests/abs-pos/select-2-ref.html new file mode 100644 index 0000000000..58896d9bdf --- /dev/null +++ b/layout/reftests/abs-pos/select-2-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <body style="margin: 0; padding: 0;"> + <div style="position: absolute; top: 100px; left: 100px;"> + <select size=4> + <option>foo</option> + <option>bar</option> + </select> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/select-2.html b/layout/reftests/abs-pos/select-2.html new file mode 100644 index 0000000000..cd521978b6 --- /dev/null +++ b/layout/reftests/abs-pos/select-2.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <body style="margin: 0; padding: 0;"> + <div style="position: relative"> + <select size=4 style="position: absolute; top: 100px; left: 100px;"> + <option>foo</option> + <option>bar</option> + </select> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/select-3-ref.html b/layout/reftests/abs-pos/select-3-ref.html new file mode 100644 index 0000000000..788b6f3dfc --- /dev/null +++ b/layout/reftests/abs-pos/select-3-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <body style="margin: 0; padding: 0;"> + <select style="position: absolute; top: 100px; left: 100px;"> + <option>foo</option> + <option>bar</option> + </select> + </body> +</html> diff --git a/layout/reftests/abs-pos/select-3.html b/layout/reftests/abs-pos/select-3.html new file mode 100644 index 0000000000..59b6132d07 --- /dev/null +++ b/layout/reftests/abs-pos/select-3.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <body style="margin: 0; padding: 0;"> + <div style="position: relative;"> + <select style="position: absolute; top: 100px; left: 100px;"> + <option>foo</option> + <option>bar</option> + </select> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/select-4-ref.html b/layout/reftests/abs-pos/select-4-ref.html new file mode 100644 index 0000000000..5f3cea1b19 --- /dev/null +++ b/layout/reftests/abs-pos/select-4-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <body style="margin: 0; padding: 0;"> + <!-- Note: we use transparent text to avoid subtle antialiasing rendering + differences between the testcase's abs-pos element vs. the reference + case's fixed-pos element. --> + <select style="position: fixed; top: 100px; left: 100px; + color: transparent;">"> + <option>foo</option> + <option>bar</option> + </select> + </body> +</html> diff --git a/layout/reftests/abs-pos/select-4.html b/layout/reftests/abs-pos/select-4.html new file mode 100644 index 0000000000..ee1f70ee35 --- /dev/null +++ b/layout/reftests/abs-pos/select-4.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <body style="margin: 0; padding: 0;"> + <div style="position: relative;"> + <!-- Note: we use transparent text to avoid subtle antialiasing rendering + differences between the testcase's abs-pos element vs. the reference + case's fixed-pos element. --> + <select style="position: absolute; top: 100px; left: 100px; + color: transparent;"> + <option>foo</option> + <option>bar</option> + </select> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-1-ref.html b/layout/reftests/abs-pos/table-1-ref.html new file mode 100644 index 0000000000..b8c7dc616a --- /dev/null +++ b/layout/reftests/abs-pos/table-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <body style="margin: 0"> + <table style="position: relative; top: 100px; left: 50px; border: 1px solid red; width: 90px; height: 100px; border-spacing: 0"> + <tr> + <td style="padding: 0"> + </td> + </tr> + </table> + <div style="position: absolute; top: 110px; left: 70px; border: 1px solid green; width: 50px; height: 60px;"></div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-1.html b/layout/reftests/abs-pos/table-1.html new file mode 100644 index 0000000000..8b2a69674c --- /dev/null +++ b/layout/reftests/abs-pos/table-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <body style="margin: 0"> + <table style="position: relative; top: 100px; left: 50px; border: 1px solid red; width: 90px; height: 100px; border-spacing: 0"> + <tr> + <td style="padding: 0"> + <div style="position: absolute; top: 10px; left: 20px; border: 1px solid green; width: 50px; height: 60px;"></div> + </td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-2-ref.html b/layout/reftests/abs-pos/table-2-ref.html new file mode 100644 index 0000000000..03990655bb --- /dev/null +++ b/layout/reftests/abs-pos/table-2-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <body style="margin: 0"> + <table style="position: relative; top: 100px; left: 50px; border: 1px solid red; width: 90px; height: 100px; border-spacing: 0"> + <caption>foo</caption> + <tr> + <td style="padding: 0"> + </td> + </tr> + </table> + <div style="position: absolute; top: 110px; left: 70px; border: 1px solid green; width: 50px; height: 60px;"></div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-2.html b/layout/reftests/abs-pos/table-2.html new file mode 100644 index 0000000000..618cfef82d --- /dev/null +++ b/layout/reftests/abs-pos/table-2.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <body style="margin: 0"> + <table style="position: relative; top: 100px; left: 50px; border: 1px solid red; width: 90px; height: 100px; border-spacing: 0"> + <caption>foo</caption> + <tr> + <td style="padding: 0"> + <div style="position: absolute; top: 10px; left: 20px; border: 1px solid green; width: 50px; height: 60px;"></div> + </td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-3-ref.html b/layout/reftests/abs-pos/table-3-ref.html new file mode 100644 index 0000000000..93da428d79 --- /dev/null +++ b/layout/reftests/abs-pos/table-3-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<style type="text/css"> +.box {position: relative; left:50px; top: 50px; outline: red dotted 1px;width: 200px; height:200px;} +.lc {position: absolute; left:0px; top:0px;border: green dotted 1px;width: 20px; height:20px;} +.rc {position: absolute; right:0px; top:0px;border: blue dotted 1px;width: 20px; height:20px;} +.brc {position: absolute; right:0px; bottom:0px;border: blue dotted 1px;width: 20px; height:20px;} +</style> +</head> +<body> +<div class="box"> + <div class="border"> + <div class="lc"></div> + <div class="brc"></div> + </div> +</div> +</div> +</body> +</html> diff --git a/layout/reftests/abs-pos/table-3.html b/layout/reftests/abs-pos/table-3.html new file mode 100644 index 0000000000..309928efdb --- /dev/null +++ b/layout/reftests/abs-pos/table-3.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<style type="text/css"> +.table {display: table; position: relative; left:50px; top: 50px; outline: red dotted 1px;width: 200px; height:200px;} +.lc {position: absolute; left:0px; top:0px;border: green dotted 1px;width: 20px; height:20px;} +.rc {position: absolute; right:0px; top:0px;border: blue dotted 1px;width: 20px; height:20px;} +.brc {position: absolute; right:0px; bottom:0px;border: blue dotted 1px;width: 20px; height:20px;} +</style> +</head> +<body> +<div class="table"> + <div class="lc"></div> + <div class="brc"></div> +</div> +</body> +</html> diff --git a/layout/reftests/abs-pos/table-caption-1.html b/layout/reftests/abs-pos/table-caption-1.html new file mode 100644 index 0000000000..28295e2f14 --- /dev/null +++ b/layout/reftests/abs-pos/table-caption-1.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 2px; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <table> + <caption id="rel"><div class="abs"></div></caption> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-caption-2.html b/layout/reftests/abs-pos/table-caption-2.html new file mode 100644 index 0000000000..8e5c0827bd --- /dev/null +++ b/layout/reftests/abs-pos/table-caption-2.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 2px; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div style="position: relative"> + <table> + <caption id="rel"><div class="abs"></div></caption> + <tr> + <td></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-caption-3.html b/layout/reftests/abs-pos/table-caption-3.html new file mode 100644 index 0000000000..a0169df601 --- /dev/null +++ b/layout/reftests/abs-pos/table-caption-3.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + width: 300px; + height: 300px; + background-color: blue; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin-left: 2px; + margin-top: -2px; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should not touch the blue square. + <table> + <tr> + <td></td> + <td></td> + </tr> + <tr style="height: 100%"> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + <caption style="caption-side:bottom" id="rel"><div id="abs"></div></caption> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-caption-4.html b/layout/reftests/abs-pos/table-caption-4.html new file mode 100644 index 0000000000..47b4cc7bd3 --- /dev/null +++ b/layout/reftests/abs-pos/table-caption-4.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 2px; + padding: 0; + } + .fixed, .abs { + position: fixed; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: red; + } + </style> + </head> + <body> + The green square should completely cover the red square. + <div class="abs" id="bad"></div> + <table> + <caption id="rel"><div class="fixed"></div></caption> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-caption-5.html b/layout/reftests/abs-pos/table-caption-5.html new file mode 100644 index 0000000000..c906089c67 --- /dev/null +++ b/layout/reftests/abs-pos/table-caption-5.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-paged"> + <head> + <style> + @page { size:5in 3in; margin:0.5in; } + #rel { + position: relative; + margin: 2px; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + .m { height:1.4in; } + .b { border:1px solid; } + </style> + </head> + <body> + <div class="m"></div> + <table> + <caption id="rel"><div class="abs b"></div></caption> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-cell-1.html b/layout/reftests/abs-pos/table-cell-1.html new file mode 100644 index 0000000000..b0c03e9a0b --- /dev/null +++ b/layout/reftests/abs-pos/table-cell-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 0; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <table> + <tr> + <td id="rel"> + <div class="abs"></div> + </td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-cell-2.html b/layout/reftests/abs-pos/table-cell-2.html new file mode 100644 index 0000000000..457c6b0356 --- /dev/null +++ b/layout/reftests/abs-pos/table-cell-2.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 0; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div style="position: relative"> + <table> + <tr> + <td id="rel"> + <div class="abs"></div> + </td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-cell-3.html b/layout/reftests/abs-pos/table-cell-3.html new file mode 100644 index 0000000000..52f89b1caf --- /dev/null +++ b/layout/reftests/abs-pos/table-cell-3.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + width: 300px; + height: 300px; + background-color: blue; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should not touch the blue square. + <table> + <tr> + <td></td> + <td></td> + </tr> + <tr style="height: 100%"> + <td></td> + <td></td> + </tr> + <tr> + <td id="rel"> + <div id="abs"></div> + </td> + <td></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-cell-4.html b/layout/reftests/abs-pos/table-cell-4.html new file mode 100644 index 0000000000..9831b5c991 --- /dev/null +++ b/layout/reftests/abs-pos/table-cell-4.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + width: 300px; + height: 300px; + background-color: blue; + } + td, div { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + top: 200px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should not touch the blue square. + <table> + <colgroup> + <col style="width: 15%"> + <col> + </colgroup> + <tr> + <td></td> + <td></td> + </tr> + <tr> + <td id="rel"> + <div id="abs"></div> + </td> + <td></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-cell-5.html b/layout/reftests/abs-pos/table-cell-5.html new file mode 100644 index 0000000000..ca92eb94d5 --- /dev/null +++ b/layout/reftests/abs-pos/table-cell-5.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0 + width: 100px; + height: 100px; + border-collapse: collapse; + } + tr { + height: 50px; + } + td { + width: 50px; + margin: 0; + padding: 0; + } + #rel { + position: relative; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 100px; + height: 100px; + overflow: visible; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div id="bottomright"> + <table> + <tr> + <td id="rel"> + <div class="abs"></div> + </td> + <td></td> + </tr> + <tr></tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-cell-6.html b/layout/reftests/abs-pos/table-cell-6.html new file mode 100644 index 0000000000..78fac610aa --- /dev/null +++ b/layout/reftests/abs-pos/table-cell-6.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0; + width: 50px; + height: 50px; + border-collapse: collapse; + background-color: blue; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + overflow: visible; + background-color: red; + } + </style> + </head> + <body> + The green square should not overlap the blue square. + <div id="bottomright"> + <table> + <tr> + <td></td> + <td></td> + </tr> + <tr style="height: 100%"> + <td></td> + <td></td> + </tr> + <tr> + <td id="rel"> + <div id="abs"></div> + </td> + <td></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-cell-7.html b/layout/reftests/abs-pos/table-cell-7.html new file mode 100644 index 0000000000..e7dbbe7a48 --- /dev/null +++ b/layout/reftests/abs-pos/table-cell-7.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0; + width: 50px; + height: 50px; + border-collapse: collapse; + background-color: blue; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 10px; + width: 50px; + height: 50px; + background-color: green; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + overflow: visible; + background-color: red; + } + </style> + </head> + <body> + The green square should not overlap the blue square. + <div id="bottomright"> + <table> + <colgroup> + <col style="width: 20%"> + <col> + </colgroup> + <tr> + <td></td> + <td></td> + </tr> + <tr> + <td id="rel"> + <div id="abs"></div> + </td> + <td></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-cell-8.html b/layout/reftests/abs-pos/table-cell-8.html new file mode 100644 index 0000000000..77115f3d41 --- /dev/null +++ b/layout/reftests/abs-pos/table-cell-8.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-paged"> + <head> + <style> + @page { size:5in 3in; margin:0.5in; } + #rel { + position: relative; + margin: 2px; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + .m { height:1.4in; } + .b { border:1px solid; } + </style> + </head> + <body> + <div class="m"></div> + <table> + <tr><td id="rel"><div class="abs b"></div></td></tr> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-footer-group-1.html b/layout/reftests/abs-pos/table-footer-group-1.html new file mode 100644 index 0000000000..2f94a6313d --- /dev/null +++ b/layout/reftests/abs-pos/table-footer-group-1.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 0; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <table> + <tfoot id="rel"> + <tr> + <td> + <div class="abs"></div> + </td> + </tr> + </tfoot> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-footer-group-2.html b/layout/reftests/abs-pos/table-footer-group-2.html new file mode 100644 index 0000000000..b5d70f3ef7 --- /dev/null +++ b/layout/reftests/abs-pos/table-footer-group-2.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 0; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div style="position: relative"> + <table> + <tfoot id="rel"> + <tr> + <td> + <div class="abs"></div> + </td> + </tr> + </tfoot> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-footer-group-3.html b/layout/reftests/abs-pos/table-footer-group-3.html new file mode 100644 index 0000000000..f5e60a0aa1 --- /dev/null +++ b/layout/reftests/abs-pos/table-footer-group-3.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + width: 300px; + height: 300px; + background-color: blue; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should not touch the blue square. + <table> + <tbody> + <tr> + <td></td> + <td></td> + </tr> + <tr style="height: 100%"> + <td></td> + <td></td> + </tr> + </tbody> + <tfoot id="rel"> + <tr> + <td></td> + <td> + <div id="abs"></div> + </td> + </tr> + </tfoot> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-footer-group-4.html b/layout/reftests/abs-pos/table-footer-group-4.html new file mode 100644 index 0000000000..23f1a351ea --- /dev/null +++ b/layout/reftests/abs-pos/table-footer-group-4.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + width: 300px; + height: 300px; + background-color: blue; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + top: 200px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should not touch the blue square. + <table> + <colgroup> + <col style="width: 15%"> + <col> + </colgroup> + <tbody> + <tr> + <td></td> + <td></td> + </tr> + </tbody> + <tfoot id="rel"> + <tr> + <td></td> + <td> + <div id="abs"></div> + </td> + </tr> + </tfoot> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-footer-group-5.html b/layout/reftests/abs-pos/table-footer-group-5.html new file mode 100644 index 0000000000..8aa86a4004 --- /dev/null +++ b/layout/reftests/abs-pos/table-footer-group-5.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0 + width: 50px; + height: 50px; + border-collapse: collapse; + } + tr { + height: 50px; + } + td { + width: 50px; + margin: 0; + padding: 0; + } + tbody { + height: 50%; + } + #rel { + position: relative; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 100px; + height: 100px; + overflow: visible; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div id="bottomright"> + <table> + <tfoot id="rel"> + <tr> + <td> + <div class="abs"></div> + </td> + </tr> + </tfoot> + </table> + <table> + <tbody> + <tr></tr> + </tbody> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-footer-group-6.html b/layout/reftests/abs-pos/table-footer-group-6.html new file mode 100644 index 0000000000..b24bb1bb73 --- /dev/null +++ b/layout/reftests/abs-pos/table-footer-group-6.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0; + width: 25px; + height: 50px; + border-collapse: collapse; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + overflow: visible; + background-color: blue; + } + </style> + </head> + <body> + The green square should not overlap the blue square. + <div id="bottomright"> + <table> + <tfoot id="rel"> + <tr style="height: 50%"> + <td></td> + <td></td> + </tr> + <tr> + <td> + <div id="abs"></div> + </td> + <td></td> + </tr> + </tfoot> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-footer-group-7.html b/layout/reftests/abs-pos/table-footer-group-7.html new file mode 100644 index 0000000000..bb2b5ebdb3 --- /dev/null +++ b/layout/reftests/abs-pos/table-footer-group-7.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0; + width: 25px; + height: 50px; + border-collapse: collapse; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + overflow: visible; + background-color: blue; + } + </style> + </head> + <body> + The green square should not overlap the blue square. + <div id="bottomright"> + <table> + <colgroup> + <col style="width: 20%"> + <col> + </colgroup> + <tfoot id="rel"> + <tr> + <td></td> + <td></td> + </tr> + <tr> + <td> + <div id="abs"></div> + </td> + <td></td> + </tr> + </tfoot> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-header-group-1.html b/layout/reftests/abs-pos/table-header-group-1.html new file mode 100644 index 0000000000..346cafeea9 --- /dev/null +++ b/layout/reftests/abs-pos/table-header-group-1.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 0; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <table> + <thead id="rel"> + <tr> + <td> + <div class="abs"></div> + </td> + </tr> + </tbody> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-header-group-2.html b/layout/reftests/abs-pos/table-header-group-2.html new file mode 100644 index 0000000000..7573e917f5 --- /dev/null +++ b/layout/reftests/abs-pos/table-header-group-2.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 0; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div style="position: relative"> + <table> + <thead id="rel"> + <tr> + <td> + <div class="abs"></div> + </td> + </tr> + </thead> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-header-group-3.html b/layout/reftests/abs-pos/table-header-group-3.html new file mode 100644 index 0000000000..0e9697d55f --- /dev/null +++ b/layout/reftests/abs-pos/table-header-group-3.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + width: 300px; + height: 300px; + background-color: blue; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should not touch the blue square. + <table> + <thead> + <tr> + <td></td> + <td></td> + </tr> + <tr style="height: 100%"> + <td></td> + <td></td> + </tr> + </thead> + <thead id="rel"> + <tr> + <td></td> + <td> + <div id="abs"></div> + </td> + </tr> + </thead> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-header-group-4.html b/layout/reftests/abs-pos/table-header-group-4.html new file mode 100644 index 0000000000..4533a205f9 --- /dev/null +++ b/layout/reftests/abs-pos/table-header-group-4.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + width: 300px; + height: 300px; + background-color: blue; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + top: 200px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should not touch the blue square. + <table> + <colgroup> + <col style="width: 15%"> + <col> + </colgroup> + <thead> + <tr> + <td></td> + <td></td> + </tr> + </thead> + <thead id="rel"> + <tr> + <td></td> + <td> + <div id="abs"></div> + </td> + </tr> + </thead> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-header-group-5.html b/layout/reftests/abs-pos/table-header-group-5.html new file mode 100644 index 0000000000..a89e52355d --- /dev/null +++ b/layout/reftests/abs-pos/table-header-group-5.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0 + width: 50px; + height: 100px; + border-collapse: collapse; + } + tr { + height: 50px; + } + td { + width: 50px; + margin: 0; + padding: 0; + } + tfoot { + height: 50%; + } + #rel { + position: relative; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 100px; + height: 100px; + overflow: visible; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div id="bottomright"> + <table> + <thead id="rel"> + <tr> + <td> + <div class="abs"></div> + </td> + </tr> + </thead> + <tfoot> + <tr></tr> + </tfoot> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-header-group-6.html b/layout/reftests/abs-pos/table-header-group-6.html new file mode 100644 index 0000000000..27f10361a4 --- /dev/null +++ b/layout/reftests/abs-pos/table-header-group-6.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0; + width: 25px; + height: 50px; + border-collapse: collapse; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + overflow: visible; + background-color: blue; + } + </style> + </head> + <body> + The green square should not overlap the blue square. + <div id="bottomright"> + <table> + <thead id="rel"> + <tr style="height: 50%"> + <td></td> + <td></td> + </tr> + <tr> + <td> + <div id="abs"></div> + </td> + <td></td> + </tr> + </thead> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-header-group-7.html b/layout/reftests/abs-pos/table-header-group-7.html new file mode 100644 index 0000000000..748178014b --- /dev/null +++ b/layout/reftests/abs-pos/table-header-group-7.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0; + width: 25px; + height: 50px; + border-collapse: collapse; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + overflow: visible; + background-color: blue; + } + </style> + </head> + <body> + The green square should not overlap the blue square. + <div id="bottomright"> + <table> + <colgroup> + <col style="width: 20%"> + <col> + </colgroup> + <thead id="rel"> + <tr> + <td></td> + <td></td> + </tr> + <tr> + <td> + <div id="abs"></div> + </td> + <td></td> + </tr> + </thead> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-internal-1-ref.html b/layout/reftests/abs-pos/table-internal-1-ref.html new file mode 100644 index 0000000000..34b141c18c --- /dev/null +++ b/layout/reftests/abs-pos/table-internal-1-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 2px; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div id="rel"> + <div class="abs"></div> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-internal-2-ref.html b/layout/reftests/abs-pos/table-internal-2-ref.html new file mode 100644 index 0000000000..308935ede0 --- /dev/null +++ b/layout/reftests/abs-pos/table-internal-2-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 2px; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div style="position: relative"> + <div id="rel"> + <div class="abs"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-internal-3-ref.html b/layout/reftests/abs-pos/table-internal-3-ref.html new file mode 100644 index 0000000000..fbf74508d3 --- /dev/null +++ b/layout/reftests/abs-pos/table-internal-3-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + width: 300px; + height: 300px; + background-color: blue; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should not touch the blue square. + <table> + <tr> + <td></td> + <td></td> + </tr> + <tr style="height: 100%"> + <td></td> + <td></td> + </tr> + <tr> + <td> + <div id="rel"> + <div id="abs"></div> + </div> + </td> + <td></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-internal-4-ref.html b/layout/reftests/abs-pos/table-internal-4-ref.html new file mode 100644 index 0000000000..9180ba705f --- /dev/null +++ b/layout/reftests/abs-pos/table-internal-4-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + width: 300px; + height: 300px; + background-color: blue; + } + td, div { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + height: 1px; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + top: 200.5px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should not touch the blue square. + <table> + <colgroup> + <col style="width: 15%"> + <col> + </colgroup> + <tr> + <td></td> + <td></td> + </tr> + <tr> + <td> + <div id="rel"> + <div id="abs"></div> + </div> + </td> + <td></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-internal-5-ref.html b/layout/reftests/abs-pos/table-internal-5-ref.html new file mode 100644 index 0000000000..fdf09d8fdf --- /dev/null +++ b/layout/reftests/abs-pos/table-internal-5-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #adjusted-abs { + bottom: 50px; + right: 50px; + } + #bad { + background-color: blue; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + overflow: visible; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div id="bottomright"> + <div id="rel"> + <div class="abs" id="adjusted-abs"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-internal-6-ref.html b/layout/reftests/abs-pos/table-internal-6-ref.html new file mode 100644 index 0000000000..704776dc59 --- /dev/null +++ b/layout/reftests/abs-pos/table-internal-6-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0; + width: 50px; + height: 50px; + border-collapse: collapse; + background-color: blue; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + overflow: visible; + background-color: red; + } + </style> + </head> + <body> + The green square should not overlap the blue square. + <div id="bottomright"> + <table> + <tr> + <td></td> + <td></td> + </tr> + <tr style="height: 100%"> + <td></td> + <td></td> + </tr> + <tr> + <td> + <div id="rel"> + <div id="abs"></div> + </div> + </td> + <td></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-internal-7-ref.html b/layout/reftests/abs-pos/table-internal-7-ref.html new file mode 100644 index 0000000000..eee0ae05af --- /dev/null +++ b/layout/reftests/abs-pos/table-internal-7-ref.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0; + width: 50px; + height: 50px; + border-collapse: collapse; + background-color: blue; + } + td { + margin: 0; + padding: 0; + height: 25px; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 10px; + width: 50px; + height: 50px; + background-color: green; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + overflow: visible; + background-color: red; + } + </style> + </head> + <body> + The green square should not overlap the blue square. + <div id="bottomright"> + <table> + <colgroup> + <col style="width: 20%"> + <col> + </colgroup> + <tr> + <td></td> + <td></td> + </tr> + <tr> + <td> + <div id="rel" style="height: 25px"> + <div id="abs"></div> + </div> + </td> + <td></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-internal-8-ref.html b/layout/reftests/abs-pos/table-internal-8-ref.html new file mode 100644 index 0000000000..3bff829deb --- /dev/null +++ b/layout/reftests/abs-pos/table-internal-8-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #good { + background-color: green; + } + .abs { + position: fixed; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should completely cover the red square. + <div class="abs" id="good"></div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-print-1-ref.html b/layout/reftests/abs-pos/table-print-1-ref.html new file mode 100644 index 0000000000..c9d94add71 --- /dev/null +++ b/layout/reftests/abs-pos/table-print-1-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-paged"> + <head> + <style> + #rel { + position: relative; + margin: 2px; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + .m { height:1.4in; } + .b { border:1px solid; } + </style> + </head> + <body> + <div class="m"></div> + <div id="rel"><div class="abs b"></div></div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-1.html b/layout/reftests/abs-pos/table-row-1.html new file mode 100644 index 0000000000..6caf394e4b --- /dev/null +++ b/layout/reftests/abs-pos/table-row-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 0; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <table> + <tr id="rel"> + <td> + <div class="abs"></div> + </td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-2.html b/layout/reftests/abs-pos/table-row-2.html new file mode 100644 index 0000000000..ef9a6f5d71 --- /dev/null +++ b/layout/reftests/abs-pos/table-row-2.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 0; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div style="position: relative"> + <table> + <tr id="rel"> + <td> + <div class="abs"></div> + </td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-3.html b/layout/reftests/abs-pos/table-row-3.html new file mode 100644 index 0000000000..fbb2e77ec9 --- /dev/null +++ b/layout/reftests/abs-pos/table-row-3.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + width: 300px; + height: 300px; + background-color: blue; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should not touch the blue square. + <table> + <tr> + <td></td> + <td></td> + </tr> + <tr style="height: 100%"> + <td></td> + <td></td> + </tr> + <tr id="rel"> + <td></td> + <td> + <div id="abs"></div> + </td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-4.html b/layout/reftests/abs-pos/table-row-4.html new file mode 100644 index 0000000000..8785e0752f --- /dev/null +++ b/layout/reftests/abs-pos/table-row-4.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + width: 300px; + height: 300px; + background-color: blue; + } + td, div { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + top: 200px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should not touch the blue square. + <table> + <colgroup> + <col style="width: 15%"> + <col> + </colgroup> + <tr> + <td></td> + <td></td> + </tr> + <tr id="rel"> + <td></td> + <td> + <div id="abs"></div> + </td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-5.html b/layout/reftests/abs-pos/table-row-5.html new file mode 100644 index 0000000000..e53f280b72 --- /dev/null +++ b/layout/reftests/abs-pos/table-row-5.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0 + width: 50px; + height: 100px; + border-collapse: collapse; + } + tr { + height: 50px; + } + td { + width: 50px; + margin: 0; + padding: 0; + } + #rel { + position: relative; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 100px; + height: 100px; + overflow: visible; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div id="bottomright"> + <table> + <tr id="rel"> + <td> + <div class="abs"></div> + </td> + </tr> + <tr></tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-6.html b/layout/reftests/abs-pos/table-row-6.html new file mode 100644 index 0000000000..361a4698f9 --- /dev/null +++ b/layout/reftests/abs-pos/table-row-6.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0; + width: 25px; + height: 50px; + border-collapse: collapse; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + overflow: visible; + background-color: blue; + } + </style> + </head> + <body> + The green square should not overlap the blue square. + <div id="bottomright"> + <table> + <tr style="height: 50%"> + <td></td> + <td></td> + </tr> + <tr id="rel"> + <td> + <div id="abs"></div> + </td> + <td></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-7.html b/layout/reftests/abs-pos/table-row-7.html new file mode 100644 index 0000000000..37ec4b6211 --- /dev/null +++ b/layout/reftests/abs-pos/table-row-7.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0; + width: 25px; + height: 50px; + border-collapse: collapse; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + overflow: visible; + background-color: blue; + } + </style> + </head> + <body> + The green square should not overlap the blue square. + <div id="bottomright"> + <table> + <colgroup> + <col style="width: 20%"> + <col> + </colgroup> + <tr> + <td></td> + <td></td> + </tr> + <tr id="rel"> + <td> + <div id="abs"></div> + </td> + <td></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-group-1.html b/layout/reftests/abs-pos/table-row-group-1.html new file mode 100644 index 0000000000..9f5072d762 --- /dev/null +++ b/layout/reftests/abs-pos/table-row-group-1.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 0; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <table> + <tbody id="rel"> + <tr> + <td> + <div class="abs"></div> + </td> + </tr> + </tbody> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-group-2.html b/layout/reftests/abs-pos/table-row-group-2.html new file mode 100644 index 0000000000..619a8cc4d6 --- /dev/null +++ b/layout/reftests/abs-pos/table-row-group-2.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #rel { + position: relative; + margin: 0; + padding: 0; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div style="position: relative"> + <table> + <tbody id="rel"> + <tr> + <td> + <div class="abs"></div> + </td> + </tr> + </tbody> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-group-3.html b/layout/reftests/abs-pos/table-row-group-3.html new file mode 100644 index 0000000000..d5d6686b15 --- /dev/null +++ b/layout/reftests/abs-pos/table-row-group-3.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + width: 300px; + height: 300px; + background-color: blue; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should not touch the blue square. + <table> + <thead> + <tr> + <td></td> + <td></td> + </tr> + <tr style="height: 100%"> + <td></td> + <td></td> + </tr> + </thead> + <tbody id="rel"> + <tr> + <td></td> + <td> + <div id="abs"></div> + </td> + </tr> + </tbody> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-group-4.html b/layout/reftests/abs-pos/table-row-group-4.html new file mode 100644 index 0000000000..c8430060c2 --- /dev/null +++ b/layout/reftests/abs-pos/table-row-group-4.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + width: 300px; + height: 300px; + background-color: blue; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + top: 200px; + left: 25px; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + The green square should not touch the blue square. + <table> + <colgroup> + <col style="width: 15%"> + <col> + </colgroup> + <thead> + <tr> + <td></td> + <td></td> + </tr> + </thead> + <tbody id="rel"> + <tr> + <td></td> + <td> + <div id="abs"></div> + </td> + </tr> + </tbody> + </table> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-group-5.html b/layout/reftests/abs-pos/table-row-group-5.html new file mode 100644 index 0000000000..b9c2da7361 --- /dev/null +++ b/layout/reftests/abs-pos/table-row-group-5.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0 + width: 50px; + height: 100px; + border-collapse: collapse; + } + tr { + height: 50px; + } + td { + width: 50px; + margin: 0; + padding: 0; + } + tfoot { + height: 50%; + } + #rel { + position: relative; + } + .abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bad { + background-color: blue; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 100px; + height: 100px; + overflow: visible; + } + </style> + </head> + <body> + The green square should not completely cover the blue square. + <div class="abs" id="bad"></div> + <div id="bottomright"> + <table> + <tbody id="rel"> + <tr> + <td> + <div class="abs"></div> + </td> + </tr> + </tbody> + <tfoot> + <tr></tr> + </tfoot> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-group-6.html b/layout/reftests/abs-pos/table-row-group-6.html new file mode 100644 index 0000000000..c954668541 --- /dev/null +++ b/layout/reftests/abs-pos/table-row-group-6.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0; + width: 25px; + height: 50px; + border-collapse: collapse; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + overflow: visible; + background-color: blue; + } + </style> + </head> + <body> + The green square should not overlap the blue square. + <div id="bottomright"> + <table> + <tbody id="rel"> + <tr style="height: 50%"> + <td></td> + <td></td> + </tr> + <tr> + <td> + <div id="abs"></div> + </td> + <td></td> + </tr> + </tbody> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/abs-pos/table-row-group-7.html b/layout/reftests/abs-pos/table-row-group-7.html new file mode 100644 index 0000000000..a4c720ce3d --- /dev/null +++ b/layout/reftests/abs-pos/table-row-group-7.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> + <head> + <style> + table { + margin: 0; + padding: 0; + width: 25px; + height: 50px; + border-collapse: collapse; + } + td { + margin: 0; + padding: 0; + } + #rel { + position: relative; + margin: 0; + padding: 0; + } + #abs { + position: absolute; + margin: 0; + padding: 0; + bottom: 25px; + right: 25px; + width: 50px; + height: 50px; + background-color: green; + } + #bottomright { + position: absolute; + margin: 0; + padding: 0; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + overflow: visible; + background-color: blue; + } + </style> + </head> + <body> + The green square should not overlap the blue square. + <div id="bottomright"> + <table> + <colgroup> + <col style="width: 20%"> + <col> + </colgroup> + <tbody id="rel"> + <tr> + <td></td> + <td></td> + </tr> + <tr> + <td> + <div id="abs"></div> + </td> + <td></td> + </tr> + </tbody> + </table> + </div> + </body> +</html> |