diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /layout/reftests/pixel-rounding | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/pixel-rounding')
193 files changed, 8848 insertions, 0 deletions
diff --git a/layout/reftests/pixel-rounding/background-color-base.html b/layout/reftests/pixel-rounding/background-color-base.html new file mode 100644 index 0000000000..812ef64f3a --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-base.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-height-10.html b/layout/reftests/pixel-rounding/background-color-height-10.html new file mode 100644 index 0000000000..cc82977e3e --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-height-10.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="height:11px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-height-4.html b/layout/reftests/pixel-rounding/background-color-height-4.html new file mode 100644 index 0000000000..cdf0bc9bee --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-height-4.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="height:10.4px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-height-5.html b/layout/reftests/pixel-rounding/background-color-height-5.html new file mode 100644 index 0000000000..2a571ff511 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-height-5.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="height:10.5px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-height-6.html b/layout/reftests/pixel-rounding/background-color-height-6.html new file mode 100644 index 0000000000..2dfece438b --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-height-6.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="height:10.6px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-height-top-4.html b/layout/reftests/pixel-rounding/background-color-height-top-4.html new file mode 100644 index 0000000000..c2da4ba41d --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-height-top-4.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10.5px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="top:9.9px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-height-top-5.html b/layout/reftests/pixel-rounding/background-color-height-top-5.html new file mode 100644 index 0000000000..a66274ea8c --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-height-top-5.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10.5px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="top:10px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-height-top-6.html b/layout/reftests/pixel-rounding/background-color-height-top-6.html new file mode 100644 index 0000000000..be28044f52 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-height-top-6.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10.5px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="top:10.1px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-left-10.html b/layout/reftests/pixel-rounding/background-color-left-10.html new file mode 100644 index 0000000000..4778b47013 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-left-10.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="left:11px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-left-4.html b/layout/reftests/pixel-rounding/background-color-left-4.html new file mode 100644 index 0000000000..9fe115f549 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-left-4.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="left:10.4px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-left-5.html b/layout/reftests/pixel-rounding/background-color-left-5.html new file mode 100644 index 0000000000..56b8a876d9 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-left-5.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="left:10.5px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-left-6.html b/layout/reftests/pixel-rounding/background-color-left-6.html new file mode 100644 index 0000000000..4acbb2803e --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-left-6.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="left:10.6px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-left-width-4.html b/layout/reftests/pixel-rounding/background-color-left-width-4.html new file mode 100644 index 0000000000..05d6e43889 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-left-width-4.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 9.5px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="width:10.9px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-left-width-5.html b/layout/reftests/pixel-rounding/background-color-left-width-5.html new file mode 100644 index 0000000000..b9eced013b --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-left-width-5.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 9.5px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="width:11px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-left-width-6.html b/layout/reftests/pixel-rounding/background-color-left-width-6.html new file mode 100644 index 0000000000..27c8162ccc --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-left-width-6.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 9.5px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="width:11.1px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-top-10.html b/layout/reftests/pixel-rounding/background-color-top-10.html new file mode 100644 index 0000000000..0e3f9abdce --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-top-10.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="top:11px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-top-4.html b/layout/reftests/pixel-rounding/background-color-top-4.html new file mode 100644 index 0000000000..a7fd3e484d --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-top-4.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="top:10.4px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-top-5.html b/layout/reftests/pixel-rounding/background-color-top-5.html new file mode 100644 index 0000000000..86397f0497 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-top-5.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="top:10.5px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-top-6.html b/layout/reftests/pixel-rounding/background-color-top-6.html new file mode 100644 index 0000000000..66f7215605 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-top-6.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="top:10.6px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-top-height-4.html b/layout/reftests/pixel-rounding/background-color-top-height-4.html new file mode 100644 index 0000000000..021475fd33 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-top-height-4.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 9.5px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="height:10.9px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-top-height-5.html b/layout/reftests/pixel-rounding/background-color-top-height-5.html new file mode 100644 index 0000000000..a36c833c63 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-top-height-5.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 9.5px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="height:11px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-top-height-6.html b/layout/reftests/pixel-rounding/background-color-top-height-6.html new file mode 100644 index 0000000000..5d0d11671c --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-top-height-6.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 9.5px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="height:11.1px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-width-10.html b/layout/reftests/pixel-rounding/background-color-width-10.html new file mode 100644 index 0000000000..1e5aeedf94 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-width-10.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="width:11px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-width-4.html b/layout/reftests/pixel-rounding/background-color-width-4.html new file mode 100644 index 0000000000..9e9a64d13f --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-width-4.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="width:10.4px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-width-5.html b/layout/reftests/pixel-rounding/background-color-width-5.html new file mode 100644 index 0000000000..0557ca1036 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-width-5.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="width:10.5px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-width-6.html b/layout/reftests/pixel-rounding/background-color-width-6.html new file mode 100644 index 0000000000..947aac8b3a --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-width-6.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="width:10.6px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-width-left-4.html b/layout/reftests/pixel-rounding/background-color-width-left-4.html new file mode 100644 index 0000000000..d68dc270fa --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-width-left-4.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10.5px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="left:9.9px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-width-left-5.html b/layout/reftests/pixel-rounding/background-color-width-left-5.html new file mode 100644 index 0000000000..1a1e75e717 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-width-left-5.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10.5px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="left:10px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-color-width-left-6.html b/layout/reftests/pixel-rounding/background-color-width-left-6.html new file mode 100644 index 0000000000..efaf82e033 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-color-width-left-6.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10.5px; } + +div { background: green; } + +</style> +</head> +<body> +<div style="left:10.1px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-base.html b/layout/reftests/pixel-rounding/background-image-base.html new file mode 100644 index 0000000000..7233e2717d --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-base.html @@ -0,0 +1,72 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10px; } + +div { background: blue; } /* for reference only */ + +div.i1 { top: 10px; } +div.i3 { top: 30px; } +div.i5 { top: 50px; } +div.i25 { top: 70px; } + +div.p1 { left: 10px; } +div.p2 { left: 30px; } +div.p3 { left: 50px; } +div.p4 { left: 70px; } +div.p5 { left: 90px; } +div.p6 { left: 110px; } +div.p7 { left: 130px; } +div.p8 { left: 150px; } +div.p9 { left: 170px; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-height-10-ref.html b/layout/reftests/pixel-rounding/background-image-height-10-ref.html new file mode 100644 index 0000000000..41cd583d24 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-height-10-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 11px; width: 10px; } + +div { background: blue; } /* for reference only */ + +div.i1 { top: 10px; } +div.i3 { top: 30px; } +div.i5 { top: 50px; } +div.i25 { top: 70px; } + +div.p1 { left: 10px; } +div.p2 { left: 30px; } +div.p3 { left: 50px; } +div.p4 { left: 70px; } +div.p5 { left: 90px; } +div.p6 { left: 110px; } +div.p7 { left: 130px; } +div.p8 { left: 150px; } +div.p9 { left: 170px; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-height-4.html b/layout/reftests/pixel-rounding/background-image-height-4.html new file mode 100644 index 0000000000..763e710f0a --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-height-4.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10.4px; width: 10px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-height-5.html b/layout/reftests/pixel-rounding/background-image-height-5.html new file mode 100644 index 0000000000..0c4b3298a3 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-height-5.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10.5px; width: 10px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-height-6.html b/layout/reftests/pixel-rounding/background-image-height-6.html new file mode 100644 index 0000000000..6571ecd477 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-height-6.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10.6px; width: 10px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-height-top-4.html b/layout/reftests/pixel-rounding/background-image-height-top-4.html new file mode 100644 index 0000000000..beff787fba --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-height-top-4.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10.5px; width: 10px; } + +div.i1 { top: 9.9px; background-image: url(blue-1x1.png); } +div.i3 { top: 29.9px; background-image: url(blue-3x3.png); } +div.i5 { top: 49.9px; background-image: url(blue-5x5.png); } +div.i25 { top: 69.9px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-height-top-5.html b/layout/reftests/pixel-rounding/background-image-height-top-5.html new file mode 100644 index 0000000000..0c4b3298a3 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-height-top-5.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10.5px; width: 10px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-height-top-6.html b/layout/reftests/pixel-rounding/background-image-height-top-6.html new file mode 100644 index 0000000000..13907dd00f --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-height-top-6.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10.5px; width: 10px; } + +div.i1 { top: 10.1px; background-image: url(blue-1x1.png); } +div.i3 { top: 30.1px; background-image: url(blue-3x3.png); } +div.i5 { top: 50.1px; background-image: url(blue-5x5.png); } +div.i25 { top: 70.1px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-left-10-ref.html b/layout/reftests/pixel-rounding/background-image-left-10-ref.html new file mode 100644 index 0000000000..e661856798 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-left-10-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10px; } + +div { background: blue; } /* for reference only */ + +div.i1 { top: 10px; } +div.i3 { top: 30px; } +div.i5 { top: 50px; } +div.i25 { top: 70px; } + +div.p1 { left: 11px; } +div.p2 { left: 31px; } +div.p3 { left: 51px; } +div.p4 { left: 71px; } +div.p5 { left: 91px; } +div.p6 { left: 111px; } +div.p7 { left: 131px; } +div.p8 { left: 151px; } +div.p9 { left: 171px; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-left-4.html b/layout/reftests/pixel-rounding/background-image-left-4.html new file mode 100644 index 0000000000..74e09f81ac --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-left-4.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10.4px; background-position: top left; } +div.p2 { left: 30.4px; background-position: top; } +div.p3 { left: 50.4px; background-position: top right; } +div.p4 { left: 70.4px; background-position: left; } +div.p5 { left: 90.4px; background-position: center; } +div.p6 { left: 110.4px; background-position: right; } +div.p7 { left: 130.4px; background-position: bottom left; } +div.p8 { left: 150.4px; background-position: bottom; } +div.p9 { left: 170.4px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-left-5.html b/layout/reftests/pixel-rounding/background-image-left-5.html new file mode 100644 index 0000000000..7c38213436 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-left-5.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10.5px; background-position: top left; } +div.p2 { left: 30.5px; background-position: top; } +div.p3 { left: 50.5px; background-position: top right; } +div.p4 { left: 70.5px; background-position: left; } +div.p5 { left: 90.5px; background-position: center; } +div.p6 { left: 110.5px; background-position: right; } +div.p7 { left: 130.5px; background-position: bottom left; } +div.p8 { left: 150.5px; background-position: bottom; } +div.p9 { left: 170.5px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-left-6.html b/layout/reftests/pixel-rounding/background-image-left-6.html new file mode 100644 index 0000000000..d7c2bd6ed9 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-left-6.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10.6px; background-position: top left; } +div.p2 { left: 30.6px; background-position: top; } +div.p3 { left: 50.6px; background-position: top right; } +div.p4 { left: 70.6px; background-position: left; } +div.p5 { left: 90.6px; background-position: center; } +div.p6 { left: 110.6px; background-position: right; } +div.p7 { left: 130.6px; background-position: bottom left; } +div.p8 { left: 150.6px; background-position: bottom; } +div.p9 { left: 170.6px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-left-width-4.html b/layout/reftests/pixel-rounding/background-image-left-width-4.html new file mode 100644 index 0000000000..f4a86ff754 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-left-width-4.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10.9px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 9.5px; background-position: top left; } +div.p2 { left: 29.5px; background-position: top; } +div.p3 { left: 49.5px; background-position: top right; } +div.p4 { left: 69.5px; background-position: left; } +div.p5 { left: 89.5px; background-position: center; } +div.p6 { left: 109.5px; background-position: right; } +div.p7 { left: 129.5px; background-position: bottom left; } +div.p8 { left: 149.5px; background-position: bottom; } +div.p9 { left: 169.5px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-left-width-5.html b/layout/reftests/pixel-rounding/background-image-left-width-5.html new file mode 100644 index 0000000000..54b39f3909 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-left-width-5.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 11px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 9.5px; background-position: top left; } +div.p2 { left: 29.5px; background-position: top; } +div.p3 { left: 49.5px; background-position: top right; } +div.p4 { left: 69.5px; background-position: left; } +div.p5 { left: 89.5px; background-position: center; } +div.p6 { left: 109.5px; background-position: right; } +div.p7 { left: 129.5px; background-position: bottom left; } +div.p8 { left: 149.5px; background-position: bottom; } +div.p9 { left: 169.5px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-left-width-6.html b/layout/reftests/pixel-rounding/background-image-left-width-6.html new file mode 100644 index 0000000000..3514e28c05 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-left-width-6.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 11.1px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 9.5px; background-position: top left; } +div.p2 { left: 29.5px; background-position: top; } +div.p3 { left: 49.5px; background-position: top right; } +div.p4 { left: 69.5px; background-position: left; } +div.p5 { left: 89.5px; background-position: center; } +div.p6 { left: 109.5px; background-position: right; } +div.p7 { left: 129.5px; background-position: bottom left; } +div.p8 { left: 149.5px; background-position: bottom; } +div.p9 { left: 169.5px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-tiling-ref.html b/layout/reftests/pixel-rounding/background-image-tiling-ref.html new file mode 100644 index 0000000000..5f4d6f7b5e --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-tiling-ref.html @@ -0,0 +1,298 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Pixel rounding of background image tiling</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { background: black; } + + .set { + height: 60px; + position: relative; + } + + .item { + position: absolute; + width: 10px; + height: 10px; + background: aqua; + overflow: hidden; + } + .item > div { + position: absolute; + width: 15px; + height: 15px; + border: 1px solid yellow; + } + + .item1 { left: 0px; } + .item2 { left: 15px; } + .item3 { left: 30px; } + .item4 { left: 45px; } + .item5 { left: 60px; } + + .tl { top: 0px; } + .tl > div { top: 0; left: 0; } + + .tr { top: 15px; } + .tr > div { top: 0; right: 0; } + + .bl { top: 30px; } + .bl > div { bottom: 0; left: 0; } + + .br { top: 45px; } + .br > div { bottom: 0; right: 0; } + + .varydim .item1 { height: 10px; width: 11px; } + .varydim .item2 { height: 10px; width: 11px; } + .varydim .item3 { height: 11px; width: 11px; } + .varydim .item4 { height: 11px; width: 10px; } + .varydim .item5 { height: 11px; width: 10px; } + + .varydim.athalf .item2 { width: 10px; } + .varydim.athalf .item3 { height: 10px; width: 10px; } + .varydim.athalf .item4 { height: 10px; } + + .varypos .item1 { margin-top: 0px; margin-left: 1px; } + .varypos .item2 { margin-top: 0px; margin-left: 1px; } + .varypos .item3 { margin-top: 1px; margin-left: 1px; } + .varypos .item4 { margin-top: 1px; margin-left: 0px; } + .varypos .item5 { margin-top: 1px; margin-left: 0px; } + + .varydim.athalf .item { + margin-top: 1px; margin-left: 1px; + } + + .varypos.athalf .item1 { width: 11px; height: 11px; } + .varypos.athalf .item2 { height: 11px; } + .varypos.athalf .item4 { width: 11px; } + .varypos.athalf .item5 { width: 11px; height: 11px; } + + /* remember that abs pos children are relative to the padding box */ + .border .item { padding: 1px; } + + /* + * For the tiled images, use two divs as the children, and offset + * one so that it does only the vertical line, and the other so it + * does only the horizontal line. + */ + .border .item div:first-child { margin: 1px -1px; } + .border .item div:first-child + div { margin: -1px 1px; } + + </style> +</head> +<body> + +<div class="set varydim"> + <div class="tl item item1"><div></div></div> + <div class="tl item item2"><div></div></div> + <div class="tl item item3"><div></div></div> + <div class="tl item item4"><div></div></div> + <div class="tl item item5"><div></div></div> + + <div class="tr item item1"><div></div></div> + <div class="tr item item2"><div></div></div> + <div class="tr item item3"><div></div></div> + <div class="tr item item4"><div></div></div> + <div class="tr item item5"><div></div></div> + + <div class="bl item item1"><div></div></div> + <div class="bl item item2"><div></div></div> + <div class="bl item item3"><div></div></div> + <div class="bl item item4"><div></div></div> + <div class="bl item item5"><div></div></div> + + <div class="br item item1"><div></div></div> + <div class="br item item2"><div></div></div> + <div class="br item item3"><div></div></div> + <div class="br item item4"><div></div></div> + <div class="br item item5"><div></div></div> +</div> + +<div class="set varypos"> + <div class="tl item item1"><div></div></div> + <div class="tl item item2"><div></div></div> + <div class="tl item item3"><div></div></div> + <div class="tl item item4"><div></div></div> + <div class="tl item item5"><div></div></div> + + <div class="tr item item1"><div></div></div> + <div class="tr item item2"><div></div></div> + <div class="tr item item3"><div></div></div> + <div class="tr item item4"><div></div></div> + <div class="tr item item5"><div></div></div> + + <div class="bl item item1"><div></div></div> + <div class="bl item item2"><div></div></div> + <div class="bl item item3"><div></div></div> + <div class="bl item item4"><div></div></div> + <div class="bl item item5"><div></div></div> + + <div class="br item item1"><div></div></div> + <div class="br item item2"><div></div></div> + <div class="br item item3"><div></div></div> + <div class="br item item4"><div></div></div> + <div class="br item item5"><div></div></div> +</div> + +<div class="set varydim athalf"> + <div class="tl item item1"><div></div></div> + <div class="tl item item2"><div></div></div> + <div class="tl item item3"><div></div></div> + <div class="tl item item4"><div></div></div> + <div class="tl item item5"><div></div></div> + + <div class="tr item item1"><div></div></div> + <div class="tr item item2"><div></div></div> + <div class="tr item item3"><div></div></div> + <div class="tr item item4"><div></div></div> + <div class="tr item item5"><div></div></div> + + <div class="bl item item1"><div></div></div> + <div class="bl item item2"><div></div></div> + <div class="bl item item3"><div></div></div> + <div class="bl item item4"><div></div></div> + <div class="bl item item5"><div></div></div> + + <div class="br item item1"><div></div></div> + <div class="br item item2"><div></div></div> + <div class="br item item3"><div></div></div> + <div class="br item item4"><div></div></div> + <div class="br item item5"><div></div></div> +</div> + +<div class="set varypos athalf"> + <div class="tl item item1"><div></div></div> + <div class="tl item item2"><div></div></div> + <div class="tl item item3"><div></div></div> + <div class="tl item item4"><div></div></div> + <div class="tl item item5"><div></div></div> + + <div class="tr item item1"><div></div></div> + <div class="tr item item2"><div></div></div> + <div class="tr item item3"><div></div></div> + <div class="tr item item4"><div></div></div> + <div class="tr item item5"><div></div></div> + + <div class="bl item item1"><div></div></div> + <div class="bl item item2"><div></div></div> + <div class="bl item item3"><div></div></div> + <div class="bl item item4"><div></div></div> + <div class="bl item item5"><div></div></div> + + <div class="br item item1"><div></div></div> + <div class="br item item2"><div></div></div> + <div class="br item item3"><div></div></div> + <div class="br item item4"><div></div></div> + <div class="br item item5"><div></div></div> +</div> + +<div class="set varydim border"> + <div class="tl item item1"><div></div><div></div></div> + <div class="tl item item2"><div></div><div></div></div> + <div class="tl item item3"><div></div><div></div></div> + <div class="tl item item4"><div></div><div></div></div> + <div class="tl item item5"><div></div><div></div></div> + + <div class="tr item item1"><div></div><div></div></div> + <div class="tr item item2"><div></div><div></div></div> + <div class="tr item item3"><div></div><div></div></div> + <div class="tr item item4"><div></div><div></div></div> + <div class="tr item item5"><div></div><div></div></div> + + <div class="bl item item1"><div></div><div></div></div> + <div class="bl item item2"><div></div><div></div></div> + <div class="bl item item3"><div></div><div></div></div> + <div class="bl item item4"><div></div><div></div></div> + <div class="bl item item5"><div></div><div></div></div> + + <div class="br item item1"><div></div><div></div></div> + <div class="br item item2"><div></div><div></div></div> + <div class="br item item3"><div></div><div></div></div> + <div class="br item item4"><div></div><div></div></div> + <div class="br item item5"><div></div><div></div></div> +</div> + +<div class="set varypos border"> + <div class="tl item item1"><div></div><div></div></div> + <div class="tl item item2"><div></div><div></div></div> + <div class="tl item item3"><div></div><div></div></div> + <div class="tl item item4"><div></div><div></div></div> + <div class="tl item item5"><div></div><div></div></div> + + <div class="tr item item1"><div></div><div></div></div> + <div class="tr item item2"><div></div><div></div></div> + <div class="tr item item3"><div></div><div></div></div> + <div class="tr item item4"><div></div><div></div></div> + <div class="tr item item5"><div></div><div></div></div> + + <div class="bl item item1"><div></div><div></div></div> + <div class="bl item item2"><div></div><div></div></div> + <div class="bl item item3"><div></div><div></div></div> + <div class="bl item item4"><div></div><div></div></div> + <div class="bl item item5"><div></div><div></div></div> + + <div class="br item item1"><div></div><div></div></div> + <div class="br item item2"><div></div><div></div></div> + <div class="br item item3"><div></div><div></div></div> + <div class="br item item4"><div></div><div></div></div> + <div class="br item item5"><div></div><div></div></div> +</div> + +<div class="set varydim athalf border"> + <div class="tl item item1"><div></div><div></div></div> + <div class="tl item item2"><div></div><div></div></div> + <div class="tl item item3"><div></div><div></div></div> + <div class="tl item item4"><div></div><div></div></div> + <div class="tl item item5"><div></div><div></div></div> + + <div class="tr item item1"><div></div><div></div></div> + <div class="tr item item2"><div></div><div></div></div> + <div class="tr item item3"><div></div><div></div></div> + <div class="tr item item4"><div></div><div></div></div> + <div class="tr item item5"><div></div><div></div></div> + + <div class="bl item item1"><div></div><div></div></div> + <div class="bl item item2"><div></div><div></div></div> + <div class="bl item item3"><div></div><div></div></div> + <div class="bl item item4"><div></div><div></div></div> + <div class="bl item item5"><div></div><div></div></div> + + <div class="br item item1"><div></div><div></div></div> + <div class="br item item2"><div></div><div></div></div> + <div class="br item item3"><div></div><div></div></div> + <div class="br item item4"><div></div><div></div></div> + <div class="br item item5"><div></div><div></div></div> +</div> + +<div class="set varypos athalf border"> + <div class="tl item item1"><div></div><div></div></div> + <div class="tl item item2"><div></div><div></div></div> + <div class="tl item item3"><div></div><div></div></div> + <div class="tl item item4"><div></div><div></div></div> + <div class="tl item item5"><div></div><div></div></div> + + <div class="tr item item1"><div></div><div></div></div> + <div class="tr item item2"><div></div><div></div></div> + <div class="tr item item3"><div></div><div></div></div> + <div class="tr item item4"><div></div><div></div></div> + <div class="tr item item5"><div></div><div></div></div> + + <div class="bl item item1"><div></div><div></div></div> + <div class="bl item item2"><div></div><div></div></div> + <div class="bl item item3"><div></div><div></div></div> + <div class="bl item item4"><div></div><div></div></div> + <div class="bl item item5"><div></div><div></div></div> + + <div class="br item item1"><div></div><div></div></div> + <div class="br item item2"><div></div><div></div></div> + <div class="br item item3"><div></div><div></div></div> + <div class="br item item4"><div></div><div></div></div> + <div class="br item item5"><div></div><div></div></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-tiling.html b/layout/reftests/pixel-rounding/background-image-tiling.html new file mode 100644 index 0000000000..85a1d49286 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-tiling.html @@ -0,0 +1,291 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Pixel rounding of background image tiling</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { background: black; } + + .set { + height: 60px; + position: relative; + } + + .item { + position: absolute; + width: 10px; + height: 10px; + } + + .item1 { left: 0px; } + .item2 { left: 15px; } + .item3 { left: 30px; } + .item4 { left: 45px; } + .item5 { left: 60px; } + + .tl { + top: 0px; + background-image: url(corner-tl.png); + background-position: top left; + } + + .tr { + top: 15px; + background-image: url(corner-tr.png); + background-position: top right; + } + + .bl { + top: 30px; + background-image: url(corner-bl.png); + background-position: bottom left; + } + + .br { + top: 45px; + background-image: url(corner-br.png); + background-position: bottom right; + } + + .varydim .item1 { height: 10.0px; width: 11.0px; } + .varydim .item2 { height: 10.4px; width: 10.6px; } + .varydim .item3 { height: 10.5px; width: 10.5px; } + .varydim .item4 { height: 10.6px; width: 10.4px; } + .varydim .item5 { height: 11.0px; width: 10.0px; } + + .varypos .item1 { margin-top: 0.0px; margin-left: 1.0px; } + .varypos .item2 { margin-top: 0.4px; margin-left: 0.6px; } + .varypos .item3 { margin-top: 0.5px; margin-left: 0.5px; } + .varypos .item4 { margin-top: 0.6px; margin-left: 0.4px; } + .varypos .item5 { margin-top: 1.0px; margin-left: 0.0px; } + + .varydim.athalf .item { + margin-top: 0.5px; margin-left: 0.5px; + } + + .varypos.athalf .item { + width: 10.5px; height: 10.5px; + } + + .border .item { + /* force the tiling codepath by making sure there are multiple images */ + border: 1px solid transparent; + } + + </style> +</head> +<body> + +<div class="set varydim"> + <div class="tl item item1"></div> + <div class="tl item item2"></div> + <div class="tl item item3"></div> + <div class="tl item item4"></div> + <div class="tl item item5"></div> + + <div class="tr item item1"></div> + <div class="tr item item2"></div> + <div class="tr item item3"></div> + <div class="tr item item4"></div> + <div class="tr item item5"></div> + + <div class="bl item item1"></div> + <div class="bl item item2"></div> + <div class="bl item item3"></div> + <div class="bl item item4"></div> + <div class="bl item item5"></div> + + <div class="br item item1"></div> + <div class="br item item2"></div> + <div class="br item item3"></div> + <div class="br item item4"></div> + <div class="br item item5"></div> +</div> + +<div class="set varypos"> + <div class="tl item item1"></div> + <div class="tl item item2"></div> + <div class="tl item item3"></div> + <div class="tl item item4"></div> + <div class="tl item item5"></div> + + <div class="tr item item1"></div> + <div class="tr item item2"></div> + <div class="tr item item3"></div> + <div class="tr item item4"></div> + <div class="tr item item5"></div> + + <div class="bl item item1"></div> + <div class="bl item item2"></div> + <div class="bl item item3"></div> + <div class="bl item item4"></div> + <div class="bl item item5"></div> + + <div class="br item item1"></div> + <div class="br item item2"></div> + <div class="br item item3"></div> + <div class="br item item4"></div> + <div class="br item item5"></div> +</div> + +<div class="set varydim athalf"> + <div class="tl item item1"></div> + <div class="tl item item2"></div> + <div class="tl item item3"></div> + <div class="tl item item4"></div> + <div class="tl item item5"></div> + + <div class="tr item item1"></div> + <div class="tr item item2"></div> + <div class="tr item item3"></div> + <div class="tr item item4"></div> + <div class="tr item item5"></div> + + <div class="bl item item1"></div> + <div class="bl item item2"></div> + <div class="bl item item3"></div> + <div class="bl item item4"></div> + <div class="bl item item5"></div> + + <div class="br item item1"></div> + <div class="br item item2"></div> + <div class="br item item3"></div> + <div class="br item item4"></div> + <div class="br item item5"></div> +</div> + +<div class="set varypos athalf"> + <div class="tl item item1"></div> + <div class="tl item item2"></div> + <div class="tl item item3"></div> + <div class="tl item item4"></div> + <div class="tl item item5"></div> + + <div class="tr item item1"></div> + <div class="tr item item2"></div> + <div class="tr item item3"></div> + <div class="tr item item4"></div> + <div class="tr item item5"></div> + + <div class="bl item item1"></div> + <div class="bl item item2"></div> + <div class="bl item item3"></div> + <div class="bl item item4"></div> + <div class="bl item item5"></div> + + <div class="br item item1"></div> + <div class="br item item2"></div> + <div class="br item item3"></div> + <div class="br item item4"></div> + <div class="br item item5"></div> +</div> + +<div class="set varydim border"> + <div class="tl item item1"></div> + <div class="tl item item2"></div> + <div class="tl item item3"></div> + <div class="tl item item4"></div> + <div class="tl item item5"></div> + + <div class="tr item item1"></div> + <div class="tr item item2"></div> + <div class="tr item item3"></div> + <div class="tr item item4"></div> + <div class="tr item item5"></div> + + <div class="bl item item1"></div> + <div class="bl item item2"></div> + <div class="bl item item3"></div> + <div class="bl item item4"></div> + <div class="bl item item5"></div> + + <div class="br item item1"></div> + <div class="br item item2"></div> + <div class="br item item3"></div> + <div class="br item item4"></div> + <div class="br item item5"></div> +</div> + +<div class="set varypos border"> + <div class="tl item item1"></div> + <div class="tl item item2"></div> + <div class="tl item item3"></div> + <div class="tl item item4"></div> + <div class="tl item item5"></div> + + <div class="tr item item1"></div> + <div class="tr item item2"></div> + <div class="tr item item3"></div> + <div class="tr item item4"></div> + <div class="tr item item5"></div> + + <div class="bl item item1"></div> + <div class="bl item item2"></div> + <div class="bl item item3"></div> + <div class="bl item item4"></div> + <div class="bl item item5"></div> + + <div class="br item item1"></div> + <div class="br item item2"></div> + <div class="br item item3"></div> + <div class="br item item4"></div> + <div class="br item item5"></div> +</div> + +<div class="set varydim athalf border"> + <div class="tl item item1"></div> + <div class="tl item item2"></div> + <div class="tl item item3"></div> + <div class="tl item item4"></div> + <div class="tl item item5"></div> + + <div class="tr item item1"></div> + <div class="tr item item2"></div> + <div class="tr item item3"></div> + <div class="tr item item4"></div> + <div class="tr item item5"></div> + + <div class="bl item item1"></div> + <div class="bl item item2"></div> + <div class="bl item item3"></div> + <div class="bl item item4"></div> + <div class="bl item item5"></div> + + <div class="br item item1"></div> + <div class="br item item2"></div> + <div class="br item item3"></div> + <div class="br item item4"></div> + <div class="br item item5"></div> +</div> + +<div class="set varypos athalf border"> + <div class="tl item item1"></div> + <div class="tl item item2"></div> + <div class="tl item item3"></div> + <div class="tl item item4"></div> + <div class="tl item item5"></div> + + <div class="tr item item1"></div> + <div class="tr item item2"></div> + <div class="tr item item3"></div> + <div class="tr item item4"></div> + <div class="tr item item5"></div> + + <div class="bl item item1"></div> + <div class="bl item item2"></div> + <div class="bl item item3"></div> + <div class="bl item item4"></div> + <div class="bl item item5"></div> + + <div class="br item item1"></div> + <div class="br item item2"></div> + <div class="br item item3"></div> + <div class="br item item4"></div> + <div class="br item item5"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-top-10-ref.html b/layout/reftests/pixel-rounding/background-image-top-10-ref.html new file mode 100644 index 0000000000..f41a1626bc --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-top-10-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10px; } + +div { background: blue; } /* for reference only */ + +div.i1 { top: 11px; } +div.i3 { top: 31px; } +div.i5 { top: 51px; } +div.i25 { top: 71px; } + +div.p1 { left: 10px; } +div.p2 { left: 30px; } +div.p3 { left: 50px; } +div.p4 { left: 70px; } +div.p5 { left: 90px; } +div.p6 { left: 110px; } +div.p7 { left: 130px; } +div.p8 { left: 150px; } +div.p9 { left: 170px; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-top-4.html b/layout/reftests/pixel-rounding/background-image-top-4.html new file mode 100644 index 0000000000..7bfdfe0bc7 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-top-4.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10px; } + +div.i1 { top: 10.4px; background-image: url(blue-1x1.png); } +div.i3 { top: 30.4px; background-image: url(blue-3x3.png); } +div.i5 { top: 50.4px; background-image: url(blue-5x5.png); } +div.i25 { top: 70.4px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-top-5.html b/layout/reftests/pixel-rounding/background-image-top-5.html new file mode 100644 index 0000000000..33a774cb97 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-top-5.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10px; } + +div.i1 { top: 10.5px; background-image: url(blue-1x1.png); } +div.i3 { top: 30.5px; background-image: url(blue-3x3.png); } +div.i5 { top: 50.5px; background-image: url(blue-5x5.png); } +div.i25 { top: 70.5px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-top-6.html b/layout/reftests/pixel-rounding/background-image-top-6.html new file mode 100644 index 0000000000..18fdbf62af --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-top-6.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10px; } + +div.i1 { top: 10.6px; background-image: url(blue-1x1.png); } +div.i3 { top: 30.6px; background-image: url(blue-3x3.png); } +div.i5 { top: 50.6px; background-image: url(blue-5x5.png); } +div.i25 { top: 70.6px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-top-height-4.html b/layout/reftests/pixel-rounding/background-image-top-height-4.html new file mode 100644 index 0000000000..2da79e5939 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-top-height-4.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10.9px; width: 10px; } + +div.i1 { top: 9.5px; background-image: url(blue-1x1.png); } +div.i3 { top: 29.5px; background-image: url(blue-3x3.png); } +div.i5 { top: 49.5px; background-image: url(blue-5x5.png); } +div.i25 { top: 69.5px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-top-height-5.html b/layout/reftests/pixel-rounding/background-image-top-height-5.html new file mode 100644 index 0000000000..61030791a4 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-top-height-5.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 11px; width: 10px; } + +div.i1 { top: 9.5px; background-image: url(blue-1x1.png); } +div.i3 { top: 29.5px; background-image: url(blue-3x3.png); } +div.i5 { top: 49.5px; background-image: url(blue-5x5.png); } +div.i25 { top: 69.5px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-top-height-6.html b/layout/reftests/pixel-rounding/background-image-top-height-6.html new file mode 100644 index 0000000000..26db7c0b8f --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-top-height-6.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 11.1px; width: 10px; } + +div.i1 { top: 9.5px; background-image: url(blue-1x1.png); } +div.i3 { top: 29.5px; background-image: url(blue-3x3.png); } +div.i5 { top: 49.5px; background-image: url(blue-5x5.png); } +div.i25 { top: 69.5px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-width-10-ref.html b/layout/reftests/pixel-rounding/background-image-width-10-ref.html new file mode 100644 index 0000000000..f3f70b7de2 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-width-10-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 11px; } + +div { background: blue; } /* for reference only */ + +div.i1 { top: 10px; } +div.i3 { top: 30px; } +div.i5 { top: 50px; } +div.i25 { top: 70px; } + +div.p1 { left: 10px; } +div.p2 { left: 30px; } +div.p3 { left: 50px; } +div.p4 { left: 70px; } +div.p5 { left: 90px; } +div.p6 { left: 110px; } +div.p7 { left: 130px; } +div.p8 { left: 150px; } +div.p9 { left: 170px; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-width-4.html b/layout/reftests/pixel-rounding/background-image-width-4.html new file mode 100644 index 0000000000..3bcd21269f --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-width-4.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10.4px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-width-5.html b/layout/reftests/pixel-rounding/background-image-width-5.html new file mode 100644 index 0000000000..ac6f860fe4 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-width-5.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10.5px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-width-6.html b/layout/reftests/pixel-rounding/background-image-width-6.html new file mode 100644 index 0000000000..128a6abcf6 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-width-6.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10.6px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-width-left-4.html b/layout/reftests/pixel-rounding/background-image-width-left-4.html new file mode 100644 index 0000000000..b45b868c34 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-width-left-4.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10.5px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 9.9px; background-position: top left; } +div.p2 { left: 29.9px; background-position: top; } +div.p3 { left: 49.9px; background-position: top right; } +div.p4 { left: 69.9px; background-position: left; } +div.p5 { left: 89.9px; background-position: center; } +div.p6 { left: 109.9px; background-position: right; } +div.p7 { left: 129.9px; background-position: bottom left; } +div.p8 { left: 149.9px; background-position: bottom; } +div.p9 { left: 169.9px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-width-left-5.html b/layout/reftests/pixel-rounding/background-image-width-left-5.html new file mode 100644 index 0000000000..ac6f860fe4 --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-width-left-5.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10.5px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10px; background-position: top left; } +div.p2 { left: 30px; background-position: top; } +div.p3 { left: 50px; background-position: top right; } +div.p4 { left: 70px; background-position: left; } +div.p5 { left: 90px; background-position: center; } +div.p6 { left: 110px; background-position: right; } +div.p7 { left: 130px; background-position: bottom left; } +div.p8 { left: 150px; background-position: bottom; } +div.p9 { left: 170px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/background-image-width-left-6.html b/layout/reftests/pixel-rounding/background-image-width-left-6.html new file mode 100644 index 0000000000..ec3ab5576a --- /dev/null +++ b/layout/reftests/pixel-rounding/background-image-width-left-6.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10.5px; } + +div.i1 { top: 10px; background-image: url(blue-1x1.png); } +div.i3 { top: 30px; background-image: url(blue-3x3.png); } +div.i5 { top: 50px; background-image: url(blue-5x5.png); } +div.i25 { top: 70px; background-image: url(blue-25x25.png); } + +div.p1 { left: 10.1px; background-position: top left; } +div.p2 { left: 30.1px; background-position: top; } +div.p3 { left: 50.1px; background-position: top right; } +div.p4 { left: 70.1px; background-position: left; } +div.p5 { left: 90.1px; background-position: center; } +div.p6 { left: 110.1px; background-position: right; } +div.p7 { left: 130.1px; background-position: bottom left; } +div.p8 { left: 150.1px; background-position: bottom; } +div.p9 { left: 170.1px; background-position: bottom right; } + +</style> +</head> +<body> + +<div class="i1 p1"></div> +<div class="i1 p2"></div> +<div class="i1 p3"></div> +<div class="i1 p4"></div> +<div class="i1 p5"></div> +<div class="i1 p6"></div> +<div class="i1 p7"></div> +<div class="i1 p8"></div> +<div class="i1 p9"></div> + +<div class="i3 p1"></div> +<div class="i3 p2"></div> +<div class="i3 p3"></div> +<div class="i3 p4"></div> +<div class="i3 p5"></div> +<div class="i3 p6"></div> +<div class="i3 p7"></div> +<div class="i3 p8"></div> +<div class="i3 p9"></div> + +<div class="i5 p1"></div> +<div class="i5 p2"></div> +<div class="i5 p3"></div> +<div class="i5 p4"></div> +<div class="i5 p5"></div> +<div class="i5 p6"></div> +<div class="i5 p7"></div> +<div class="i5 p8"></div> +<div class="i5 p9"></div> + +<div class="i25 p1"></div> +<div class="i25 p2"></div> +<div class="i25 p3"></div> +<div class="i25 p4"></div> +<div class="i25 p5"></div> +<div class="i25 p6"></div> +<div class="i25 p7"></div> +<div class="i25 p8"></div> +<div class="i25 p9"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/blue-1x1.png b/layout/reftests/pixel-rounding/blue-1x1.png Binary files differnew file mode 100644 index 0000000000..5da0137001 --- /dev/null +++ b/layout/reftests/pixel-rounding/blue-1x1.png diff --git a/layout/reftests/pixel-rounding/blue-25x25.png b/layout/reftests/pixel-rounding/blue-25x25.png Binary files differnew file mode 100644 index 0000000000..dfe7542b82 --- /dev/null +++ b/layout/reftests/pixel-rounding/blue-25x25.png diff --git a/layout/reftests/pixel-rounding/blue-3x3.png b/layout/reftests/pixel-rounding/blue-3x3.png Binary files differnew file mode 100644 index 0000000000..c049b55008 --- /dev/null +++ b/layout/reftests/pixel-rounding/blue-3x3.png diff --git a/layout/reftests/pixel-rounding/blue-5x5.png b/layout/reftests/pixel-rounding/blue-5x5.png Binary files differnew file mode 100644 index 0000000000..35d8f33684 --- /dev/null +++ b/layout/reftests/pixel-rounding/blue-5x5.png diff --git a/layout/reftests/pixel-rounding/border-base-ref.html b/layout/reftests/pixel-rounding/border-base-ref.html new file mode 100644 index 0000000000..7be5e23d9a --- /dev/null +++ b/layout/reftests/pixel-rounding/border-base-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> + +<div style="left: 10px"></div> +<div style="left: 30px"></div> +<div style="left: 50px"></div> +<div style="left: 70px"></div> +<div style="left: 90px"></div> +<div style="left: 110px"></div> +<div style="left: 130px"></div> +<div style="left: 150px"></div> +<div style="left: 170px"></div> +<div style="left: 190px"></div> +<div style="left: 210px"></div> +<div style="left: 230px"></div> +<div style="left: 250px"></div> +<div style="left: 270px"></div> +<div style="left: 290px"></div> +<div style="left: 310px"></div> +<div style="left: 330px"></div> +<div style="left: 350px"></div> +<div style="left: 370px"></div> + +<div style="top: 30px; left: 10px; width: 30px; height: 30px"> + <div style="background:white; top: 10px; left: 10px"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-height-10-ref.html b/layout/reftests/pixel-rounding/border-height-10-ref.html new file mode 100644 index 0000000000..75369f3372 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-height-10-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; height: 11px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> + +<div style="left: 10px"></div> +<div style="left: 30px"></div> +<div style="left: 50px"></div> +<div style="left: 70px"></div> +<div style="left: 90px"></div> +<div style="left: 110px"></div> +<div style="left: 130px"></div> +<div style="left: 150px"></div> +<div style="left: 170px"></div> +<div style="left: 190px"></div> +<div style="left: 210px"></div> +<div style="left: 230px"></div> +<div style="left: 250px"></div> +<div style="left: 270px"></div> +<div style="left: 290px"></div> +<div style="left: 310px"></div> +<div style="left: 330px"></div> +<div style="left: 350px"></div> +<div style="left: 370px"></div> + +<div style="top: 30px; left: 10px; width: 30px; height: 31px"> + <div style="background:white; top: 10px; left: 10px"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-height-4.html b/layout/reftests/pixel-rounding/border-height-4.html new file mode 100644 index 0000000000..db9ea23e12 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-height-4.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10px; width: 10px; border-top: 10.4px solid green"></div> +<div style="top: 10px; left: 30px; height: 10.4px; border-right: 10px solid green"></div> +<div style="top: 10px; left: 50px; width: 10px; border-bottom: 10.4px solid green"></div> +<div style="top: 10px; left: 70px; height: 10.4px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90px; border-top: 10.4px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 110px; border-bottom: 10.4px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 130px; border-top: 10.4px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 150px; border-bottom: 10.4px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170px; width: 10px; border-top: 5.4px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5.4px solid green;"></div> +<div style="top: 10px; left: 210px; height: 10.4px; border-right: 5px solid green; border-left: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230px; border-right: 5px solid green; border-bottom: 10.4px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 250px; border-right: 5px solid green; border-top: 10.4px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 270px; border-top: 5px solid green; border-bottom: 5.4px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 290px; border-top: 5.4px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 310px; border-top: 5px solid green; border-bottom: 5.4px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 330px; border-top: 5.4px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350px; border-top: 5.4px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5.4px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10px; border: 10px solid green; height: 10.4px; width: 10px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-height-5.html b/layout/reftests/pixel-rounding/border-height-5.html new file mode 100644 index 0000000000..60c38855f9 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-height-5.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10px; width: 10px; border-top: 11.5px solid green"></div> +<div style="top: 10px; left: 30px; height: 10.5px; border-right: 10px solid green"></div> +<div style="top: 10px; left: 50px; width: 10px; border-bottom: 11.5px solid green"></div> +<div style="top: 10px; left: 70px; height: 10.5px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90px; border-top: 11.5px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 110px; border-bottom: 11.5px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 130px; border-top: 11.5px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 150px; border-bottom: 11.5px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170px; width: 10px; border-top: 6.5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 6.5px solid green;"></div> +<div style="top: 10px; left: 210px; height: 10.5px; border-right: 5px solid green; border-left: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230px; border-right: 5px solid green; border-bottom: 11.5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 250px; border-right: 5px solid green; border-top: 11.5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 270px; border-top: 5px solid green; border-bottom: 6.5px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 290px; border-top: 6.5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 310px; border-top: 5px solid green; border-bottom: 6.5px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 330px; border-top: 6.5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350px; border-top: 6.5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 6.5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10px; border: 10px solid green; height: 10.5px; width: 10px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-height-6.html b/layout/reftests/pixel-rounding/border-height-6.html new file mode 100644 index 0000000000..124fa68e28 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-height-6.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10px; width: 10px; border-top: 11.6px solid green"></div> +<div style="top: 10px; left: 30px; height: 10.6px; border-right: 10px solid green"></div> +<div style="top: 10px; left: 50px; width: 10px; border-bottom: 11.6px solid green"></div> +<div style="top: 10px; left: 70px; height: 10.6px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90px; border-top: 11.6px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 110px; border-bottom: 11.6px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 130px; border-top: 11.6px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 150px; border-bottom: 11.6px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170px; width: 10px; border-top: 6.6px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 6.6px solid green;"></div> +<div style="top: 10px; left: 210px; height: 10.6px; border-right: 5px solid green; border-left: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230px; border-right: 5px solid green; border-bottom: 11.6px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 250px; border-right: 5px solid green; border-top: 11.6px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 270px; border-top: 5px solid green; border-bottom: 6.6px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 290px; border-top: 6.6px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 310px; border-top: 5px solid green; border-bottom: 6.6px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 330px; border-top: 6.6px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350px; border-top: 6.6px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 6.6px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10px; border: 10px solid green; height: 10.6px; width: 10px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-image-width-0.html b/layout/reftests/pixel-rounding/border-image-width-0.html new file mode 100644 index 0000000000..dce8ac7179 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-image-width-0.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10px; border-style: solid; } + +</style> +</head> +<body> + +<div style="top: 10px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 10px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 10px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 10px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 10px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div> + +<div style="top: 30px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 30px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 30px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 30px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 30px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2px 2px 2px 2px;"></div> + +<div style="top: 50px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 50px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 50px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 50px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 50px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2px 2px 2px 2px;"></div> + +<div style="top: 70px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 70px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 70px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 70px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 2px;"></div> +<div style="top: 70px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 2px;"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-image-width-10.html b/layout/reftests/pixel-rounding/border-image-width-10.html new file mode 100644 index 0000000000..71c2ea7dec --- /dev/null +++ b/layout/reftests/pixel-rounding/border-image-width-10.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10px; border-style:solid; } + +</style> +</head> +<body> + +<div style="top: 10px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 3px 2px 2px 2px;"></div> +<div style="top: 10px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 3px 2px 2px;"></div> +<div style="top: 10px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 3px 2px;"></div> +<div style="top: 10px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 3px;"></div> +<div style="top: 10px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 3px 3px 3px 3px;"></div> + +<div style="top: 30px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 3px 2px 2px 2px;"></div> +<div style="top: 30px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 3px 2px 2px;"></div> +<div style="top: 30px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 3px 2px;"></div> +<div style="top: 30px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 3px;"></div> +<div style="top: 30px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 3px 3px 3px 3px;"></div> + +<div style="top: 50px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 3px 2px 2px 2px;"></div> +<div style="top: 50px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 3px 2px 2px;"></div> +<div style="top: 50px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 3px 2px;"></div> +<div style="top: 50px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 3px;"></div> +<div style="top: 50px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 3px 3px 3px 3px;"></div> + +<div style="top: 70px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 3px 2px 2px 2px;"></div> +<div style="top: 70px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 3px 2px 2px;"></div> +<div style="top: 70px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 3px 2px;"></div> +<div style="top: 70px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 3px;"></div> +<div style="top: 70px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 3px 3px 3px 3px;"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-image-width-4.html b/layout/reftests/pixel-rounding/border-image-width-4.html new file mode 100644 index 0000000000..d47411e7a1 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-image-width-4.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10px; border-style: solid; } + +</style> +</head> +<body> + +<div style="top: 10px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.4px 2px 2px 2px;"></div> +<div style="top: 10px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2.4px 2px 2px;"></div> +<div style="top: 10px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2.4px 2px;"></div> +<div style="top: 10px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2.4px;"></div> +<div style="top: 10px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.4px 2.4px 2.4px 2.4px;"></div> + +<div style="top: 30px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.4px 2px 2px 2px;"></div> +<div style="top: 30px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2.4px 2px 2px;"></div> +<div style="top: 30px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2.4px 2px;"></div> +<div style="top: 30px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2.4px;"></div> +<div style="top: 30px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.4px 2.4px 2.4px 2.4px;"></div> + +<div style="top: 50px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.4px 2px 2px 2px;"></div> +<div style="top: 50px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2.4px 2px 2px;"></div> +<div style="top: 50px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2.4px 2px;"></div> +<div style="top: 50px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2.4px;"></div> +<div style="top: 50px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.4px 2.4px 2.4px 2.4px;"></div> + +<div style="top: 70px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2.4px 2px 2px 2px;"></div> +<div style="top: 70px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2.4px 2px 2px;"></div> +<div style="top: 70px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2.4px 2px;"></div> +<div style="top: 70px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 2.4px;"></div> +<div style="top: 70px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2.4px 2.4px 2.4px 2.4px;"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-image-width-9.html b/layout/reftests/pixel-rounding/border-image-width-9.html new file mode 100644 index 0000000000..e45dbe5724 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-image-width-9.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; height: 10px; width: 10px; border-style: solid;} + +</style> +</head> +<body> + +<div style="top: 10px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.9px 2px 2px 2px;"></div> +<div style="top: 10px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2.9px 2px 2px;"></div> +<div style="top: 10px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2.9px 2px;"></div> +<div style="top: 10px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2.9px;"></div> +<div style="top: 10px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.9px 2.9px 2.9px 2.9px;"></div> + +<div style="top: 30px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.9px 2px 2px 2px;"></div> +<div style="top: 30px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2.9px 2px 2px;"></div> +<div style="top: 30px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2.9px 2px;"></div> +<div style="top: 30px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2.9px;"></div> +<div style="top: 30px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.9px 2.9px 2.9px 2.9px;"></div> + +<div style="top: 50px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.9px 2px 2px 2px;"></div> +<div style="top: 50px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2.9px 2px 2px;"></div> +<div style="top: 50px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2.9px 2px;"></div> +<div style="top: 50px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2.9px;"></div> +<div style="top: 50px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.9px 2.9px 2.9px 2.9px;"></div> + +<div style="top: 70px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2.9px 2px 2px 2px;"></div> +<div style="top: 70px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2.9px 2px 2px;"></div> +<div style="top: 70px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2.9px 2px;"></div> +<div style="top: 70px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 2.9px;"></div> +<div style="top: 70px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2.9px 2.9px 2.9px 2.9px;"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-left-10-ref.html b/layout/reftests/pixel-rounding/border-left-10-ref.html new file mode 100644 index 0000000000..6244d3f072 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-left-10-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> + +<div style="left: 11px"></div> +<div style="left: 31px"></div> +<div style="left: 51px"></div> +<div style="left: 71px"></div> +<div style="left: 91px"></div> +<div style="left: 111px"></div> +<div style="left: 131px"></div> +<div style="left: 151px"></div> +<div style="left: 171px"></div> +<div style="left: 191px"></div> +<div style="left: 211px"></div> +<div style="left: 231px"></div> +<div style="left: 251px"></div> +<div style="left: 271px"></div> +<div style="left: 291px"></div> +<div style="left: 311px"></div> +<div style="left: 331px"></div> +<div style="left: 351px"></div> +<div style="left: 371px"></div> + +<div style="top: 30px; left: 11px; width: 30px; height: 30px"> + <div style="background:white; top: 10px; left: 10px"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-left-4.html b/layout/reftests/pixel-rounding/border-left-4.html new file mode 100644 index 0000000000..1e5271c21f --- /dev/null +++ b/layout/reftests/pixel-rounding/border-left-4.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10.4px; width: 10px; border-top: 10px solid green"></div> +<div style="top: 10px; left: 30.4px; height: 10px; border-right: 10px solid green"></div> +<div style="top: 10px; left: 50.4px; width: 10px; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 70.4px; height: 10px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90.4px; border-top: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 110.4px; border-bottom: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 130.4px; border-top: 10px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 150.4px; border-bottom: 10px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170.4px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 190.4px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 210.4px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230.4px; border-top: 5px solid green; border-right: 10px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 250.4px; border-top: 5px solid green; border-left: 10px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 270.4px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 290.4px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 310.4px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> +<div style="top: 10px; left: 330.4px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350.4px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370.4px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10.4px; border: 10px solid green; height: 10px; width: 10px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-left-5.html b/layout/reftests/pixel-rounding/border-left-5.html new file mode 100644 index 0000000000..cc3f784ead --- /dev/null +++ b/layout/reftests/pixel-rounding/border-left-5.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10.5px; width: 10px; border-top: 10px solid green"></div> +<div style="top: 10px; left: 30.5px; height: 10px; border-right: 10px solid green"></div> +<div style="top: 10px; left: 50.5px; width: 10px; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 70.5px; height: 10px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90.5px; border-top: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 110.5px; border-bottom: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 130.5px; border-top: 10px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 150.5px; border-bottom: 10px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170.5px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 190.5px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 210.5px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230.5px; border-top: 5px solid green; border-right: 10px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 250.5px; border-top: 5px solid green; border-left: 10px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 270.5px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 290.5px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 310.5px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> +<div style="top: 10px; left: 330.5px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350.5px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370.5px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10.5px; border: 10px solid green; height: 10px; width: 10px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-left-6.html b/layout/reftests/pixel-rounding/border-left-6.html new file mode 100644 index 0000000000..a6a6fd11a1 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-left-6.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10.6px; width: 10px; border-top: 10px solid green"></div> +<div style="top: 10px; left: 30.6px; height: 10px; border-right: 10px solid green"></div> +<div style="top: 10px; left: 50.6px; width: 10px; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 70.6px; height: 10px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90.6px; border-top: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 110.6px; border-bottom: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 130.6px; border-top: 10px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 150.6px; border-bottom: 10px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170.6px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 190.6px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 210.6px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230.6px; border-top: 5px solid green; border-right: 10px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 250.6px; border-top: 5px solid green; border-left: 10px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 270.6px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 290.6px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 310.6px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> +<div style="top: 10px; left: 330.6px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350.6px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370.6px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10.6px; border: 10px solid green; height: 10px; width: 10px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-top-10-ref.html b/layout/reftests/pixel-rounding/border-top-10-ref.html new file mode 100644 index 0000000000..65a0f9516c --- /dev/null +++ b/layout/reftests/pixel-rounding/border-top-10-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 11px; height: 10px; width: 10px; } + +div { background: green; } + +</style> +</head> +<body> + +<div style="left: 10px"></div> +<div style="left: 30px"></div> +<div style="left: 50px"></div> +<div style="left: 70px"></div> +<div style="left: 90px"></div> +<div style="left: 110px"></div> +<div style="left: 130px"></div> +<div style="left: 150px"></div> +<div style="left: 170px"></div> +<div style="left: 190px"></div> +<div style="left: 210px"></div> +<div style="left: 230px"></div> +<div style="left: 250px"></div> +<div style="left: 270px"></div> +<div style="left: 290px"></div> +<div style="left: 310px"></div> +<div style="left: 330px"></div> +<div style="left: 350px"></div> +<div style="left: 370px"></div> + +<div style="top: 31px; left: 10px; width: 30px; height: 30px"> + <div style="background:white; top: 10px; left: 10px"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-top-4.html b/layout/reftests/pixel-rounding/border-top-4.html new file mode 100644 index 0000000000..e2d66b2384 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-top-4.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10.4px; left: 10px; width: 10px; border-top: 10px solid green"></div> +<div style="top: 10.4px; left: 30px; height: 10px; border-right: 10px solid green"></div> +<div style="top: 10.4px; left: 50px; width: 10px; border-bottom: 10px solid green"></div> +<div style="top: 10.4px; left: 70px; height: 10px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10.4px; left: 90px; border-top: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10.4px; left: 110px; border-bottom: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10.4px; left: 130px; border-top: 10px solid green; border-left: 10px solid green"></div> +<div style="top: 10.4px; left: 150px; border-bottom: 10px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10.4px; left: 170px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10.4px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10.4px; left: 210px; height: 10px; border-right: 5px solid green; border-left: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10.4px; left: 230px; border-right: 5px solid green; border-bottom: 10px solid green; border-left: 5px solid green"></div> +<div style="top: 10.4px; left: 250px; border-right: 5px solid green; border-top: 10px solid green; border-left: 5px solid green"></div> +<div style="top: 10.4px; left: 270px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10.4px; left: 290px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10.4px; left: 310px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> +<div style="top: 10.4px; left: 330px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10.4px; left: 350px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10.4px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30.4px; left: 10px; border: 10px solid green; height: 10px; width: 10px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-top-5.html b/layout/reftests/pixel-rounding/border-top-5.html new file mode 100644 index 0000000000..e949fd07d5 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-top-5.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10.5px; left: 10px; width: 10px; border-top: 10px solid green"></div> +<div style="top: 10.5px; left: 30px; height: 10px; border-right: 10px solid green"></div> +<div style="top: 10.5px; left: 50px; width: 10px; border-bottom: 10px solid green"></div> +<div style="top: 10.5px; left: 70px; height: 10px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10.5px; left: 90px; border-top: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10.5px; left: 110px; border-bottom: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10.5px; left: 130px; border-top: 10px solid green; border-left: 10px solid green"></div> +<div style="top: 10.5px; left: 150px; border-bottom: 10px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10.5px; left: 170px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10.5px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10.5px; left: 210px; height: 10px; border-right: 5px solid green; border-left: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10.5px; left: 230px; border-right: 5px solid green; border-bottom: 10px solid green; border-left: 5px solid green"></div> +<div style="top: 10.5px; left: 250px; border-right: 5px solid green; border-top: 10px solid green; border-left: 5px solid green"></div> +<div style="top: 10.5px; left: 270px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10.5px; left: 290px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10.5px; left: 310px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> +<div style="top: 10.5px; left: 330px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10.5px; left: 350px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10.5px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30.5px; left: 10px; border: 10px solid green; height: 10px; width: 10px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-top-6.html b/layout/reftests/pixel-rounding/border-top-6.html new file mode 100644 index 0000000000..a92e528960 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-top-6.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10.6px; left: 10px; width: 10px; border-top: 10px solid green"></div> +<div style="top: 10.6px; left: 30px; height: 10px; border-right: 10px solid green"></div> +<div style="top: 10.6px; left: 50px; width: 10px; border-bottom: 10px solid green"></div> +<div style="top: 10.6px; left: 70px; height: 10px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10.6px; left: 90px; border-top: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10.6px; left: 110px; border-bottom: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10.6px; left: 130px; border-top: 10px solid green; border-left: 10px solid green"></div> +<div style="top: 10.6px; left: 150px; border-bottom: 10px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10.6px; left: 170px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10.6px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10.6px; left: 210px; height: 10px; border-right: 5px solid green; border-left: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10.6px; left: 230px; border-right: 5px solid green; border-bottom: 10px solid green; border-left: 5px solid green"></div> +<div style="top: 10.6px; left: 250px; border-right: 5px solid green; border-top: 10px solid green; border-left: 5px solid green"></div> +<div style="top: 10.6px; left: 270px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10.6px; left: 290px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10.6px; left: 310px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> +<div style="top: 10.6px; left: 330px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10.6px; left: 350px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10.6px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30.6px; left: 10px; border: 10px solid green; height: 10px; width: 10px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-width-10-ref.html b/layout/reftests/pixel-rounding/border-width-10-ref.html new file mode 100644 index 0000000000..a27dc2eb01 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-width-10-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; top: 10px; height: 10px; width: 11px; } + +div { background: green; } + +</style> +</head> +<body> + +<div style="left: 10px"></div> +<div style="left: 30px"></div> +<div style="left: 50px"></div> +<div style="left: 70px"></div> +<div style="left: 90px"></div> +<div style="left: 110px"></div> +<div style="left: 130px"></div> +<div style="left: 150px"></div> +<div style="left: 170px"></div> +<div style="left: 190px"></div> +<div style="left: 210px"></div> +<div style="left: 230px"></div> +<div style="left: 250px"></div> +<div style="left: 270px"></div> +<div style="left: 290px"></div> +<div style="left: 310px"></div> +<div style="left: 330px"></div> +<div style="left: 350px"></div> +<div style="left: 370px"></div> + +<div style="top: 30px; left: 10px; width: 31px; height: 30px"> + <div style="background:white; top: 10px; left: 10px"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-width-4.html b/layout/reftests/pixel-rounding/border-width-4.html new file mode 100644 index 0000000000..0ca001eced --- /dev/null +++ b/layout/reftests/pixel-rounding/border-width-4.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10px; width: 10.4px; border-top: 10px solid green"></div> +<div style="top: 10px; left: 30px; height: 10px; border-right: 10.4px solid green"></div> +<div style="top: 10px; left: 50px; width: 10.4px; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 70px; height: 10px; border-left: 10.4px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90px; border-top: 10px solid green; border-right: 10.4px solid green"></div> +<div style="top: 10px; left: 110px; border-bottom: 10px solid green; border-right: 10.4px solid green"></div> +<div style="top: 10px; left: 130px; border-top: 10px solid green; border-left: 10.4px solid green"></div> +<div style="top: 10px; left: 150px; border-bottom: 10px solid green; border-left: 10.4px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170px; height: 10px; border-left: 5.4px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 190px; height: 10px; border-left: 5px solid green; border-right: 5.4px solid green;"></div> +<div style="top: 10px; left: 210px; width: 10.4px; border-top: 5px solid green; border-bottom: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230px; border-top: 5px solid green; border-right: 10.4px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 250px; border-top: 5px solid green; border-left: 10.4px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 270px; border-left: 5px solid green; border-right: 5.4px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 290px; border-left: 5.4px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 310px; border-left: 5px solid green; border-right: 5.4px solid green; border-top: 10px solid green"></div> +<div style="top: 10px; left: 330px; border-left: 5.4px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350px; border-top: 5px solid green; border-right: 5.4px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5.4px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10px; border: 10px solid green; height: 10px; width: 10.4px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-width-5.html b/layout/reftests/pixel-rounding/border-width-5.html new file mode 100644 index 0000000000..3544855af9 --- /dev/null +++ b/layout/reftests/pixel-rounding/border-width-5.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10px; width: 10.5px; border-top: 10px solid green"></div> +<div style="top: 10px; left: 30px; height: 10px; border-right: 11.5px solid green"></div> +<div style="top: 10px; left: 50px; width: 10.5px; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 70px; height: 10px; border-left: 11.5px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90px; border-top: 10px solid green; border-right: 11.5px solid green"></div> +<div style="top: 10px; left: 110px; border-bottom: 10px solid green; border-right: 11.5px solid green"></div> +<div style="top: 10px; left: 130px; border-top: 10px solid green; border-left: 11.5px solid green"></div> +<div style="top: 10px; left: 150px; border-bottom: 10px solid green; border-left: 11.5px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170px; height: 10px; border-left: 6.5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 190px; height: 10px; border-left: 5px solid green; border-right: 6.5px solid green;"></div> +<div style="top: 10px; left: 210px; width: 10.5px; border-top: 5px solid green; border-bottom: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230px; border-top: 5px solid green; border-right: 11.5px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 250px; border-top: 5px solid green; border-left: 11.5px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 270px; border-left: 5px solid green; border-right: 6.5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 290px; border-left: 6.5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 310px; border-left: 5px solid green; border-right: 6.5px solid green; border-top: 10px solid green"></div> +<div style="top: 10px; left: 330px; border-left: 6.5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350px; border-top: 5px solid green; border-right: 6.5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 6.5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10px; border: 10px solid green; height: 10px; width: 10.5px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/border-width-6.html b/layout/reftests/pixel-rounding/border-width-6.html new file mode 100644 index 0000000000..dd846e900e --- /dev/null +++ b/layout/reftests/pixel-rounding/border-width-6.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10px; width: 10.6px; border-top: 10px solid green"></div> +<div style="top: 10px; left: 30px; height: 10px; border-right: 11.6px solid green"></div> +<div style="top: 10px; left: 50px; width: 10.6px; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 70px; height: 10px; border-left: 11.6px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90px; border-top: 10px solid green; border-right: 11.6px solid green"></div> +<div style="top: 10px; left: 110px; border-bottom: 10px solid green; border-right: 11.6px solid green"></div> +<div style="top: 10px; left: 130px; border-top: 10px solid green; border-left: 11.6px solid green"></div> +<div style="top: 10px; left: 150px; border-bottom: 10px solid green; border-left: 11.6px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170px; height: 10px; border-left: 6.6px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 190px; height: 10px; border-left: 5px solid green; border-right: 6.6px solid green;"></div> +<div style="top: 10px; left: 210px; width: 10.6px; border-top: 5px solid green; border-bottom: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230px; border-top: 5px solid green; border-right: 11.6px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 250px; border-top: 5px solid green; border-left: 11.6px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 270px; border-left: 5px solid green; border-right: 6.6px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 290px; border-left: 6.6px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 310px; border-left: 5px solid green; border-right: 6.6px solid green; border-top: 10px solid green"></div> +<div style="top: 10px; left: 330px; border-left: 6.6px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350px; border-top: 5px solid green; border-right: 6.6px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 6.6px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10px; border: 10px solid green; height: 10px; width: 10.6px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/check-image-blue-ref.html b/layout/reftests/pixel-rounding/check-image-blue-ref.html new file mode 100644 index 0000000000..7219b2e448 --- /dev/null +++ b/layout/reftests/pixel-rounding/check-image-blue-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { margin: 10px; background: blue; } + +</style> +</head> +<body> +<div style="width: 1px; height: 1px"></div> +<div style="width: 3px; height: 3px"></div> +<div style="width: 5px; height: 5px"></div> +<div style="width: 25px; height: 25px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/check-image-blue.html b/layout/reftests/pixel-rounding/check-image-blue.html new file mode 100644 index 0000000000..28f596cdb6 --- /dev/null +++ b/layout/reftests/pixel-rounding/check-image-blue.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { margin: 10px; display: block; } + +</style> +</head> +<body> +<img src="blue-1x1.png"> +<img src="blue-3x3.png"> +<img src="blue-5x5.png"> +<img src="blue-25x25.png"> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/check-image-ref.html b/layout/reftests/pixel-rounding/check-image-ref.html new file mode 100644 index 0000000000..dbe76aa9b0 --- /dev/null +++ b/layout/reftests/pixel-rounding/check-image-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { margin: 10px; background: green; } + +</style> +</head> +<body> +<div style="width: 1px; height: 1px"></div> +<div style="width: 3px; height: 3px"></div> +<div style="width: 5px; height: 5px"></div> +<div style="width: 25px; height: 25px"></div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/check-image.html b/layout/reftests/pixel-rounding/check-image.html new file mode 100644 index 0000000000..8318f36811 --- /dev/null +++ b/layout/reftests/pixel-rounding/check-image.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { margin: 10px; display: block; } + +</style> +</head> +<body> +<img src="green-1x1.png"> +<img src="green-3x3.png"> +<img src="green-5x5.png"> +<img src="green-25x25.png"> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/collapsed-border-height-4.html b/layout/reftests/pixel-rounding/collapsed-border-height-4.html new file mode 100644 index 0000000000..75eddeb223 --- /dev/null +++ b/layout/reftests/pixel-rounding/collapsed-border-height-4.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { display: table; position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10px; width: 10px; border-top: 10.4px solid green"></div> +<div style="top: 10px; left: 30px; height: 10.4px; border-right: 10px solid green"></div> +<div style="top: 10px; left: 50px; width: 10px; border-bottom: 10.4px solid green"></div> +<div style="top: 10px; left: 70px; height: 10.4px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90px; border-top: 10.4px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 110px; border-bottom: 10.4px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 130px; border-top: 10.4px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 150px; border-bottom: 10.4px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170px; width: 10px; border-top: 5.4px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5.4px solid green;"></div> +<div style="top: 10px; left: 210px; height: 10.4px; border-right: 5px solid green; border-left: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230px; border-right: 5px solid green; border-bottom: 10.4px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 250px; border-right: 5px solid green; border-top: 10.4px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 270px; border-top: 5px solid green; border-bottom: 5.4px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 290px; border-top: 5.4px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 310px; border-top: 5px solid green; border-bottom: 5.4px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 330px; border-top: 5.4px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350px; border-top: 5.4px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5.4px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10px; border: 10px solid green; height: 20.4px; width: 20px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/collapsed-border-height-5.html b/layout/reftests/pixel-rounding/collapsed-border-height-5.html new file mode 100644 index 0000000000..5f080ac40e --- /dev/null +++ b/layout/reftests/pixel-rounding/collapsed-border-height-5.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { display: table; position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10px; width: 10px; border-top: 10.5px solid green"></div> +<div style="top: 10px; left: 30px; height: 10.5px; border-right: 10px solid green"></div> +<div style="top: 10px; left: 50px; width: 10px; border-bottom: 10.5px solid green"></div> +<div style="top: 10px; left: 70px; height: 10.5px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90px; border-top: 10.5px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 110px; border-bottom: 10.5px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 130px; border-top: 10.5px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 150px; border-bottom: 10.5px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170px; width: 10px; border-top: 5.5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5.5px solid green;"></div> +<div style="top: 10px; left: 210px; height: 10.5px; border-right: 5px solid green; border-left: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230px; border-right: 5px solid green; border-bottom: 10.5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 250px; border-right: 5px solid green; border-top: 10.5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 270px; border-top: 5px solid green; border-bottom: 5.5px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 290px; border-top: 5.5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 310px; border-top: 5px solid green; border-bottom: 5.5px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 330px; border-top: 5.5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350px; border-top: 5.5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5.5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10px; border: 10px solid green; height: 20.5px; width: 20px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/collapsed-border-height-6.html b/layout/reftests/pixel-rounding/collapsed-border-height-6.html new file mode 100644 index 0000000000..20d8095e3a --- /dev/null +++ b/layout/reftests/pixel-rounding/collapsed-border-height-6.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { display: table; position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10px; width: 10px; border-top: 10.6px solid green"></div> +<div style="top: 10px; left: 30px; height: 10.6px; border-right: 10px solid green"></div> +<div style="top: 10px; left: 50px; width: 10px; border-bottom: 10.6px solid green"></div> +<div style="top: 10px; left: 70px; height: 10.6px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90px; border-top: 10.6px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 110px; border-bottom: 10.6px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 130px; border-top: 10.6px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 150px; border-bottom: 10.6px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170px; width: 10px; border-top: 5.6px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5.6px solid green;"></div> +<div style="top: 10px; left: 210px; height: 10.6px; border-right: 5px solid green; border-left: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230px; border-right: 5px solid green; border-bottom: 10.6px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 250px; border-right: 5px solid green; border-top: 10.6px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 270px; border-top: 5px solid green; border-bottom: 5.6px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 290px; border-top: 5.6px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 310px; border-top: 5px solid green; border-bottom: 5.6px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 330px; border-top: 5.6px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350px; border-top: 5.6px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5.6px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10px; border: 10px solid green; height: 20.6px; width: 20px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/collapsed-border-left-4.html b/layout/reftests/pixel-rounding/collapsed-border-left-4.html new file mode 100644 index 0000000000..4ad5610a80 --- /dev/null +++ b/layout/reftests/pixel-rounding/collapsed-border-left-4.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { display: table; position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10.4px; width: 10px; border-top: 10px solid green"></div> +<div style="top: 10px; left: 30.4px; height: 10px; border-right: 10px solid green"></div> +<div style="top: 10px; left: 50.4px; width: 10px; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 70.4px; height: 10px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90.4px; border-top: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 110.4px; border-bottom: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 130.4px; border-top: 10px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 150.4px; border-bottom: 10px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170.4px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 190.4px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 210.4px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230.4px; border-top: 5px solid green; border-right: 10px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 250.4px; border-top: 5px solid green; border-left: 10px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 270.4px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 290.4px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 310.4px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> +<div style="top: 10px; left: 330.4px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350.4px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370.4px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10.4px; border: 10px solid green; height: 20px; width: 20px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/collapsed-border-left-5.html b/layout/reftests/pixel-rounding/collapsed-border-left-5.html new file mode 100644 index 0000000000..d0316841a7 --- /dev/null +++ b/layout/reftests/pixel-rounding/collapsed-border-left-5.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { display: table; position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10.5px; width: 10px; border-top: 10px solid green"></div> +<div style="top: 10px; left: 30.5px; height: 10px; border-right: 10px solid green"></div> +<div style="top: 10px; left: 50.5px; width: 10px; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 70.5px; height: 10px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90.5px; border-top: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 110.5px; border-bottom: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 130.5px; border-top: 10px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 150.5px; border-bottom: 10px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170.5px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 190.5px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 210.5px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230.5px; border-top: 5px solid green; border-right: 10px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 250.5px; border-top: 5px solid green; border-left: 10px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 270.5px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 290.5px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 310.5px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> +<div style="top: 10px; left: 330.5px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350.5px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370.5px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10.5px; border: 10px solid green; height: 20px; width: 20px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/collapsed-border-left-6.html b/layout/reftests/pixel-rounding/collapsed-border-left-6.html new file mode 100644 index 0000000000..1059fe17ab --- /dev/null +++ b/layout/reftests/pixel-rounding/collapsed-border-left-6.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { display: table; position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10.6px; width: 10px; border-top: 10px solid green"></div> +<div style="top: 10px; left: 30.6px; height: 10px; border-right: 10px solid green"></div> +<div style="top: 10px; left: 50.6px; width: 10px; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 70.6px; height: 10px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90.6px; border-top: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 110.6px; border-bottom: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10px; left: 130.6px; border-top: 10px solid green; border-left: 10px solid green"></div> +<div style="top: 10px; left: 150.6px; border-bottom: 10px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170.6px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 190.6px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 210.6px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230.6px; border-top: 5px solid green; border-right: 10px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 250.6px; border-top: 5px solid green; border-left: 10px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 270.6px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 290.6px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 310.6px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> +<div style="top: 10px; left: 330.6px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350.6px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370.6px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10.6px; border: 10px solid green; height: 20px; width: 20px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/collapsed-border-top-4.html b/layout/reftests/pixel-rounding/collapsed-border-top-4.html new file mode 100644 index 0000000000..dea7979204 --- /dev/null +++ b/layout/reftests/pixel-rounding/collapsed-border-top-4.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { display: table; position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10.4px; left: 10px; width: 10px; border-top: 10px solid green"></div> +<div style="top: 10.4px; left: 30px; height: 10px; border-right: 10px solid green"></div> +<div style="top: 10.4px; left: 50px; width: 10px; border-bottom: 10px solid green"></div> +<div style="top: 10.4px; left: 70px; height: 10px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10.4px; left: 90px; border-top: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10.4px; left: 110px; border-bottom: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10.4px; left: 130px; border-top: 10px solid green; border-left: 10px solid green"></div> +<div style="top: 10.4px; left: 150px; border-bottom: 10px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10.4px; left: 170px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10.4px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10.4px; left: 210px; height: 10px; border-right: 5px solid green; border-left: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10.4px; left: 230px; border-right: 5px solid green; border-bottom: 10px solid green; border-left: 5px solid green"></div> +<div style="top: 10.4px; left: 250px; border-right: 5px solid green; border-top: 10px solid green; border-left: 5px solid green"></div> +<div style="top: 10.4px; left: 270px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10.4px; left: 290px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10.4px; left: 310px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> +<div style="top: 10.4px; left: 330px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10.4px; left: 350px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10.4px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30.4px; left: 10px; border: 10px solid green; height: 20px; width: 20px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/collapsed-border-top-5.html b/layout/reftests/pixel-rounding/collapsed-border-top-5.html new file mode 100644 index 0000000000..41674af3ec --- /dev/null +++ b/layout/reftests/pixel-rounding/collapsed-border-top-5.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { display: table; position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10.5px; left: 10px; width: 10px; border-top: 10px solid green"></div> +<div style="top: 10.5px; left: 30px; height: 10px; border-right: 10px solid green"></div> +<div style="top: 10.5px; left: 50px; width: 10px; border-bottom: 10px solid green"></div> +<div style="top: 10.5px; left: 70px; height: 10px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10.5px; left: 90px; border-top: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10.5px; left: 110px; border-bottom: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10.5px; left: 130px; border-top: 10px solid green; border-left: 10px solid green"></div> +<div style="top: 10.5px; left: 150px; border-bottom: 10px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10.5px; left: 170px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10.5px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10.5px; left: 210px; height: 10px; border-right: 5px solid green; border-left: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10.5px; left: 230px; border-right: 5px solid green; border-bottom: 10px solid green; border-left: 5px solid green"></div> +<div style="top: 10.5px; left: 250px; border-right: 5px solid green; border-top: 10px solid green; border-left: 5px solid green"></div> +<div style="top: 10.5px; left: 270px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10.5px; left: 290px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10.5px; left: 310px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> +<div style="top: 10.5px; left: 330px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10.5px; left: 350px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10.5px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30.5px; left: 10px; border: 10px solid green; height: 20px; width: 20px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/collapsed-border-top-6.html b/layout/reftests/pixel-rounding/collapsed-border-top-6.html new file mode 100644 index 0000000000..d45a281800 --- /dev/null +++ b/layout/reftests/pixel-rounding/collapsed-border-top-6.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { display: table; position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10.6px; left: 10px; width: 10px; border-top: 10px solid green"></div> +<div style="top: 10.6px; left: 30px; height: 10px; border-right: 10px solid green"></div> +<div style="top: 10.6px; left: 50px; width: 10px; border-bottom: 10px solid green"></div> +<div style="top: 10.6px; left: 70px; height: 10px; border-left: 10px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10.6px; left: 90px; border-top: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10.6px; left: 110px; border-bottom: 10px solid green; border-right: 10px solid green"></div> +<div style="top: 10.6px; left: 130px; border-top: 10px solid green; border-left: 10px solid green"></div> +<div style="top: 10.6px; left: 150px; border-bottom: 10px solid green; border-left: 10px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10.6px; left: 170px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10.6px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div> +<div style="top: 10.6px; left: 210px; height: 10px; border-right: 5px solid green; border-left: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10.6px; left: 230px; border-right: 5px solid green; border-bottom: 10px solid green; border-left: 5px solid green"></div> +<div style="top: 10.6px; left: 250px; border-right: 5px solid green; border-top: 10px solid green; border-left: 5px solid green"></div> +<div style="top: 10.6px; left: 270px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10.6px; left: 290px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div> +<div style="top: 10.6px; left: 310px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> +<div style="top: 10.6px; left: 330px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10.6px; left: 350px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10.6px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> + +<!-- border around space --> +<div style="top: 30.6px; left: 10px; border: 10px solid green; height: 20px; width: 20px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/collapsed-border-width-4.html b/layout/reftests/pixel-rounding/collapsed-border-width-4.html new file mode 100644 index 0000000000..e537610efc --- /dev/null +++ b/layout/reftests/pixel-rounding/collapsed-border-width-4.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { display: table; position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10px; width: 10.4px; border-top: 10px solid green"></div> +<div style="top: 10px; left: 30px; height: 10px; border-right: 10.4px solid green"></div> +<div style="top: 10px; left: 50px; width: 10.4px; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 70px; height: 10px; border-left: 10.4px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90px; border-top: 10px solid green; border-right: 10.4px solid green"></div> +<div style="top: 10px; left: 110px; border-bottom: 10px solid green; border-right: 10.4px solid green"></div> +<div style="top: 10px; left: 130px; border-top: 10px solid green; border-left: 10.4px solid green"></div> +<div style="top: 10px; left: 150px; border-bottom: 10px solid green; border-left: 10.4px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170px; height: 10px; border-left: 5.4px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 190px; height: 10px; border-left: 5px solid green; border-right: 5.4px solid green;"></div> +<div style="top: 10px; left: 210px; width: 10.4px; border-top: 5px solid green; border-bottom: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230px; border-top: 5px solid green; border-right: 10.4px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 250px; border-top: 5px solid green; border-left: 10.4px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 270px; border-left: 5px solid green; border-right: 5.4px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 290px; border-left: 5.4px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 310px; border-left: 5px solid green; border-right: 5.4px solid green; border-top: 10px solid green"></div> +<div style="top: 10px; left: 330px; border-left: 5.4px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350px; border-top: 5px solid green; border-right: 5.4px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5.4px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10px; border: 10px solid green; height: 20px; width: 20.4px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/collapsed-border-width-5.html b/layout/reftests/pixel-rounding/collapsed-border-width-5.html new file mode 100644 index 0000000000..ffdeb5c4fa --- /dev/null +++ b/layout/reftests/pixel-rounding/collapsed-border-width-5.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { display: table; position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10px; width: 10.5px; border-top: 10px solid green"></div> +<div style="top: 10px; left: 30px; height: 10px; border-right: 10.5px solid green"></div> +<div style="top: 10px; left: 50px; width: 10.5px; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 70px; height: 10px; border-left: 10.5px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90px; border-top: 10px solid green; border-right: 10.5px solid green"></div> +<div style="top: 10px; left: 110px; border-bottom: 10px solid green; border-right: 10.5px solid green"></div> +<div style="top: 10px; left: 130px; border-top: 10px solid green; border-left: 10.5px solid green"></div> +<div style="top: 10px; left: 150px; border-bottom: 10px solid green; border-left: 10.5px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170px; height: 10px; border-left: 5.5px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 190px; height: 10px; border-left: 5px solid green; border-right: 5.5px solid green;"></div> +<div style="top: 10px; left: 210px; width: 10.5px; border-top: 5px solid green; border-bottom: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230px; border-top: 5px solid green; border-right: 10.5px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 250px; border-top: 5px solid green; border-left: 10.5px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 270px; border-left: 5px solid green; border-right: 5.5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 290px; border-left: 5.5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 310px; border-left: 5px solid green; border-right: 5.5px solid green; border-top: 10px solid green"></div> +<div style="top: 10px; left: 330px; border-left: 5.5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350px; border-top: 5px solid green; border-right: 5.5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5.5px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10px; border: 10px solid green; height: 20px; width: 20.5px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/collapsed-border-width-6.html b/layout/reftests/pixel-rounding/collapsed-border-width-6.html new file mode 100644 index 0000000000..732524ad1a --- /dev/null +++ b/layout/reftests/pixel-rounding/collapsed-border-width-6.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { display: table; position: absolute; } + +</style> +</head> +<body> + +<!-- one border --> +<div style="top: 10px; left: 10px; width: 10.6px; border-top: 10px solid green"></div> +<div style="top: 10px; left: 30px; height: 10px; border-right: 10.6px solid green"></div> +<div style="top: 10px; left: 50px; width: 10.6px; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 70px; height: 10px; border-left: 10.6px solid green"></div> + +<!-- two adjacent borders --> +<div style="top: 10px; left: 90px; border-top: 10px solid green; border-right: 10.6px solid green"></div> +<div style="top: 10px; left: 110px; border-bottom: 10px solid green; border-right: 10.6px solid green"></div> +<div style="top: 10px; left: 130px; border-top: 10px solid green; border-left: 10.6px solid green"></div> +<div style="top: 10px; left: 150px; border-bottom: 10px solid green; border-left: 10.6px solid green"></div> + +<!-- two opposite borders --> +<div style="top: 10px; left: 170px; height: 10px; border-left: 5.6px solid green; border-right: 5px solid green;"></div> +<div style="top: 10px; left: 190px; height: 10px; border-left: 5px solid green; border-right: 5.6px solid green;"></div> +<div style="top: 10px; left: 210px; width: 10.6px; border-top: 5px solid green; border-bottom: 5px solid green"></div> + +<!-- three borders --> +<div style="top: 10px; left: 230px; border-top: 5px solid green; border-right: 10.6px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 250px; border-top: 5px solid green; border-left: 10.6px solid green; border-bottom: 5px solid green"></div> +<div style="top: 10px; left: 270px; border-left: 5px solid green; border-right: 5.6px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 290px; border-left: 5.6px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div> +<div style="top: 10px; left: 310px; border-left: 5px solid green; border-right: 5.6px solid green; border-top: 10px solid green"></div> +<div style="top: 10px; left: 330px; border-left: 5.6px solid green; border-right: 5px solid green; border-top: 10px solid green"></div> + +<!-- four borders --> +<div style="top: 10px; left: 350px; border-top: 5px solid green; border-right: 5.6px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div> +<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5.6px solid green"></div> + +<!-- border around space --> +<div style="top: 30px; left: 10px; border: 10px solid green; height: 20px; width: 20.6px"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/corner-bl.png b/layout/reftests/pixel-rounding/corner-bl.png Binary files differnew file mode 100644 index 0000000000..f9be106e07 --- /dev/null +++ b/layout/reftests/pixel-rounding/corner-bl.png diff --git a/layout/reftests/pixel-rounding/corner-br.png b/layout/reftests/pixel-rounding/corner-br.png Binary files differnew file mode 100644 index 0000000000..44accf9449 --- /dev/null +++ b/layout/reftests/pixel-rounding/corner-br.png diff --git a/layout/reftests/pixel-rounding/corner-tl.png b/layout/reftests/pixel-rounding/corner-tl.png Binary files differnew file mode 100644 index 0000000000..65a71e1199 --- /dev/null +++ b/layout/reftests/pixel-rounding/corner-tl.png diff --git a/layout/reftests/pixel-rounding/corner-tr.png b/layout/reftests/pixel-rounding/corner-tr.png Binary files differnew file mode 100644 index 0000000000..97cedba6ca --- /dev/null +++ b/layout/reftests/pixel-rounding/corner-tr.png diff --git a/layout/reftests/pixel-rounding/green-1x1.png b/layout/reftests/pixel-rounding/green-1x1.png Binary files differnew file mode 100644 index 0000000000..18b59be474 --- /dev/null +++ b/layout/reftests/pixel-rounding/green-1x1.png diff --git a/layout/reftests/pixel-rounding/green-25x25.png b/layout/reftests/pixel-rounding/green-25x25.png Binary files differnew file mode 100644 index 0000000000..a972cb073a --- /dev/null +++ b/layout/reftests/pixel-rounding/green-25x25.png diff --git a/layout/reftests/pixel-rounding/green-3x3.png b/layout/reftests/pixel-rounding/green-3x3.png Binary files differnew file mode 100644 index 0000000000..86d1cd244a --- /dev/null +++ b/layout/reftests/pixel-rounding/green-3x3.png diff --git a/layout/reftests/pixel-rounding/green-5x5.png b/layout/reftests/pixel-rounding/green-5x5.png Binary files differnew file mode 100644 index 0000000000..94fdffd033 --- /dev/null +++ b/layout/reftests/pixel-rounding/green-5x5.png diff --git a/layout/reftests/pixel-rounding/green-circle-with-blue-border.png b/layout/reftests/pixel-rounding/green-circle-with-blue-border.png Binary files differnew file mode 100644 index 0000000000..570fd24944 --- /dev/null +++ b/layout/reftests/pixel-rounding/green-circle-with-blue-border.png diff --git a/layout/reftests/pixel-rounding/iframe-1-ref.html b/layout/reftests/pixel-rounding/iframe-1-ref.html new file mode 100644 index 0000000000..bc38a6fffd --- /dev/null +++ b/layout/reftests/pixel-rounding/iframe-1-ref.html @@ -0,0 +1,6 @@ +<html> +<body style="background-color: rgb(255,0,0)"> +<iframe style="position: fixed; top: 11" src="data:text/html,<body style='background-color: rgba(0,0,255,0.5)'>"> +</iframe> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/iframe-1.html b/layout/reftests/pixel-rounding/iframe-1.html new file mode 100644 index 0000000000..c98f73cb37 --- /dev/null +++ b/layout/reftests/pixel-rounding/iframe-1.html @@ -0,0 +1,6 @@ +<html> +<body style="background-color: rgb(255,0,0)"> +<iframe style="position: fixed; top: 10.5" src="data:text/html,<body style='background-color: rgba(0,0,255,0.5)'>"> +</iframe> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-base-ref.html b/layout/reftests/pixel-rounding/image-base-ref.html new file mode 100644 index 0000000000..5cffc12359 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-base-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; background: blue; } + +div.i1 { left: 10px; } +div.i3 { left: 40px; } +div.i5 { left: 70px; } +div.i25 { left: 100px; } + +div.s1 { top: 10px; height: 1px; width: 1px; } +div.s3 { top: 30px; height: 3px; width: 3px; } +div.s5 { top: 50px; height: 5px; width: 5px; } +div.s25 { top: 70px; height: 25px; width: 25px; } + +</style> +</head> +<body> + +<div class="s1 i1"></div> +<div class="s1 i3"></div> +<div class="s1 i5"></div> +<div class="s1 i25"></div> + +<div class="s3 i1"></div> +<div class="s3 i3"></div> +<div class="s3 i5"></div> +<div class="s3 i25"></div> + +<div class="s5 i1"></div> +<div class="s5 i3"></div> +<div class="s5 i5"></div> +<div class="s5 i25"></div> + +<div class="s25 i1"></div> +<div class="s25 i3"></div> +<div class="s25 i5"></div> +<div class="s25 i25"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-height-10-ref.html b/layout/reftests/pixel-rounding/image-height-10-ref.html new file mode 100644 index 0000000000..858e4445a8 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-height-10-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; background: blue; } + +div.i1 { left: 10px; } +div.i3 { left: 40px; } +div.i5 { left: 70px; } +div.i25 { left: 100px; } + +div.s1 { top: 10px; height: 2px; width: 1px; } +div.s3 { top: 30px; height: 4px; width: 3px; } +div.s5 { top: 50px; height: 6px; width: 5px; } +div.s25 { top: 70px; height: 26px; width: 25px; } + +</style> +</head> +<body> + +<div class="s1 i1"></div> +<div class="s1 i3"></div> +<div class="s1 i5"></div> +<div class="s1 i25"></div> + +<div class="s3 i1"></div> +<div class="s3 i3"></div> +<div class="s3 i5"></div> +<div class="s3 i25"></div> + +<div class="s5 i1"></div> +<div class="s5 i3"></div> +<div class="s5 i5"></div> +<div class="s5 i25"></div> + +<div class="s25 i1"></div> +<div class="s25 i3"></div> +<div class="s25 i5"></div> +<div class="s25 i25"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-height-4.html b/layout/reftests/pixel-rounding/image-height-4.html new file mode 100644 index 0000000000..1903fdf293 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-height-4.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 10px; height: 1.4px; width: 1px; } +img.s3 { top: 30px; height: 3.4px; width: 3px; } +img.s5 { top: 50px; height: 5.4px; width: 5px; } +img.s25 { top: 70px; height: 25.4px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-height-5.html b/layout/reftests/pixel-rounding/image-height-5.html new file mode 100644 index 0000000000..de8e3e9c97 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-height-5.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 10px; height: 1.5px; width: 1px; } +img.s3 { top: 30px; height: 3.5px; width: 3px; } +img.s5 { top: 50px; height: 5.5px; width: 5px; } +img.s25 { top: 70px; height: 25.5px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-height-6.html b/layout/reftests/pixel-rounding/image-height-6.html new file mode 100644 index 0000000000..1afc5e6012 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-height-6.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 10px; height: 1.6px; width: 1px; } +img.s3 { top: 30px; height: 3.6px; width: 3px; } +img.s5 { top: 50px; height: 5.6px; width: 5px; } +img.s25 { top: 70px; height: 25.6px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-height-top-4.html b/layout/reftests/pixel-rounding/image-height-top-4.html new file mode 100644 index 0000000000..5f91bd314e --- /dev/null +++ b/layout/reftests/pixel-rounding/image-height-top-4.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 9.9px; height: 1.5px; width: 1px; } +img.s3 { top: 29.9px; height: 3.5px; width: 3px; } +img.s5 { top: 49.9px; height: 5.5px; width: 5px; } +img.s25 { top: 69.9px; height: 25.5px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-height-top-5.html b/layout/reftests/pixel-rounding/image-height-top-5.html new file mode 100644 index 0000000000..de8e3e9c97 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-height-top-5.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 10px; height: 1.5px; width: 1px; } +img.s3 { top: 30px; height: 3.5px; width: 3px; } +img.s5 { top: 50px; height: 5.5px; width: 5px; } +img.s25 { top: 70px; height: 25.5px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-height-top-6.html b/layout/reftests/pixel-rounding/image-height-top-6.html new file mode 100644 index 0000000000..4f446f3e35 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-height-top-6.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 10.1px; height: 1.5px; width: 1px; } +img.s3 { top: 30.1px; height: 3.5px; width: 3px; } +img.s5 { top: 50.1px; height: 5.5px; width: 5px; } +img.s25 { top: 70.1px; height: 25.5px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-high-quality-scaling-1-ref.html b/layout/reftests/pixel-rounding/image-high-quality-scaling-1-ref.html new file mode 100644 index 0000000000..62df7fa511 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-high-quality-scaling-1-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html class="reftest-wait"> +<head> + <script> + // We add an artificial delay before the reftest snapshot to increase the + // chance that we're snapshotting the high-quality downscaled version of + // the image. This is necessary because high-quality downscaling is + // currently an async process. Bug 1045926 will eliminate the need for this + // delay. + function snapshot() { + document.documentElement.removeAttribute('class'); + } + </script> +</head> +<body onload="setTimeout(snapshot, 250)"> +<div style="padding: 1em 3em; font-size: 80%; width: 300px; text-align: center;"> + <img src="green-circle-with-blue-border.png" width="179" height="220"> +</div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-high-quality-scaling-1.html b/layout/reftests/pixel-rounding/image-high-quality-scaling-1.html new file mode 100644 index 0000000000..e3d14a61f9 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-high-quality-scaling-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html class="reftest-wait"> +<head> + <script> + // We add an artificial delay before the reftest snapshot to increase the + // chance that we're snapshotting the high-quality downscaled version of + // the image. This is necessary because high-quality downscaling is + // currently an async process. Bug 1045926 will eliminate the need for this + // delay. + function snapshot() { + document.documentElement.removeAttribute('class'); + } + </script> +</head> +<body onload="setTimeout(snapshot, 250)"> +<div style="padding: 1em 3em; font-size: 80%; width: 300px; text-align: center;"> + <img src="green-circle-with-blue-border.png" height="220"> +</div> +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-left-10-ref.html b/layout/reftests/pixel-rounding/image-left-10-ref.html new file mode 100644 index 0000000000..489e4ff335 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-left-10-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; background: blue; } + +div.i1 { left: 11px; } +div.i3 { left: 41px; } +div.i5 { left: 71px; } +div.i25 { left: 101px; } + +div.s1 { top: 10px; height: 1px; width: 1px; } +div.s3 { top: 30px; height: 3px; width: 3px; } +div.s5 { top: 50px; height: 5px; width: 5px; } +div.s25 { top: 70px; height: 25px; width: 25px; } + +</style> +</head> +<body> + +<div class="s1 i1"></div> +<div class="s1 i3"></div> +<div class="s1 i5"></div> +<div class="s1 i25"></div> + +<div class="s3 i1"></div> +<div class="s3 i3"></div> +<div class="s3 i5"></div> +<div class="s3 i25"></div> + +<div class="s5 i1"></div> +<div class="s5 i3"></div> +<div class="s5 i5"></div> +<div class="s5 i25"></div> + +<div class="s25 i1"></div> +<div class="s25 i3"></div> +<div class="s25 i5"></div> +<div class="s25 i25"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-left-4.html b/layout/reftests/pixel-rounding/image-left-4.html new file mode 100644 index 0000000000..d8e2cab293 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-left-4.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10.4px; } +img[src="blue-3x3.png"] { left: 40.4px; } +img[src="blue-5x5.png"] { left: 70.4px; } +img[src="blue-25x25.png"] { left: 100.4px; } + +img.s1 { top: 10px; height: 1px; width: 1px; } +img.s3 { top: 30px; height: 3px; width: 3px; } +img.s5 { top: 50px; height: 5px; width: 5px; } +img.s25 { top: 70px; height: 25px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-left-5.html b/layout/reftests/pixel-rounding/image-left-5.html new file mode 100644 index 0000000000..47c80820d0 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-left-5.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10.5px; } +img[src="blue-3x3.png"] { left: 40.5px; } +img[src="blue-5x5.png"] { left: 70.5px; } +img[src="blue-25x25.png"] { left: 100.5px; } + +img.s1 { top: 10px; height: 1px; width: 1px; } +img.s3 { top: 30px; height: 3px; width: 3px; } +img.s5 { top: 50px; height: 5px; width: 5px; } +img.s25 { top: 70px; height: 25px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-left-6.html b/layout/reftests/pixel-rounding/image-left-6.html new file mode 100644 index 0000000000..68ac4e06d6 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-left-6.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10.6px; } +img[src="blue-3x3.png"] { left: 40.6px; } +img[src="blue-5x5.png"] { left: 70.6px; } +img[src="blue-25x25.png"] { left: 100.6px; } + +img.s1 { top: 10px; height: 1px; width: 1px; } +img.s3 { top: 30px; height: 3px; width: 3px; } +img.s5 { top: 50px; height: 5px; width: 5px; } +img.s25 { top: 70px; height: 25px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-left-width-4.html b/layout/reftests/pixel-rounding/image-left-width-4.html new file mode 100644 index 0000000000..c671875d8f --- /dev/null +++ b/layout/reftests/pixel-rounding/image-left-width-4.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 9.5px; } +img[src="blue-3x3.png"] { left: 39.5px; } +img[src="blue-5x5.png"] { left: 69.5px; } +img[src="blue-25x25.png"] { left: 99.5px; } + +img.s1 { top: 10px; height: 1px; width: 1.9px; } +img.s3 { top: 30px; height: 3px; width: 3.9px; } +img.s5 { top: 50px; height: 5px; width: 5.9px; } +img.s25 { top: 70px; height: 25px; width: 25.9px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-left-width-5.html b/layout/reftests/pixel-rounding/image-left-width-5.html new file mode 100644 index 0000000000..f4905bdad3 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-left-width-5.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 9.5px; } +img[src="blue-3x3.png"] { left: 39.5px; } +img[src="blue-5x5.png"] { left: 69.5px; } +img[src="blue-25x25.png"] { left: 99.5px; } + +img.s1 { top: 10px; height: 1px; width: 2px; } +img.s3 { top: 30px; height: 3px; width: 4px; } +img.s5 { top: 50px; height: 5px; width: 6px; } +img.s25 { top: 70px; height: 25px; width: 26px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-left-width-6.html b/layout/reftests/pixel-rounding/image-left-width-6.html new file mode 100644 index 0000000000..4c51386b5b --- /dev/null +++ b/layout/reftests/pixel-rounding/image-left-width-6.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 9.5px; } +img[src="blue-3x3.png"] { left: 39.5px; } +img[src="blue-5x5.png"] { left: 69.5px; } +img[src="blue-25x25.png"] { left: 99.5px; } + +img.s1 { top: 10px; height: 1px; width: 2.1px; } +img.s3 { top: 30px; height: 3px; width: 4.1px; } +img.s5 { top: 50px; height: 5px; width: 6.1px; } +img.s25 { top: 70px; height: 25px; width: 26.1px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-top-10-ref.html b/layout/reftests/pixel-rounding/image-top-10-ref.html new file mode 100644 index 0000000000..9df47260a9 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-top-10-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; background: blue; } + +div.i1 { left: 10px; } +div.i3 { left: 40px; } +div.i5 { left: 70px; } +div.i25 { left: 100px; } + +div.s1 { top: 11px; height: 1px; width: 1px; } +div.s3 { top: 31px; height: 3px; width: 3px; } +div.s5 { top: 51px; height: 5px; width: 5px; } +div.s25 { top: 71px; height: 25px; width: 25px; } + +</style> +</head> +<body> + +<div class="s1 i1"></div> +<div class="s1 i3"></div> +<div class="s1 i5"></div> +<div class="s1 i25"></div> + +<div class="s3 i1"></div> +<div class="s3 i3"></div> +<div class="s3 i5"></div> +<div class="s3 i25"></div> + +<div class="s5 i1"></div> +<div class="s5 i3"></div> +<div class="s5 i5"></div> +<div class="s5 i25"></div> + +<div class="s25 i1"></div> +<div class="s25 i3"></div> +<div class="s25 i5"></div> +<div class="s25 i25"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-top-4.html b/layout/reftests/pixel-rounding/image-top-4.html new file mode 100644 index 0000000000..82b260ad37 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-top-4.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 10.4px; height: 1px; width: 1px; } +img.s3 { top: 30.4px; height: 3px; width: 3px; } +img.s5 { top: 50.4px; height: 5px; width: 5px; } +img.s25 { top: 70.4px; height: 25px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-top-5.html b/layout/reftests/pixel-rounding/image-top-5.html new file mode 100644 index 0000000000..9fe616c5d1 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-top-5.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 10.5px; height: 1px; width: 1px; } +img.s3 { top: 30.5px; height: 3px; width: 3px; } +img.s5 { top: 50.5px; height: 5px; width: 5px; } +img.s25 { top: 70.5px; height: 25px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-top-6.html b/layout/reftests/pixel-rounding/image-top-6.html new file mode 100644 index 0000000000..d634da9bf9 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-top-6.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 10.6px; height: 1px; width: 1px; } +img.s3 { top: 30.6px; height: 3px; width: 3px; } +img.s5 { top: 50.6px; height: 5px; width: 5px; } +img.s25 { top: 70.6px; height: 25px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-top-height-4.html b/layout/reftests/pixel-rounding/image-top-height-4.html new file mode 100644 index 0000000000..b9127bb056 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-top-height-4.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 9.5px; height: 1.9px; width: 1px; } +img.s3 { top: 29.5px; height: 3.9px; width: 3px; } +img.s5 { top: 49.5px; height: 5.9px; width: 5px; } +img.s25 { top: 69.5px; height: 25.9px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-top-height-5.html b/layout/reftests/pixel-rounding/image-top-height-5.html new file mode 100644 index 0000000000..b9c6f4b92c --- /dev/null +++ b/layout/reftests/pixel-rounding/image-top-height-5.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 9.5px; height: 2px; width: 1px; } +img.s3 { top: 29.5px; height: 4px; width: 3px; } +img.s5 { top: 49.5px; height: 6px; width: 5px; } +img.s25 { top: 69.5px; height: 26px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-top-height-6.html b/layout/reftests/pixel-rounding/image-top-height-6.html new file mode 100644 index 0000000000..35b97b3eaf --- /dev/null +++ b/layout/reftests/pixel-rounding/image-top-height-6.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 9.5px; height: 2.1px; width: 1px; } +img.s3 { top: 29.5px; height: 4.1px; width: 3px; } +img.s5 { top: 49.5px; height: 6.1px; width: 5px; } +img.s25 { top: 69.5px; height: 26.1px; width: 25px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-width-10-ref.html b/layout/reftests/pixel-rounding/image-width-10-ref.html new file mode 100644 index 0000000000..650389da4c --- /dev/null +++ b/layout/reftests/pixel-rounding/image-width-10-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; background: blue; } + +div.i1 { left: 10px; } +div.i3 { left: 40px; } +div.i5 { left: 70px; } +div.i25 { left: 100px; } + +div.s1 { top: 10px; height: 1px; width: 2px; } +div.s3 { top: 30px; height: 3px; width: 4px; } +div.s5 { top: 50px; height: 5px; width: 6px; } +div.s25 { top: 70px; height: 25px; width: 26px; } + +</style> +</head> +<body> + +<div class="s1 i1"></div> +<div class="s1 i3"></div> +<div class="s1 i5"></div> +<div class="s1 i25"></div> + +<div class="s3 i1"></div> +<div class="s3 i3"></div> +<div class="s3 i5"></div> +<div class="s3 i25"></div> + +<div class="s5 i1"></div> +<div class="s5 i3"></div> +<div class="s5 i5"></div> +<div class="s5 i25"></div> + +<div class="s25 i1"></div> +<div class="s25 i3"></div> +<div class="s25 i5"></div> +<div class="s25 i25"></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-width-4.html b/layout/reftests/pixel-rounding/image-width-4.html new file mode 100644 index 0000000000..39a4df62d2 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-width-4.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 10px; height: 1px; width: 1.4px; } +img.s3 { top: 30px; height: 3px; width: 3.4px; } +img.s5 { top: 50px; height: 5px; width: 5.4px; } +img.s25 { top: 70px; height: 25px; width: 25.4px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-width-5.html b/layout/reftests/pixel-rounding/image-width-5.html new file mode 100644 index 0000000000..d1673b3369 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-width-5.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 10px; height: 1px; width: 1.5px; } +img.s3 { top: 30px; height: 3px; width: 3.5px; } +img.s5 { top: 50px; height: 5px; width: 5.5px; } +img.s25 { top: 70px; height: 25px; width: 25.5px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-width-6.html b/layout/reftests/pixel-rounding/image-width-6.html new file mode 100644 index 0000000000..a3929ff30e --- /dev/null +++ b/layout/reftests/pixel-rounding/image-width-6.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 10px; height: 1px; width: 1.6px; } +img.s3 { top: 30px; height: 3px; width: 3.6px; } +img.s5 { top: 50px; height: 5px; width: 5.6px; } +img.s25 { top: 70px; height: 25px; width: 25.6px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-width-left-4.html b/layout/reftests/pixel-rounding/image-width-left-4.html new file mode 100644 index 0000000000..b9d381ed76 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-width-left-4.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 9.9px; } +img[src="blue-3x3.png"] { left: 39.9px; } +img[src="blue-5x5.png"] { left: 69.9px; } +img[src="blue-25x25.png"] { left: 99.9px; } + +img.s1 { top: 10px; height: 1px; width: 1.5px; } +img.s3 { top: 30px; height: 3px; width: 3.5px; } +img.s5 { top: 50px; height: 5px; width: 5.5px; } +img.s25 { top: 70px; height: 25px; width: 25.5px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-width-left-5.html b/layout/reftests/pixel-rounding/image-width-left-5.html new file mode 100644 index 0000000000..d1673b3369 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-width-left-5.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10px; } +img[src="blue-3x3.png"] { left: 40px; } +img[src="blue-5x5.png"] { left: 70px; } +img[src="blue-25x25.png"] { left: 100px; } + +img.s1 { top: 10px; height: 1px; width: 1.5px; } +img.s3 { top: 30px; height: 3px; width: 3.5px; } +img.s5 { top: 50px; height: 5px; width: 5.5px; } +img.s25 { top: 70px; height: 25px; width: 25.5px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/image-width-left-6.html b/layout/reftests/pixel-rounding/image-width-left-6.html new file mode 100644 index 0000000000..2d91aec403 --- /dev/null +++ b/layout/reftests/pixel-rounding/image-width-left-6.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; } + +img[src="blue-1x1.png"] { left: 10.1px; } +img[src="blue-3x3.png"] { left: 40.1px; } +img[src="blue-5x5.png"] { left: 70.1px; } +img[src="blue-25x25.png"] { left: 100.1px; } + +img.s1 { top: 10px; height: 1px; width: 1.5px; } +img.s3 { top: 30px; height: 3px; width: 3.5px; } +img.s5 { top: 50px; height: 5px; width: 5.5px; } +img.s25 { top: 70px; height: 25px; width: 25.5px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-1x1.png"> +<img class="s1" src="blue-3x3.png"> +<img class="s1" src="blue-5x5.png"> +<img class="s1" src="blue-25x25.png"> + +<img class="s3" src="blue-1x1.png"> +<img class="s3" src="blue-3x3.png"> +<img class="s3" src="blue-5x5.png"> +<img class="s3" src="blue-25x25.png"> + +<img class="s5" src="blue-1x1.png"> +<img class="s5" src="blue-3x3.png"> +<img class="s5" src="blue-5x5.png"> +<img class="s5" src="blue-25x25.png"> + +<img class="s25" src="blue-1x1.png"> +<img class="s25" src="blue-3x3.png"> +<img class="s25" src="blue-5x5.png"> +<img class="s25" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/lime-25x25.png b/layout/reftests/pixel-rounding/lime-25x25.png Binary files differnew file mode 100644 index 0000000000..165a9d5279 --- /dev/null +++ b/layout/reftests/pixel-rounding/lime-25x25.png diff --git a/layout/reftests/pixel-rounding/offscreen-0-ref.html b/layout/reftests/pixel-rounding/offscreen-0-ref.html new file mode 100644 index 0000000000..de78c62a98 --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-0-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; background: blue; + top: 0px; left: 0px; width: 15px; height: 15px; } + +</style> +</head> +<body> + +<div></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/offscreen-10-ref.html b/layout/reftests/pixel-rounding/offscreen-10-ref.html new file mode 100644 index 0000000000..b599e72feb --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-10-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; background: blue; + top: 0px; left: 0px; width: 16px; height: 16px; } + +</style> +</head> +<body> + +<div></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/offscreen-background-color-pos-4.html b/layout/reftests/pixel-rounding/offscreen-background-color-pos-4.html new file mode 100644 index 0000000000..ebc8d8058a --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-background-color-pos-4.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; background: blue; + top: -9.6px; left: -9.6px; width: 25px; height: 25px; } + +</style> +</head> +<body> + +<div></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/offscreen-background-color-pos-5.html b/layout/reftests/pixel-rounding/offscreen-background-color-pos-5.html new file mode 100644 index 0000000000..c5c9e560d2 --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-background-color-pos-5.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; background: blue; + top: -9.5px; left: -9.5px; width: 25px; height: 25px; } + +</style> +</head> +<body> + +<div></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/offscreen-background-color-pos-6.html b/layout/reftests/pixel-rounding/offscreen-background-color-pos-6.html new file mode 100644 index 0000000000..83a011e7c7 --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-background-color-pos-6.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; background: blue; + top: -9.4px; left: -9.4px; width: 25px; height: 25px; } + +</style> +</head> +<body> + +<div></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/offscreen-background-color-size-4.html b/layout/reftests/pixel-rounding/offscreen-background-color-size-4.html new file mode 100644 index 0000000000..d907fe0c11 --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-background-color-size-4.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; background: blue; + top: -10px; left: -10px; width: 25.4px; height: 25.4px; } + +</style> +</head> +<body> + +<div></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/offscreen-background-color-size-5.html b/layout/reftests/pixel-rounding/offscreen-background-color-size-5.html new file mode 100644 index 0000000000..5d1bd5d4ee --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-background-color-size-5.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; background: blue; + top: -10px; left: -10px; width: 25.5px; height: 25.5px; } + +</style> +</head> +<body> + +<div></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/offscreen-background-color-size-6.html b/layout/reftests/pixel-rounding/offscreen-background-color-size-6.html new file mode 100644 index 0000000000..a9d593eee0 --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-background-color-size-6.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +div { position: absolute; background: blue; + top: -10px; left: -10px; width: 25.6px; height: 25.6px; } + +</style> +</head> +<body> + +<div></div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/offscreen-image-pos-4.html b/layout/reftests/pixel-rounding/offscreen-image-pos-4.html new file mode 100644 index 0000000000..a662860224 --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-image-pos-4.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; top: -9.6px; left: -9.6px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/offscreen-image-pos-5.html b/layout/reftests/pixel-rounding/offscreen-image-pos-5.html new file mode 100644 index 0000000000..33cacb01dd --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-image-pos-5.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; top: -9.5px; left: -9.5px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/offscreen-image-pos-6.html b/layout/reftests/pixel-rounding/offscreen-image-pos-6.html new file mode 100644 index 0000000000..996051b604 --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-image-pos-6.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; top: -9.4px; left: -9.4px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/offscreen-image-size-4.html b/layout/reftests/pixel-rounding/offscreen-image-size-4.html new file mode 100644 index 0000000000..99a630f0a7 --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-image-size-4.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; top: -10px; left: -10px; height: 25.4px; width: 25.4px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/offscreen-image-size-5.html b/layout/reftests/pixel-rounding/offscreen-image-size-5.html new file mode 100644 index 0000000000..42cd94925b --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-image-size-5.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; top: -10px; left: -10px; height: 25.5px; width: 25.5px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/offscreen-image-size-6.html b/layout/reftests/pixel-rounding/offscreen-image-size-6.html new file mode 100644 index 0000000000..dc1805d54e --- /dev/null +++ b/layout/reftests/pixel-rounding/offscreen-image-size-6.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } +img { position: absolute; top: -10px; left: -10px; height: 25.6px; width: 25.6px; } + +</style> +</head> +<body> + +<img class="s1" src="blue-25x25.png"> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/random-10x10.png b/layout/reftests/pixel-rounding/random-10x10.png Binary files differnew file mode 100644 index 0000000000..466588ade1 --- /dev/null +++ b/layout/reftests/pixel-rounding/random-10x10.png diff --git a/layout/reftests/pixel-rounding/reftest.list b/layout/reftests/pixel-rounding/reftest.list new file mode 100644 index 0000000000..333d9611bd --- /dev/null +++ b/layout/reftests/pixel-rounding/reftest.list @@ -0,0 +1,183 @@ +== check-image.html check-image-ref.html +== check-image-blue.html check-image-blue-ref.html + + +!= background-color-base.html background-color-height-10.html +== background-color-height-4.html background-color-base.html +== background-color-height-5.html background-color-height-10.html +== background-color-height-6.html background-color-height-10.html +!= background-color-base.html background-color-top-10.html +== background-color-top-4.html background-color-base.html +== background-color-top-5.html background-color-top-10.html +== background-color-top-6.html background-color-top-10.html +!= background-color-base.html background-color-width-10.html +== background-color-width-4.html background-color-base.html +== background-color-width-5.html background-color-width-10.html +== background-color-width-6.html background-color-width-10.html +!= background-color-base.html background-color-left-10.html +== background-color-left-4.html background-color-base.html +== background-color-left-5.html background-color-left-10.html +== background-color-left-6.html background-color-left-10.html +== background-color-top-height-4.html background-color-height-4.html +== background-color-top-height-5.html background-color-height-5.html +== background-color-top-height-6.html background-color-height-6.html +== background-color-left-width-4.html background-color-width-4.html +== background-color-left-width-5.html background-color-width-5.html +== background-color-left-width-6.html background-color-width-6.html +== background-color-height-top-4.html background-color-height-4.html +== background-color-height-top-5.html background-color-height-5.html +== background-color-height-top-6.html background-color-height-6.html +== background-color-width-left-4.html background-color-width-4.html +== background-color-width-left-5.html background-color-width-5.html +== background-color-width-left-6.html background-color-width-6.html + + +!= border-base-ref.html border-height-10-ref.html +== border-height-4.html border-base-ref.html +== border-height-5.html border-height-10-ref.html +== border-height-6.html border-height-10-ref.html +!= border-base-ref.html border-width-10-ref.html +== border-width-4.html border-base-ref.html +== border-width-5.html border-width-10-ref.html +== border-width-6.html border-width-10-ref.html +!= border-base-ref.html border-left-10-ref.html +== border-left-4.html border-base-ref.html +== border-left-5.html border-left-10-ref.html +== border-left-6.html border-left-10-ref.html +!= border-base-ref.html border-top-10-ref.html +== border-top-4.html border-base-ref.html +== border-top-5.html border-top-10-ref.html +== border-top-6.html border-top-10-ref.html + +!= background-image-base.html background-image-height-10-ref.html +== background-image-height-4.html background-image-base.html +== background-image-height-5.html background-image-height-10-ref.html +== background-image-height-6.html background-image-height-10-ref.html +!= background-image-base.html background-image-top-10-ref.html +== background-image-top-4.html background-image-base.html +== background-image-top-5.html background-image-top-10-ref.html +== background-image-top-6.html background-image-top-10-ref.html +!= background-image-base.html background-image-width-10-ref.html +== background-image-width-4.html background-image-base.html +== background-image-width-5.html background-image-width-10-ref.html +== background-image-width-6.html background-image-width-10-ref.html +!= background-image-base.html background-image-left-10-ref.html +== background-image-left-4.html background-image-base.html +== background-image-left-5.html background-image-left-10-ref.html +== background-image-left-6.html background-image-left-10-ref.html +== background-image-top-height-4.html background-image-height-4.html +== background-image-top-height-5.html background-image-height-5.html +== background-image-top-height-6.html background-image-height-6.html +== background-image-left-width-4.html background-image-width-4.html +== background-image-left-width-5.html background-image-width-5.html +== background-image-left-width-6.html background-image-width-6.html +== background-image-height-top-4.html background-image-height-4.html +== background-image-height-top-5.html background-image-height-5.html +== background-image-height-top-6.html background-image-height-6.html +== background-image-width-left-4.html background-image-width-4.html +== background-image-width-left-5.html background-image-width-5.html +== background-image-width-left-6.html background-image-width-6.html + + +# These all fail due bug 371180, plus a bunch of other bugs that ought to be filed. +fails == collapsed-border-height-4.html border-base-ref.html +fails == collapsed-border-height-5.html border-height-10-ref.html +fails == collapsed-border-height-6.html border-height-10-ref.html +fails == collapsed-border-width-4.html border-base-ref.html +fails == collapsed-border-width-5.html border-width-10-ref.html +fails == collapsed-border-width-6.html border-width-10-ref.html +fails == collapsed-border-left-4.html border-base-ref.html +fails == collapsed-border-left-5.html border-left-10-ref.html +fails == collapsed-border-left-6.html border-left-10-ref.html +fails == collapsed-border-top-4.html border-base-ref.html +fails == collapsed-border-top-5.html border-top-10-ref.html +fails == collapsed-border-top-6.html border-top-10-ref.html + + +!= image-base-ref.html image-height-10-ref.html +== image-height-4.html image-base-ref.html +== image-height-5.html image-height-10-ref.html +== image-height-6.html image-height-10-ref.html +!= image-base-ref.html image-top-10-ref.html +== image-top-4.html image-base-ref.html +== image-top-5.html image-top-10-ref.html +== image-top-6.html image-top-10-ref.html +!= image-base-ref.html image-width-10-ref.html +== image-width-4.html image-base-ref.html +== image-width-5.html image-width-10-ref.html +== image-width-6.html image-width-10-ref.html +!= image-base-ref.html image-left-10-ref.html +== image-left-4.html image-base-ref.html +== image-left-5.html image-left-10-ref.html +== image-left-6.html image-left-10-ref.html +== image-top-height-4.html image-height-4.html +== image-top-height-5.html image-height-5.html +== image-top-height-6.html image-height-6.html +== image-left-width-4.html image-width-4.html +== image-left-width-5.html image-width-5.html +== image-left-width-6.html image-width-6.html +== image-height-top-4.html image-height-4.html +== image-height-top-5.html image-height-5.html +== image-height-top-6.html image-height-6.html +== image-width-left-4.html image-width-4.html +== image-width-left-5.html image-width-5.html +== image-width-left-6.html image-width-6.html + + +skip pref(image.downscale-during-decode.enabled,true) == image-high-quality-scaling-1.html image-high-quality-scaling-1-ref.html + + +!= offscreen-0-ref.html offscreen-10-ref.html +== offscreen-background-color-pos-4.html offscreen-0-ref.html +== offscreen-background-color-pos-5.html offscreen-10-ref.html +== offscreen-background-color-pos-6.html offscreen-10-ref.html +== offscreen-background-color-size-4.html offscreen-0-ref.html +== offscreen-background-color-size-5.html offscreen-10-ref.html +== offscreen-background-color-size-6.html offscreen-10-ref.html +== offscreen-image-pos-4.html offscreen-0-ref.html +== offscreen-image-pos-5.html offscreen-10-ref.html +== offscreen-image-pos-6.html offscreen-10-ref.html +== offscreen-image-size-4.html offscreen-0-ref.html +== offscreen-image-size-5.html offscreen-10-ref.html +== offscreen-image-size-6.html offscreen-10-ref.html + + +!= rounded-background-color-base-ref.html rounded-background-color-height-10-ref.html +fuzzy(0-1,0-14) == rounded-background-color-height-4.html rounded-background-color-base-ref.html +== rounded-background-color-height-5.html rounded-background-color-height-10-ref.html +== rounded-background-color-height-6.html rounded-background-color-height-10-ref.html +!= rounded-background-color-base-ref.html rounded-background-color-top-10-ref.html +fuzzy(0-1,0-14) == rounded-background-color-top-4.html rounded-background-color-base-ref.html +== rounded-background-color-top-5.html rounded-background-color-top-10-ref.html +== rounded-background-color-top-6.html rounded-background-color-top-10-ref.html +!= rounded-background-color-base-ref.html rounded-background-color-width-10-ref.html +fuzzy(0-1,0-14) == rounded-background-color-width-4.html rounded-background-color-base-ref.html +== rounded-background-color-width-5.html rounded-background-color-width-10-ref.html +== rounded-background-color-width-6.html rounded-background-color-width-10-ref.html +!= rounded-background-color-base-ref.html rounded-background-color-left-10-ref.html +fuzzy(0-1,0-225) == rounded-background-color-left-4.html rounded-background-color-base-ref.html +fuzzy(0-1,0-160) == rounded-background-color-left-5.html rounded-background-color-left-10-ref.html +fuzzy(0-1,0-145) == rounded-background-color-left-6.html rounded-background-color-left-10-ref.html +fuzzy(0-1,0-145) == rounded-background-color-top-height-4.html rounded-background-color-height-4.html +fuzzy(0-1,0-113) == rounded-background-color-top-height-5.html rounded-background-color-height-5.html +fuzzy(0-1,0-145) == rounded-background-color-top-height-6.html rounded-background-color-height-6.html +fuzzy(0-1,0-225) == rounded-background-color-left-width-4.html rounded-background-color-width-4.html +fuzzy(0-1,0-113) == rounded-background-color-left-width-5.html rounded-background-color-width-5.html +fuzzy(0-1,0-113) == rounded-background-color-left-width-6.html rounded-background-color-width-6.html +fuzzy(0-1,0-145) == rounded-background-color-height-top-4.html rounded-background-color-height-4.html +fuzzy(0-1,0-97) == rounded-background-color-height-top-5.html rounded-background-color-height-5.html +fuzzy(0-1,0-113) == rounded-background-color-height-top-6.html rounded-background-color-height-6.html +fuzzy(0-1,0-225) == rounded-background-color-width-left-4.html rounded-background-color-width-4.html +fuzzy(0-1,0-145) == rounded-background-color-width-left-5.html rounded-background-color-width-5.html +fuzzy(0-1,0-145) == rounded-background-color-width-left-6.html rounded-background-color-width-6.html + +== background-image-tiling.html background-image-tiling-ref.html + +!= border-image-width-0.html border-image-width-10.html +== border-image-width-4.html border-image-width-0.html +== border-image-width-9.html border-image-width-0.html + +== iframe-1.html iframe-1-ref.html + +fuzzy(0-128,0-220) == viewport-units-rounding-1.html viewport-units-rounding-1-ref.html +== viewport-units-rounding-2.html about:blank diff --git a/layout/reftests/pixel-rounding/rounded-background-color-base-ref.html b/layout/reftests/pixel-rounding/rounded-background-color-base-ref.html new file mode 100644 index 0000000000..7f299a3507 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-base-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0; height: 10px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-10-ref.html b/layout/reftests/pixel-rounding/rounded-background-color-height-10-ref.html new file mode 100644 index 0000000000..49d3823e51 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-height-10-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0; height: 11px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-4.html b/layout/reftests/pixel-rounding/rounded-background-color-height-4.html new file mode 100644 index 0000000000..2f8ab99198 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-height-4.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0; height: 10.4px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-5.html b/layout/reftests/pixel-rounding/rounded-background-color-height-5.html new file mode 100644 index 0000000000..aef9045902 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-height-5.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0; height: 10.5px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-6.html b/layout/reftests/pixel-rounding/rounded-background-color-height-6.html new file mode 100644 index 0000000000..52565b79be --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-height-6.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0; height: 10.6px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-top-4.html b/layout/reftests/pixel-rounding/rounded-background-color-height-top-4.html new file mode 100644 index 0000000000..d0fad8f652 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-height-top-4.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: -0.1px; left: 0; height: 10.5px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 19.9px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-top-5.html b/layout/reftests/pixel-rounding/rounded-background-color-height-top-5.html new file mode 100644 index 0000000000..f55313919d --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-height-top-5.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0px; left: 0; height: 10.5px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-top-6.html b/layout/reftests/pixel-rounding/rounded-background-color-height-top-6.html new file mode 100644 index 0000000000..35a94aa2d4 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-height-top-6.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0.1px; left: 0; height: 10.5px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20.1px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-10-ref.html b/layout/reftests/pixel-rounding/rounded-background-color-left-10-ref.html new file mode 100644 index 0000000000..f57df7ed23 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-left-10-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 1px; height: 10px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 21px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-4.html b/layout/reftests/pixel-rounding/rounded-background-color-left-4.html new file mode 100644 index 0000000000..a6ee8a47e2 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-left-4.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0.4px; height: 10px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20.4px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-5.html b/layout/reftests/pixel-rounding/rounded-background-color-left-5.html new file mode 100644 index 0000000000..b6261bb3fc --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-left-5.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0.5px; height: 10px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20.5px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-6.html b/layout/reftests/pixel-rounding/rounded-background-color-left-6.html new file mode 100644 index 0000000000..b5b469f7a0 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-left-6.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0.6px; height: 10px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20.6px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-width-4.html b/layout/reftests/pixel-rounding/rounded-background-color-left-width-4.html new file mode 100644 index 0000000000..083257d0fb --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-left-width-4.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: -0.5px; height: 10px; width: 10.9px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 19.5px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-width-5.html b/layout/reftests/pixel-rounding/rounded-background-color-left-width-5.html new file mode 100644 index 0000000000..e2593fc5a8 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-left-width-5.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: -0.5px; height: 10px; width: 11px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 19.5px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-width-6.html b/layout/reftests/pixel-rounding/rounded-background-color-left-width-6.html new file mode 100644 index 0000000000..5f1fca7d34 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-left-width-6.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: -0.5px; height: 10px; width: 11.1px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 19.5px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-10-ref.html b/layout/reftests/pixel-rounding/rounded-background-color-top-10-ref.html new file mode 100644 index 0000000000..700262c182 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-top-10-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 1px; left: 0; height: 10px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 21px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-4.html b/layout/reftests/pixel-rounding/rounded-background-color-top-4.html new file mode 100644 index 0000000000..34f569a7bc --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-top-4.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0.4px; left: 0; height: 10px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20.4px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-5.html b/layout/reftests/pixel-rounding/rounded-background-color-top-5.html new file mode 100644 index 0000000000..0f139aaf12 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-top-5.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0.5px; left: 0; height: 10px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20.5px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-6.html b/layout/reftests/pixel-rounding/rounded-background-color-top-6.html new file mode 100644 index 0000000000..234440c369 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-top-6.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0.6px; left: 0; height: 10px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 20.6px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-height-4.html b/layout/reftests/pixel-rounding/rounded-background-color-top-height-4.html new file mode 100644 index 0000000000..c465bc8d2e --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-top-height-4.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: -0.5px; left: 0; height: 10.9px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 19.5px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-height-5.html b/layout/reftests/pixel-rounding/rounded-background-color-top-height-5.html new file mode 100644 index 0000000000..a79900c20b --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-top-height-5.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: -0.5px; left: 0; height: 11px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 19.5px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-height-6.html b/layout/reftests/pixel-rounding/rounded-background-color-top-height-6.html new file mode 100644 index 0000000000..c31ff606ae --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-top-height-6.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: -0.5px; left: 0; height: 11.1px; width: 10px; +} + +body > div > div { background: green; } + +.tl { top: 19.5px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-10-ref.html b/layout/reftests/pixel-rounding/rounded-background-color-width-10-ref.html new file mode 100644 index 0000000000..2f706bbe49 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-width-10-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0; height: 10px; width: 11px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-4.html b/layout/reftests/pixel-rounding/rounded-background-color-width-4.html new file mode 100644 index 0000000000..f4af683abe --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-width-4.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0; height: 10px; width: 10.4px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-5.html b/layout/reftests/pixel-rounding/rounded-background-color-width-5.html new file mode 100644 index 0000000000..406d3d3172 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-width-5.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0; height: 10px; width: 10.5px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-6.html b/layout/reftests/pixel-rounding/rounded-background-color-width-6.html new file mode 100644 index 0000000000..8a01dd5031 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-width-6.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0; height: 10px; width: 10.6px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-left-4.html b/layout/reftests/pixel-rounding/rounded-background-color-width-left-4.html new file mode 100644 index 0000000000..7cba93c2bb --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-width-left-4.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: -0.1px; height: 10px; width: 10.5px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 19.9px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-left-5.html b/layout/reftests/pixel-rounding/rounded-background-color-width-left-5.html new file mode 100644 index 0000000000..fe7606646f --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-width-left-5.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0px; height: 10px; width: 10.5px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-left-6.html b/layout/reftests/pixel-rounding/rounded-background-color-width-left-6.html new file mode 100644 index 0000000000..c4c6462029 --- /dev/null +++ b/layout/reftests/pixel-rounding/rounded-background-color-width-left-6.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + +html, body { margin: 0; border: none; padding: 0; } + +body > div { margin: 10px; height: 80px; position: relative; } + +body > div > div { + position: absolute; top: 0; left: 0.1px; height: 10px; width: 10.5px; +} + +body > div > div { background: green; } + +.tl { top: 20px; } +.tr { margin-top: 40px; } +.bl { left: 20.1px; } +.br { margin-left: 40px; } + +div.one > div.tl { border-top-left-radius: 1px; } +div.one > div.tr { border-top-right-radius: 1px; } +div.one > div.bl { border-bottom-left-radius: 1px; } +div.one > div.br { border-bottom-right-radius: 1px; } +div.four > div.tl { border-top-left-radius: 4px; } +div.four > div.tr { border-top-right-radius: 4px; } +div.four > div.bl { border-bottom-left-radius: 4px; } +div.four > div.br { border-bottom-right-radius: 4px; } + +</style> +</head> +<body> + +<div class="one"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +<div class="four"> +<div></div> +<div class="tl"></div> +<div class="tr"></div> +<div class="bl"></div> +<div class="br"></div> +<div class="tl tr"></div> +<div class="tl bl"></div> +<div class="tl br"></div> +<div class="tr bl"></div> +<div class="tr br"></div> +<div class="bl br"></div> +<div class="tl tr bl"></div> +<div class="tl tr br"></div> +<div class="tl bl br"></div> +<div class="tr bl br"></div> +<div class="tl tr bl br"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/pixel-rounding/viewport-units-rounding-1-frame.html b/layout/reftests/pixel-rounding/viewport-units-rounding-1-frame.html new file mode 100644 index 0000000000..955b873dd6 --- /dev/null +++ b/layout/reftests/pixel-rounding/viewport-units-rounding-1-frame.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML> +<title>subframe for test of viewport units rounding</title> +<meta charset="UTF-8"> +<style> + +html, body { margin: 0; padding: 0; border: none } + +body > div { + background: red; /* should never show */ + overflow: hidden; /* block formatting context */ +} + +body > div > div { + float: left; + height: 10px; +} + +body > div.w25 > div { width: 25vw; } + +</style> + +<div class="w25"> + <div style="background: fuchsia"></div> + <div style="background: aqua"></div> + <div style="background: silver"></div> + <div style="background: yellow"></div> +</div> + +<!-- + Really, though, anything that is a multiple of 5vw will always + produce a round number of appunits when starting from an integer + number of pixels, since 5vw is 1/20 of the viewport. + + So, more interesting: +--> + +<div> + <div style="width: 24vw; background: fuchsia"></div> + <div style="width: 24vw; background: aqua"></div> + <div style="width: 24vw; background: silver"></div> + <div style="width: 24vw; background: yellow"></div> + <div style="width: 4vw; background: gray"></div> +</div> + +<div> + <div style="width: 21vw; background: fuchsia"></div> + <div style="width: 21vw; background: aqua"></div> + <div style="width: 21vw; background: silver"></div> + <div style="width: 21vw; background: yellow"></div> + <div style="width: 16vw; background: gray"></div> +</div> diff --git a/layout/reftests/pixel-rounding/viewport-units-rounding-1-ref.html b/layout/reftests/pixel-rounding/viewport-units-rounding-1-ref.html new file mode 100644 index 0000000000..f762f004ff --- /dev/null +++ b/layout/reftests/pixel-rounding/viewport-units-rounding-1-ref.html @@ -0,0 +1,123 @@ +<!DOCTYPE HTML> +<title>viewport units rounding reference</title> +<meta charset="UTF-8"> +<style> +div.contain { height: 50px } +div.contain > div { height: 10px } +div.contain > div > div { height: 10px; float: left } +</style> + +<div class="contain" style="width: 200px"> + <div> + <div style="width: 50px; background: fuchsia"></div> + <div style="width: 50px; background: aqua"></div> + <div style="width: 50px; background: silver"></div> + <div style="width: 50px; background: yellow"></div> + </div> + <div> + <div style="width: 48px; background: fuchsia"></div> + <div style="width: 48px; background: aqua"></div> + <div style="width: 48px; background: silver"></div> + <div style="width: 48px; background: yellow"></div> + <div style="width: 8px; background: gray"></div> + </div> + <div> + <div style="width: 42px; background: fuchsia"></div> + <div style="width: 42px; background: aqua"></div> + <div style="width: 42px; background: silver"></div> + <div style="width: 42px; background: yellow"></div> + <div style="width: 32px; background: gray"></div> + </div> +</div> + +<div class="contain" style="width: 201px"> + <div> + <div style="width: 50px; background: fuchsia"></div> + <div style="width: 51px; background: aqua"></div> + <div style="width: 50px; background: silver"></div> + <div style="width: 50px; background: yellow"></div> + </div> + <div> + <div style="width: 48px; background: fuchsia"></div> + <div style="width: 48px; background: aqua"></div> + <div style="width: 49px; background: silver"></div> + <div style="width: 48px; background: yellow"></div> + <div style="width: 8px; background: gray"></div> + </div> + <div> + <div style="width: 42px; background: fuchsia"></div> + <div style="width: 42px; background: aqua"></div> + <div style="width: 43px; background: silver"></div> + <div style="width: 42px; background: yellow"></div> + <div style="width: 32px; background: gray"></div> + </div> +</div> + +<div class="contain" style="width: 202px"> + <div> + <div style="width: 51px; background: fuchsia"></div> + <div style="width: 50px; background: aqua"></div> + <div style="width: 51px; background: silver"></div> + <div style="width: 50px; background: yellow"></div> + </div> + <div> + <div style="width: 48px; background: fuchsia"></div> + <div style="width: 49px; background: aqua"></div> + <div style="width: 48px; background: silver"></div> + <div style="width: 49px; background: yellow"></div> + <div style="width: 8px; background: gray"></div> + </div> + <div> + <div style="width: 42px; background: fuchsia"></div> + <div style="width: 43px; background: aqua"></div> + <div style="width: 42px; background: silver"></div> + <div style="width: 43px; background: yellow"></div> + <div style="width: 32px; background: gray"></div> + </div> +</div> + +<div class="contain" style="width: 203px"> + <div> + <div style="width: 51px; background: fuchsia"></div> + <div style="width: 51px; background: aqua"></div> + <div style="width: 50px; background: silver"></div> + <div style="width: 51px; background: yellow"></div> + </div> + <div> + <div style="width: 49px; background: fuchsia"></div> + <div style="width: 48px; background: aqua"></div> + <div style="width: 49px; background: silver"></div> + <div style="width: 49px; background: yellow"></div> + <div style="width: 8px; background: gray"></div> + </div> + <div> + <div style="width: 43px; background: fuchsia"></div> + <div style="width: 42px; background: aqua"></div> + <div style="width: 43px; background: silver"></div> + <div style="width: 42px; background: yellow"></div> + <div style="width: 33px; background: gray"></div> + </div> +</div> + +<div class="contain" style="width: 204px"> + <div> + <div style="width: 51px; background: fuchsia"></div> + <div style="width: 51px; background: aqua"></div> + <div style="width: 51px; background: silver"></div> + <div style="width: 51px; background: yellow"></div> + </div> + <div> + <div style="width: 49px; background: fuchsia"></div> + <div style="width: 49px; background: aqua"></div> + <div style="width: 49px; background: silver"></div> + <div style="width: 49px; background: yellow"></div> + <div style="width: 8px; background: gray"></div> + </div> + <div> + <div style="width: 43px; background: fuchsia"></div> + <div style="width: 43px; background: aqua"></div> + <div style="width: 43px; background: silver"></div> + <div style="width: 42px; background: yellow"></div> + <div style="width: 33px; background: gray"></div> + </div> +</div> diff --git a/layout/reftests/pixel-rounding/viewport-units-rounding-1.html b/layout/reftests/pixel-rounding/viewport-units-rounding-1.html new file mode 100644 index 0000000000..a311545467 --- /dev/null +++ b/layout/reftests/pixel-rounding/viewport-units-rounding-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>viewport units rounding</title> +<meta charset="UTF-8"> +<style> +iframe { display: block; border: 0; margin: 0; padding: 0; } +</style> + +<iframe scrolling="no" src="viewport-units-rounding-1-frame.html" width="200" height="50" ></iframe> +<iframe scrolling="no" src="viewport-units-rounding-1-frame.html" width="201" height="50" ></iframe> +<iframe scrolling="no" src="viewport-units-rounding-1-frame.html" width="202" height="50" ></iframe> +<iframe scrolling="no" src="viewport-units-rounding-1-frame.html" width="203" height="50" ></iframe> +<iframe scrolling="no" src="viewport-units-rounding-1-frame.html" width="204" height="50" ></iframe> diff --git a/layout/reftests/pixel-rounding/viewport-units-rounding-2.html b/layout/reftests/pixel-rounding/viewport-units-rounding-2.html new file mode 100644 index 0000000000..f92009fd6e --- /dev/null +++ b/layout/reftests/pixel-rounding/viewport-units-rounding-2.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<title>viewport units rounding test</title> +<meta charset="UTF-8"> +<style> + +body > div > div { line-height: 1px } +span { + display: inline-block; + height: 1px; + width: var(--w); + vertical-align: bottom; +} +span:nth-child(1) { + background: red; +} +span:nth-child(2) { + background: white; + margin-left: var(--negw); +} + +</style> +<body> +<script> + +for (var p = 0; p < 20; ++p) { + var position = ((20 * p) + (p / 50)) + "px"; + var container = document.createElement("div"); + container.style.position = "absolute"; + container.style.top = "0px"; + container.style.left = position; + for (var w = 0; w < 99; ++w) { + var width = (0.5 + w / 100) + "vw"; + var div = document.createElement("div"); + div.setAttribute("style", "--w: " + width + "; " + + "--negw: -" + width); + div.appendChild(document.createElement("span")); + div.appendChild(document.createElement("span")); + container.appendChild(div); + } + document.body.appendChild(container); +} + +</script> |
