Bug 477462. Add many margin-collapsing reftests. r+sr=dbaron

--HG--
extra : rebase_source : 7ae1e9d247225b11cf6468bd0334ccd80f86db8c
This commit is contained in:
Daniel.S 2009-04-25 20:50:57 +12:00
parent 5ad302fb3b
commit a0e84ca6c3
95 changed files with 2474 additions and 0 deletions

View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<!-- The interaction of "static position" with margin collapsing is not well
defined. In CSS 2.1, there is no hint regarding the expected rendering,
so this test may turn out invalid. -->
<style type="text/css">
#a {
height: 20px;
background-color: red;
margin-bottom: 20px;
}
#b {
height: 20px;
background-color: green;
}
#c {
width: 20px; height: 20px;
background-color: blue;
position: relative;
top: -10px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<!-- The interaction of "static position" with margin collapsing is not well
defined. In CSS 2.1, there is no hint regarding the expected rendering,
so this test may turn out invalid. -->
<style type="text/css">
#a {
height: 20px;
background-color: red;
margin-bottom: 20px;
}
#b {
width: 20px; height: 20px;
background-color: blue;
margin-top: 10px;
margin-bottom: 10px;
position: absolute;
}
#c {
height: 20px;
background-color: green;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
width: 200px;
position: absolute;
top: 20px; left: 20px;
padding-top: 40px;
padding-bottom: 40px;
}
#b {
background-color: blue;
height: 100px;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
width: 200px;
position: absolute;
top: 20px; left: 20px;
}
#b {
background-color: blue;
margin-top: 40px;
margin-bottom: 40px;
height: 100px;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 20px;
}
#b {
float: left;
height: 100px; width: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 10px;
}
#b {
float: left;
height: 100px; width: 50px;
background-color: blue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 20px;
}
#b {
float: right;
height: 100px; width: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 10px;
}
#b {
float: right;
height: 100px; width: 50px;
background-color: blue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
}
#b {
float: left;
width: 50px;
background-color: blue;
margin-top: 20px;
padding-top: 40px;
padding-bottom: 40px;
}
#b div {
height: 20px;
background-color: red;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
}
#b {
float: left;
width: 50px;
background-color: blue;
margin-top: 20px;
}
#b div {
height: 20px;
background-color: red;
margin-top: 40px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
}
#b {
float: right;
width: 50px;
background-color: blue;
margin-top: 20px;
padding-top: 40px;
padding-bottom: 40px;
}
#b div {
height: 20px;
background-color: red;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
}
#b {
float: right;
width: 50px;
background-color: blue;
margin-top: 20px;
}
#b div {
height: 20px;
background-color: red;
margin-top: 40px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
margin: 0; padding: 30px 20px;
background-color: green;
}
body {
margin: 0; padding: 0 30px;
background-color: red;
}
div {
background-color: blue;
height: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
margin: 0; padding: 0;
background-color: green;
}
body {
margin: 20px; padding: 0;
background-color: red;
}
div {
margin: 30px;
background-color: blue;
height: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
}
#b {
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 20px;
}
#b {
height: 20px;
background-color: blue;
margin-top: -20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: -20px;
}
#b {
height: 20px;
background-color: blue;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#b {
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
}
#b {
height: 20px;
background-color: blue;
margin-top: -20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: -20px;
}
#b {
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a, #c {
background-color: green;
height: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a, #c {
background-color: green;
height: 20px;
}
#b {
margin-top: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a, #c {
background-color: green;
height: 20px;
}
#b {
margin-top: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a, #c {
background-color: green;
height: 20px;
}
#b {
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
height: 20px;
margin-bottom: 40px;
}
#c {
background-color: green;
height: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
height: 20px;
margin-bottom: 10px;
}
#b {
margin-top: 20px;
margin-bottom: 30px;
}
#c {
background-color: green;
height: 20px;
margin-top: 40px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
height: 20px;
margin-bottom: 40px;
}
#b {
margin-top: 10px;
margin-bottom: 20px;
}
#c {
background-color: green;
height: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
height: 20px;
margin-bottom: 30px;
}
#b {
margin-top: 40px;
margin-bottom: 10px;
}
#c {
background-color: green;
height: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
height: 20px;
margin-bottom: 20px;
}
#b {
margin-top: 30px;
margin-bottom: 40px;
}
#c {
background-color: green;
height: 20px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 30px;
}
#b {
background-color: blue;
height: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
}
#b {
background-color: green;
margin-top: 10px;
}
#c {
margin-top: 20px;
margin-bottom: 30px;
}
#d {
height: 20px;
background-color: blue;
margin-top: 15px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b">
<div id="c"></div>
<div id="d"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
height: 20px;
margin-bottom: 40px;
}
#b {
height: 20px;
background-color: green;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
}
#b {
height: 20px;
margin-bottom: 10px;
}
#c {
margin-top: 30px;
margin-bottom: 40px;
}
#d {
height: 20px;
background-color: green;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
<div id="d"></div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 30px;
height: 20px;
}
#b {
background-color: green;
height: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 10px;
}
#a div {
height: 20px;
margin-bottom: 20px;
}
#b {
height: 20px;
background-color: green;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="a">
<div></div>
</div>
<div id="b">
</div>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 10px;
}
#a div {
height: 20px;
margin-bottom: 30px;
}
#b {
height: 20px;
background-color: green;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="a">
<div></div>
</div>
<div id="b">
</div>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 20px;
}
#a div {
height: 20px;
margin-bottom: 10px;
}
#b {
height: 20px;
background-color: green;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="a">
<div></div>
</div>
<div id="b">
</div>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 20px;
}
#a div {
height: 20px;
margin-bottom: 30px;
}
#b {
height: 20px;
background-color: green;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a">
<div></div>
</div>
<div id="b">
</div>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 30px;
}
#a div {
height: 20px;
margin-bottom: 10px;
}
#b {
height: 20px;
background-color: green;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="a">
<div></div>
</div>
<div id="b">
</div>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 30px;
}
#a div {
height: 20px;
margin-bottom: 20px;
}
#b {
height: 20px;
background-color: green;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a">
<div></div>
</div>
<div id="b">
</div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 30px;
height: 20px;
}
#b {
background-color: green;
height: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 10px;
height: 20px;
}
#b {
background-color: green;
margin-top: 20px;
}
#b div {
height: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="a">
</div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 10px;
height: 20px;
}
#b {
background-color: green;
margin-top: 30px;
}
#b div {
height: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="a">
</div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 20px;
height: 20px;
}
#b {
background-color: green;
margin-top: 10px;
}
#b div {
height: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="a">
</div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 20px;
height: 20px;
}
#b {
background-color: green;
margin-top: 30px;
}
#b div {
height: 20px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a">
</div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 30px;
height: 20px;
}
#b {
background-color: green;
margin-top: 10px;
}
#b div {
height: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="a">
</div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 30px;
height: 20px;
}
#b {
background-color: green;
margin-top: 20px;
}
#b div {
height: 20px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a">
</div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 40px;
height: 20px;
}
#b {
background-color: green;
height: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 10px;
}
#a div {
height: 20px;
margin-bottom: 20px;
}
#b {
background-color: green;
margin-top: 30px;
}
#b div {
height: 20px;
margin-top: 40px;
}
</style>
</head>
<body>
<div id="a">
<div></div>
</div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 40px;
}
#a div {
height: 20px;
margin-bottom: 10px;
}
#b {
background-color: green;
margin-top: 20px;
}
#b div {
height: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="a">
<div></div>
</div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 30px;
}
#a div {
height: 20px;
margin-bottom: 40px;
}
#b {
background-color: green;
margin-top: 10px;
}
#b div {
height: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="a">
<div></div>
</div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
margin-bottom: 20px;
}
#a div {
height: 20px;
margin-bottom: 30px;
}
#b {
background-color: green;
margin-top: 40px;
}
#b div {
height: 20px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a">
<div></div>
</div>
<div id="b">
<div></div>
</div>
</body>
</html>

View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.a {
height: 20px;
background-color: green;
}
#b {
height: 200px;
margin-top: 40px;
margin-bottom: 40px;
background-color: blue;
}
</style>
</head>
<body>
<div class="a"></div>
<div id="b"></div>
<div class="a"></div>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.a {
height: 20px;
background-color: green;
}
#b {
margin-top: 20px;
margin-bottom: 20px;
background-color: red;
overflow: visible;
}
#c {
height: 200px;
background-color: blue;
margin-top: 40px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<div class="a"></div>
<div id="b">
<div id="c"></div>
</div>
<div class="a"></div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.a {
height: 20px;
background-color: green;
}
#b {
height: 160px;
margin-top: 20px;
margin-bottom: 20px;
background-color: green;
padding-top: 40px;
}
#c {
height: 160px;
background-color: blue;
}
</style>
</head>
<body>
<div class="a"></div>
<div id="b">
<div id="c"></div>
</div>
<div class="a"></div>
</body>
</html>

View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.a {
height: 20px;
background-color: green;
}
#b {
height: 200px;
margin-top: 20px;
margin-bottom: 20px;
background-color: green;
overflow: hidden;
}
#c {
height: 160px;
background-color: blue;
margin-top: 40px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<div class="a"></div>
<div id="b">
<div id="c"></div>
</div>
<div class="a"></div>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.a {
height: 20px;
background-color: green;
}
#b {
height: 120px;
margin-top: 20px;
margin-bottom: 20px;
padding: 40px 0;
background-color: green;
overflow-y: scroll;
}
#c {
height: 160px;
background-color: blue;
}
</style>
</head>
<body>
<div class="a"></div>
<div id="b">
<div id="c"></div>
</div>
<div class="a"></div>
</body>
</html>

View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.a {
height: 20px;
background-color: green;
}
#b {
height: 200px;
margin-top: 20px;
margin-bottom: 20px;
background-color: green;
overflow-y: scroll;
}
#c {
height: 160px;
background-color: blue;
margin-top: 40px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<div class="a"></div>
<div id="b">
<div id="c"></div>
</div>
<div class="a"></div>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.a {
height: 20px;
background-color: green;
}
#b {
height: 120px;
margin-top: 20px;
margin-bottom: 20px;
padding: 40px 0;
background-color: green;
overflow: auto;
}
#c {
height: 160px;
background-color: blue;
}
</style>
</head>
<body>
<div class="a"></div>
<div id="b">
<div id="c"></div>
</div>
<div class="a"></div>
</body>
</html>

View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.a {
height: 20px;
background-color: green;
}
#b {
height: 200px;
margin-top: 20px;
margin-bottom: 20px;
background-color: green;
overflow: auto;
}
#c {
height: 160px;
background-color: blue;
margin-top: 40px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<div class="a"></div>
<div id="b">
<div id="c"></div>
</div>
<div class="a"></div>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 20px;
}
#b {
background-color: green;
height: 40px;
}
#c {
height: 20px;
background-color: green;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 10px;
}
#b {
overflow: visible;
background-color: green;
height: 40px;
margin-top: 20px;
margin-bottom: 20px;
}
#c {
height: 20px;
background-color: green;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 10px;
}
#b {
overflow: hidden;
background-color: green;
height: 40px;
margin-top: 20px;
margin-bottom: 20px;
}
#c {
height: 20px;
background-color: green;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 20px;
}
#b {
background-color: green;
height: 40px;
overflow-y: scroll;
}
#c {
height: 20px;
background-color: green;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 10px;
}
#b {
overflow-y: scroll;
background-color: green;
height: 40px;
margin-top: 20px;
margin-bottom: 20px;
}
#c {
height: 20px;
background-color: green;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 10px;
}
#b {
overflow: auto;
background-color: green;
height: 40px;
margin-top: 20px;
margin-bottom: 20px;
}
#c {
height: 20px;
background-color: green;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 80px; width: 200px;
background-color: green;
margin-bottom: 50px;
}
#b {
height: 70px; width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 200px; width: 200px;
}
#b {
height: 50px;
background-color: green;
padding-top: 15%;
margin-bottom: 10%;
}
#c {
height: 30px;
background-color: blue;
padding-bottom: 20%;
margin-top: 25%;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
margin: 40px; padding: 0;
background-color: green;
}
body {
margin: 0px; padding: 0;
background-color: blue;
height: 20px;
}
</style>
</head>
<body>
</body>
</html>

View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
margin: 20px; padding: 0;
background-color: green;
}
body {
margin: 20px; padding: 0;
background-color: blue;
height: 20px;
}
</style>
</head>
<body>
</body>
</html>

View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
margin: 0; padding: 40px 20px;
background-color: green;
}
body {
margin: 0; padding: 0 20px;
background-color: red;
}
div {
background-color: blue;
height: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
margin: 20px; padding: 0;
background-color: green;
}
body {
margin: 0; padding: 0;
background-color: red;
}
div {
margin: 20px;
background-color: blue;
height: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 20px;
}
#b {
height: 20px;
background-color: green;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 10px;
}
#b {
height: 20px;
background-color: green;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 20px;
}
#b {
height: 20px;
background-color: green;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 20px;
}
#b {
height: 20px;
background-color: green;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: red;
margin-bottom: 20px;
}
#b {
height: 20px;
background-color: green;
margin-bottom: 20px;
}
#c {
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: red;
margin-bottom: 20px;
}
#b {
height: 20px;
background-color: blue;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
top: 40px;
}
#c {
height: 20px;
background-color: green;
margin-top: 20px;
position: relative;
top: -40px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 20px;
}
#b {
height: 10px;
background-color: red;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
}
#b {
background-color: green;
margin-top: 10px;
}
#c {
margin-top: 20px;
margin-bottom: 30px;
height: 0;
}
#d {
height: 10px;
background-color: red;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b">
<div id="c">
<div id="d"></div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
margin-bottom: 20px;
}
#b {
background-color: red;
padding-top: 10px;
}
#c {
background-color: green;
padding-top: 20px;
}
#d {
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b">
<div id="c">
<div id="d"></div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
height: 20px;
background-color: green;
}
#b {
background-color: green;
margin-top: 10px;
}
#c {
margin-top: 20px;
margin-bottom: 30px;
height: 0;
}
#d {
height: 10px;
background-color: red;
}
#e {
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b">
<div id="c">
<div id="d"></div>
</div>
<div id="e"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
height: 50px;
}
#b {
height: 10px; width: 100px;
background-color: red;
margin-bottom: 30px;
}
#c {
height: 20px;
background-color: green;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color: green;
}
#b {
height: 20px;
}
#c {
margin-top: 30px;
margin-bottom: 40px;
height: 0;
}
#d {
height: 10px; width: 100px;
background-color: red;
}
#e {
height: 20px;
background-color: green;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
<div id="c">
<div id="d"></div>
</div>
</div>
<div id="e"></div>
</body>
</html>

View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a, #c {
height: 20px;
background-color: green;
margin-bottom: 30px;
}
#b {
height: 10px; width: 100px;
background-color: red;
margin-top: 30px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#b {
height: 20px;
background-color: green;
}
#c {
margin-top: 30px;
margin-bottom: 40px;
height: 0;
}
#d {
height: 10px; width: 100px;
background-color: red;
}
#e {
height: 20px;
background-color: green;
}
</style>
</head>
<body>
<div id="b"></div>
<div id="a">
<div id="c">
<div id="d"></div>
</div>
</div>
<div id="e"></div>
</body>
</html>

View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
margin-top: 0;
}
#a {
margin-top: 30px;
height: 10px; width: 100px;
background-color: red;
}
#b {
height: 20px;
background-color: green;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
margin-top: 0;
}
#a {
background-color: green;
}
#c {
margin-top: 30px;
margin-bottom: 40px;
height: 0;
}
#d {
height: 10px; width: 100px;
background-color: red;
}
#e {
height: 20px;
background-color: green;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
<div id="c">
<div id="d"></div>
</div>
</div>
<div id="e"></div>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
display: inline-block;
background-color: green;
height: 40px;
padding-top: 20px;
padding-bottom: 20px;
}
#b {
display: inline-block;
height: 40px; width: 200px;
background-color: blue;
vertical-align: bottom;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
display: inline-block;
background-color: green;
}
#b {
display: inline-block;
height: 40px; width: 200px;
background-color: blue;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
width: 200px;
background-color: green;
}
#b, #c {
display: inline-block;
height: 20px; width: 200px;
background-color: blue;
vertical-align: bottom;
}
#b {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
width: 200px;
background-color: green;
}
#b, #c {
display: inline-block;
height: 20px; width: 200px;
background-color: blue;
vertical-align: bottom;
}
#b {
margin-bottom: 5px;
}
#c {
margin-top: 15px;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
width: 200px;
background-color: green;
}
#b, #c {
display: inline-block;
height: 20px; width: 200px;
background-color: blue;
vertical-align: bottom;
}
#b {
margin-bottom: 15px;
}
#c {
margin-top: 5px;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
width: 200px;
background-color: green;
}
#b, #c {
display: inline-block;
height: 20px; width: 200px;
background-color: blue;
vertical-align: bottom;
}
#b {
margin-bottom: 10px;
}
#c {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,62 @@
== block-sibling-1a.html block-sibling-1-ref.html
== block-sibling-1b.html block-sibling-1-ref.html
== block-sibling-1c.html block-sibling-1-ref.html
== block-sibling-2.html block-sibling-2-ref.html
== block-negative-1a.html block-negative-1-ref.html
== block-negative-1b.html block-negative-1-ref.html
== block-negative-2a.html block-negative-2-ref.html
== block-negative-2b.html block-negative-2-ref.html
== block-non-sibling-1a.html block-non-sibling-1-ref.html
== block-non-sibling-1b.html block-non-sibling-1-ref.html
== block-non-sibling-1c.html block-non-sibling-1-ref.html
== block-non-sibling-1d.html block-non-sibling-1-ref.html
== block-non-sibling-1e.html block-non-sibling-1-ref.html
== block-non-sibling-1f.html block-non-sibling-1-ref.html
== block-non-sibling-2a.html block-non-sibling-2-ref.html
== block-non-sibling-2b.html block-non-sibling-2-ref.html
== block-non-sibling-2c.html block-non-sibling-2-ref.html
== block-non-sibling-2d.html block-non-sibling-2-ref.html
== block-non-sibling-2e.html block-non-sibling-2-ref.html
== block-non-sibling-2f.html block-non-sibling-2-ref.html
== block-non-sibling-3a.html block-non-sibling-3-ref.html
== block-non-sibling-3b.html block-non-sibling-3-ref.html
== block-non-sibling-3c.html block-non-sibling-3-ref.html
== block-non-sibling-3d.html block-non-sibling-3-ref.html
== block-float-1a.html block-float-1a-ref.html
== block-float-1b.html block-float-1b-ref.html
== block-float-2a.html block-float-2a-ref.html
== block-float-2b.html block-float-2b-ref.html
== block-overflow-1.html block-overflow-1-ref.html
== block-overflow-2.html block-overflow-2-ref.html
== block-overflow-3.html block-overflow-3-ref.html
== block-overflow-4.html block-overflow-4-ref.html
== block-overflow-5a.html block-overflow-5-ref.html
== block-overflow-5b.html block-overflow-5-ref.html
== block-overflow-5c.html block-overflow-5c-ref.html
== block-overflow-5d.html block-overflow-5-ref.html
== block-abs-pos-1.html block-abs-pos-1-ref.html
== block-abs-pos-2.html block-abs-pos-2-ref.html
== inline-block-sibling-1a.html inline-block-sibling-1-ref.html
== inline-block-sibling-1b.html inline-block-sibling-1-ref.html
== inline-block-sibling-1c.html inline-block-sibling-1-ref.html
== inline-block-child-1.html inline-block-child-1-ref.html
== block-no-content-1a.html block-no-content-1-ref.html
== block-no-content-1b.html block-no-content-1-ref.html
== block-no-content-1c.html block-no-content-1-ref.html
== block-no-content-2a.html block-no-content-2-ref.html
== block-no-content-2b.html block-no-content-2-ref.html
== block-no-content-2c.html block-no-content-2-ref.html
== block-no-content-2d.html block-no-content-2-ref.html
== block-no-content-3.html block-no-content-3-ref.html
== block-zero-height-1a.html block-zero-height-1a-ref.html
== block-zero-height-1b.html block-zero-height-1b-ref.html
== block-no-content-4.html block-no-content-4-ref.html
== block-zero-height-2a.html block-zero-height-2a-ref.html
== block-zero-height-2b.html block-zero-height-2b-ref.html
== block-zero-height-2c.html block-zero-height-2c-ref.html
# missing tests of clearing elements after a float.
== block-root-1a.html block-root-1a-ref.html
== block-root-1b.html block-root-1b-ref.html
== block-html-body-1.html block-html-body-1-ref.html
# missing tests of min-height, max-height, etc.
== block-used-value-1.html block-used-value-1-ref.html