import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo

This commit is contained in:
Roy Tam 2018-01-19 03:59:58 +08:00
commit dcd9973243
150858 changed files with 23884658 additions and 0 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -0,0 +1,31 @@
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {
color: #222;
padding: 10px;
border: 2px solid;
position:relative;
width:10em;
-moz-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>

View file

@ -0,0 +1,69 @@
# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
== font-size-wrap.html font-size-wrap.html
== abs-pos-auto-margin-1.html abs-pos-auto-margin-1.html
fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated&&!azureSkia,73,1) == auto-offset-inline-block-1.html auto-offset-inline-block-1.html
# bug 696670
== fieldset-1.html fieldset-1.html
== table-1.html table-1.html
== table-2.html table-2.html
== table-3.html table-3.html
== table-caption-1.html table-caption-1.html
== table-caption-2.html table-caption-2.html
== table-caption-3.html table-caption-3.html
== table-caption-4.html table-caption-4.html
skip-if((B2G&&browserIsRemote)||Mulet) == table-caption-5.html table-caption-5.html
# TODO: change to == when bug 967870 is is
# Initial mulet triage: parity with B2G/B2G Desktop
== table-cell-1.html table-cell-1.html
== table-cell-2.html table-cell-2.html
== table-cell-3.html table-cell-3.html
== table-cell-4.html table-cell-4.html
== table-cell-5.html table-cell-5.html
== table-cell-6.html table-cell-6.html
== table-cell-7.html table-cell-7.html
skip-if((B2G&&browserIsRemote)||Mulet) == table-cell-8.html table-cell-8.html
# TODO: change to == when bug 967870 is is
# Initial mulet triage: parity with B2G/B2G Desktop
== table-row-1.html table-row-1.html
== table-row-2.html table-row-2.html
== table-row-3.html table-row-3.html
== table-row-4.html table-row-4.html
== table-row-5.html table-row-5.html
== table-row-6.html table-row-6.html
== table-row-7.html table-row-7.html
== table-row-group-1.html table-row-group-1.html
== table-row-group-2.html table-row-group-2.html
== table-row-group-3.html table-row-group-3.html
== table-row-group-4.html table-row-group-4.html
== table-row-group-5.html table-row-group-5.html
== table-row-group-6.html table-row-group-6.html
== table-row-group-7.html table-row-group-7.html
== table-header-group-1.html table-header-group-1.html
== table-header-group-2.html table-header-group-2.html
== table-header-group-3.html table-header-group-3.html
== table-header-group-4.html table-header-group-4.html
== table-header-group-5.html table-header-group-5.html
== table-header-group-6.html table-header-group-6.html
== table-header-group-7.html table-header-group-7.html
# == table-footer-group-1.html table-footer-group-1.html
== table-footer-group-2.html table-footer-group-2.html
== table-footer-group-3.html table-footer-group-3.html
== table-footer-group-4.html table-footer-group-4.html
== table-footer-group-5.html table-footer-group-5.html
== table-footer-group-6.html table-footer-group-6.html
== table-footer-group-7.html table-footer-group-7.html
== continuation-positioned-inline-1.html continuation-positioned-inline-1.html
== continuation-positioned-inline-2.html continuation-positioned-inline-2.html
== scrollframe-1.html scrollframe-1.html
fails == scrollframe-2.html scrollframe-2-ref.html #bug #bug
# Initial mulet triage: parity with B2G/B2G Desktop
fuzzy-if(gtkWidget,1,8) == select-1.html select-1.html
fails fuzzy-if(gtkWidget,1,8) == select-1-dynamic.html select-1-dynamic.html
== select-2.html select-2.html
fuzzy-if(gtkWidget,1,19) fuzzy-if(Android||B2G,17,726) fuzzy-if(asyncPan&&!layersGPUAccelerated,102,98) fuzzy-if(browserIsRemote&&winWidget,102,107) == select-3.html select-3.html
== multi-column-1.html multi-column-1.html
== button-1.html button-1.html
== button-2.html button-2.html
== relative-row-animation-1.html relative-row-animation-1.html
fuzzy-if(Android,12,50) == fixed-pos-auto-offset-1a.html fixed-pos-auto-offset-1a.html
fuzzy-if(Android,12,50) == fixed-pos-auto-offset-1b.html fixed-pos-auto-offset-1b.html

View file

@ -0,0 +1,62 @@
== font-size-wrap.html font-size-wrap-ref.html
== abs-pos-auto-margin-1.html abs-pos-auto-margin-1-ref.html
fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated&&!azureSkia,73,1) == 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
!= table-caption-5.html table-print-1-ref.html # TODO: change to == 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
!= table-cell-8.html table-print-1-ref.html # TODO: change to == 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,1,1) fuzzy-if(Android,9,185) fuzzy-if(asyncPan&&!layersGPUAccelerated,140,144) == scrollframe-2.html scrollframe-2-ref.html #bug 756530
fuzzy-if(gtkWidget,1,8) == select-1.html select-1-ref.html
fuzzy-if(gtkWidget,1,8) == select-1-dynamic.html select-1-ref.html
== select-2.html select-2-ref.html
fuzzy-if(gtkWidget,1,19) fuzzy-if(Android,17,726) fuzzy-if(asyncPan&&!layersGPUAccelerated,110,114) fuzzy-if(browserIsRemote&&winWidget,110,114) == select-3.html select-3-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,12,50) == fixed-pos-auto-offset-1a.html fixed-pos-auto-offset-1-ref.html
fuzzy-if(Android,12,50) == fixed-pos-auto-offset-1b.html fixed-pos-auto-offset-1-ref.html

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<body style="margin: 0; padding: 0;">
<select style="position: fixed; top: 100px; left: 100px;">
<option>foo</option>
<option>bar</option>
</select>
</body>
</html>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html class="reftest-print">
<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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html class="reftest-print">
<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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html class="reftest-print">
<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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 B

View file

@ -0,0 +1,3 @@
<!doctype html>
<title>apng expected</title>
<img src="animated.apng">

View file

@ -0,0 +1 @@
== test.html expected.html

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 B

View file

@ -0,0 +1,6 @@
<!doctype html>
<title>apng test</title>
<picture>
<source type="image/apng" srcset="animated.apng">
<img src="static.png">
</picture>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Reference: Bug 1248913 - Keep background-attachment:fixed image fixed under APZ scrolling even when a background-blend-mode is applied.</title>
<style>
html {
background: radial-gradient(circle 200px at 400px 400px, lime 100px, transparent 0) scroll,
radial-gradient(circle 200px at 400px 300px, blue 100px, transparent 0) scroll
white no-repeat;
background-blend-mode: multiply;
height: 100%;
}
</style>
<div></div>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="1000"
reftest-async-scroll-x="0" reftest-async-scroll-y="100">
<meta charset="utf-8">
<title>Bug 1248913 - Keep background-attachment:fixed image fixed under APZ scrolling even when a background-blend-mode is applied.</title>
<style>
html {
background: radial-gradient(circle 200px at 400px 400px, lime 100px, transparent 0) fixed,
radial-gradient(circle 200px at 400px 400px, blue 100px, transparent 0) scroll
white no-repeat;
background-blend-mode: multiply;
overflow: hidden;
}
body {
height: 4000px;
}
</style>
<div></div>

Some files were not shown because too many files have changed in this diff Show more