summaryrefslogtreecommitdiffstats
path: root/layout/reftests/border-radius
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/border-radius')
-rw-r--r--layout/reftests/border-radius/border-circle-2-ref.xhtml11
-rw-r--r--layout/reftests/border-radius/border-circle-2.html20
-rw-r--r--layout/reftests/border-radius/border-circle.html11
-rw-r--r--layout/reftests/border-radius/border-ellips.html11
-rw-r--r--layout/reftests/border-radius/border-reduce-height-ref.html19
-rw-r--r--layout/reftests/border-radius/border-reduce-height.html19
-rw-r--r--layout/reftests/border-radius/border-square.html10
-rw-r--r--layout/reftests/border-radius/border-value-interpret-ref.html21
-rw-r--r--layout/reftests/border-radius/border-value-interpret.html18
-rw-r--r--layout/reftests/border-radius/clipping-1-ref.html28
-rw-r--r--layout/reftests/border-radius/clipping-1.html19
-rw-r--r--layout/reftests/border-radius/clipping-2.html30
-rw-r--r--layout/reftests/border-radius/clipping-3-ref.xhtml19
-rw-r--r--layout/reftests/border-radius/clipping-3.html27
-rw-r--r--layout/reftests/border-radius/clipping-4-canvas.html14
-rw-r--r--layout/reftests/border-radius/clipping-4-image.html10
-rw-r--r--layout/reftests/border-radius/clipping-4-notref.html10
-rw-r--r--layout/reftests/border-radius/clipping-4-overflow-hidden.html16
-rw-r--r--layout/reftests/border-radius/clipping-4-ref.html11
-rw-r--r--layout/reftests/border-radius/clipping-5-canvas.html20
-rw-r--r--layout/reftests/border-radius/clipping-5-image.html16
-rw-r--r--layout/reftests/border-radius/clipping-5-overflow-hidden.html24
-rw-r--r--layout/reftests/border-radius/clipping-5-ref.html17
-rw-r--r--layout/reftests/border-radius/clipping-5-refc.html19
-rw-r--r--layout/reftests/border-radius/clipping-5-refi.html15
-rw-r--r--layout/reftests/border-radius/clipping-6-ref.html15
-rw-r--r--layout/reftests/border-radius/clipping-6.html13
-rw-r--r--layout/reftests/border-radius/clipping-7-ref.html13
-rw-r--r--layout/reftests/border-radius/clipping-7.html13
-rw-r--r--layout/reftests/border-radius/clipping-and-zindex-1-ref.html18
-rw-r--r--layout/reftests/border-radius/clipping-and-zindex-1.html19
-rw-r--r--layout/reftests/border-radius/clipping-preserve-3d-ref.html11
-rw-r--r--layout/reftests/border-radius/clipping-preserve-3d.html11
-rw-r--r--layout/reftests/border-radius/color-layer-1-ref.html10
-rw-r--r--layout/reftests/border-radius/color-layer-1a.html8
-rw-r--r--layout/reftests/border-radius/corner-1-ref.svg13
-rw-r--r--layout/reftests/border-radius/corner-1.html18
-rw-r--r--layout/reftests/border-radius/corner-2-ref.svg12
-rw-r--r--layout/reftests/border-radius/corner-2.html18
-rw-r--r--layout/reftests/border-radius/corner-3-ref.svg5
-rw-r--r--layout/reftests/border-radius/corner-3.html22
-rw-r--r--layout/reftests/border-radius/corner-4-ref.svg5
-rw-r--r--layout/reftests/border-radius/corner-4.html22
-rw-r--r--layout/reftests/border-radius/corner-joins-1-ref.xhtml89
-rw-r--r--layout/reftests/border-radius/corner-joins-1.xhtml78
-rw-r--r--layout/reftests/border-radius/corner-joins-2-ref.xhtml36
-rw-r--r--layout/reftests/border-radius/corner-joins-2.xhtml42
-rw-r--r--layout/reftests/border-radius/corner-split-ref.svg20
-rw-r--r--layout/reftests/border-radius/corner-split.html32
-rw-r--r--layout/reftests/border-radius/curved-border-background-nogap-ref.html9
-rw-r--r--layout/reftests/border-radius/curved-border-background-nogap.html36
-rw-r--r--layout/reftests/border-radius/curved-borders-all-styles.html29
-rw-r--r--layout/reftests/border-radius/curved-stripe-border-ref.svg26
-rw-r--r--layout/reftests/border-radius/curved-stripe-border.html17
-rw-r--r--layout/reftests/border-radius/iframe-1-ref.html7
-rw-r--r--layout/reftests/border-radius/iframe-1.html7
-rw-r--r--layout/reftests/border-radius/inherit-1-ref.html25
-rw-r--r--layout/reftests/border-radius/inherit-1.html24
-rw-r--r--layout/reftests/border-radius/intersecting-clipping-1-canvas.html20
-rw-r--r--layout/reftests/border-radius/intersecting-clipping-1-image.html16
-rw-r--r--layout/reftests/border-radius/intersecting-clipping-1-overflow-hidden.html18
-rw-r--r--layout/reftests/border-radius/intersecting-clipping-1-ref.html53
-rw-r--r--layout/reftests/border-radius/intersecting-clipping-1-refc.html55
-rw-r--r--layout/reftests/border-radius/intersecting-clipping-1-refi.html51
-rw-r--r--layout/reftests/border-radius/invalidate-1-ref.html7
-rw-r--r--layout/reftests/border-radius/invalidate-1a.html15
-rw-r--r--layout/reftests/border-radius/invalidate-1b.html15
-rw-r--r--layout/reftests/border-radius/outline-circle.html11
-rw-r--r--layout/reftests/border-radius/outline-ellips.html11
-rw-r--r--layout/reftests/border-radius/outline-square.html10
-rw-r--r--layout/reftests/border-radius/percent-1-ref.html55
-rw-r--r--layout/reftests/border-radius/percent-1.html37
-rw-r--r--layout/reftests/border-radius/percent-2-ref.html55
-rw-r--r--layout/reftests/border-radius/percent-2.html37
-rw-r--r--layout/reftests/border-radius/percent-3-ref.html55
-rw-r--r--layout/reftests/border-radius/percent-3.html37
-rw-r--r--layout/reftests/border-radius/reftest.list96
-rw-r--r--layout/reftests/border-radius/scroll-1-ref.html8
-rw-r--r--layout/reftests/border-radius/scroll-1.html23
-rw-r--r--layout/reftests/border-radius/scrollbar-clamping-1-ref.html47
-rw-r--r--layout/reftests/border-radius/scrollbar-clamping-1.html45
-rw-r--r--layout/reftests/border-radius/scrollbar-clamping-2-ref.html34
-rw-r--r--layout/reftests/border-radius/scrollbar-clamping-2.html46
-rw-r--r--layout/reftests/border-radius/table-collapse-1-ref.html24
-rw-r--r--layout/reftests/border-radius/table-collapse-1.html25
-rw-r--r--layout/reftests/border-radius/transforms-1-ref.html24
-rw-r--r--layout/reftests/border-radius/transforms-1.html25
-rw-r--r--layout/reftests/border-radius/zero-radius-clip-1.html7
-rw-r--r--layout/reftests/border-radius/zero-radius-clip-ref.html7
89 files changed, 2127 insertions, 0 deletions
diff --git a/layout/reftests/border-radius/border-circle-2-ref.xhtml b/layout/reftests/border-radius/border-circle-2-ref.xhtml
new file mode 100644
index 0000000000..b589b4d04b
--- /dev/null
+++ b/layout/reftests/border-radius/border-circle-2-ref.xhtml
@@ -0,0 +1,11 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<body style="margin: 0">
+ <svg width="100px" height="100px" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <rect style="fill: black; stroke: none"
+ width="70" height="70"
+ x="8" y="8"
+ rx="10" ry="10"/>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/border-circle-2.html b/layout/reftests/border-radius/border-circle-2.html
new file mode 100644
index 0000000000..6ad0321abc
--- /dev/null
+++ b/layout/reftests/border-radius/border-circle-2.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html><head>
+<title>Circular border</title>
+<style>
+body { margin: 0 }
+div {
+ margin-left: 8px; margin-top: 8px;
+ width: 50px; height: 50px;
+ border: 10px solid black;
+ border-radius: 10px;
+}
+div > div {
+ margin: 0; width: 50px; height: 50px;
+ border-radius: 0;
+ background: black;
+ border: none;
+}
+</style>
+</head>
+<body><div><div></div></div></body></html>
diff --git a/layout/reftests/border-radius/border-circle.html b/layout/reftests/border-radius/border-circle.html
new file mode 100644
index 0000000000..02fbebe7ac
--- /dev/null
+++ b/layout/reftests/border-radius/border-circle.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html><head>
+<title>Circular border</title>
+<style>
+div { width: 50px; height: 50px;
+ border: 10px solid black;
+ border-radius: 10px;
+}
+</style>
+</head>
+<body><div></div></body></html>
diff --git a/layout/reftests/border-radius/border-ellips.html b/layout/reftests/border-radius/border-ellips.html
new file mode 100644
index 0000000000..94c53fafa0
--- /dev/null
+++ b/layout/reftests/border-radius/border-ellips.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html><head>
+<title>Elliptical border</title>
+<style>
+div { width: 50px; height: 50px;
+ border: 10px solid black;
+ border-radius: 10px / 20px;
+}
+</style>
+</head>
+<body><div></div></body></html>
diff --git a/layout/reftests/border-radius/border-reduce-height-ref.html b/layout/reftests/border-radius/border-reduce-height-ref.html
new file mode 100644
index 0000000000..0c28216dac
--- /dev/null
+++ b/layout/reftests/border-radius/border-reduce-height-ref.html
@@ -0,0 +1,19 @@
+<html>
+ <head>
+ <style>
+ div { box-sizing: border-box;
+ width: 60px;
+ height: 20px;
+ border: 2px solid black;
+ background: green;
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ border-radius: 4px 16px 4px 16px;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/border-radius/border-reduce-height.html b/layout/reftests/border-radius/border-reduce-height.html
new file mode 100644
index 0000000000..db0310a6ba
--- /dev/null
+++ b/layout/reftests/border-radius/border-reduce-height.html
@@ -0,0 +1,19 @@
+<html>
+ <head>
+ <style>
+ div { box-sizing: border-box;
+ width: 60px;
+ height: 20px;
+ border: 2px solid black;
+ background: green;
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ border-radius: 5px 20px 5px 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/border-radius/border-square.html b/layout/reftests/border-radius/border-square.html
new file mode 100644
index 0000000000..4e16637bbe
--- /dev/null
+++ b/layout/reftests/border-radius/border-square.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html><head>
+<title>Square border</title>
+<style>
+div { width: 50px; height: 50px;
+ border: 10px solid black;
+}
+</style>
+</head>
+<body><div></div></body></html>
diff --git a/layout/reftests/border-radius/border-value-interpret-ref.html b/layout/reftests/border-radius/border-value-interpret-ref.html
new file mode 100644
index 0000000000..c9a42716b0
--- /dev/null
+++ b/layout/reftests/border-radius/border-value-interpret-ref.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Test different types of values with border radius</title>
+ <!-- This bug will break when bug 451134 is fixed -->
+ <style>
+ div { width: 200px;
+ height: 200px;
+ background: green;
+ border: 10px dashed black;
+ border-top-left-radius: 2em 10px;
+ border-top-right-radius: 10px 0.5em;
+ border-bottom-right-radius: 3em 10px;
+ border-bottom-left-radius: 10px 0.5em;
+ }
+
+</style>
+</head>
+<body>
+ <div></div>
+</body></html>
diff --git a/layout/reftests/border-radius/border-value-interpret.html b/layout/reftests/border-radius/border-value-interpret.html
new file mode 100644
index 0000000000..16ee01c973
--- /dev/null
+++ b/layout/reftests/border-radius/border-value-interpret.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Test different types of values with border radius</title>
+ <style>
+ div { width: 200px;
+ height: 200px;
+ background: green;
+ border: 10px dashed black}
+
+ /* Test interpreted values */
+ #test1 { border-radius: 2em 10px 3em / 10px 0.5em }
+
+</style>
+</head>
+<body>
+ <div id="test1"></div>
+</body></html>
diff --git a/layout/reftests/border-radius/clipping-1-ref.html b/layout/reftests/border-radius/clipping-1-ref.html
new file mode 100644
index 0000000000..f02eee730b
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-1-ref.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html><head>
+<title>Border clipping</title>
+<style>
+.div1 { width: 50px; height: 50px;
+ border: 10px solid black;
+ border-radius: 20px;
+ position: fixed;
+ left: 50px;
+ top: 50px;
+}
+
+.div2 {
+ width: 40px; height: 40px;
+ border: 10px solid black;
+ background: black;
+ border-radius: 10px;
+ position: fixed;
+ left: 55px;
+ top: 55px;
+}
+
+</style>
+</head>
+<body>
+ <div class="div1"/>
+ <div class="div2"/>
+</body></html>
diff --git a/layout/reftests/border-radius/clipping-1.html b/layout/reftests/border-radius/clipping-1.html
new file mode 100644
index 0000000000..979af78817
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-1.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html><head>
+<title>Border clipping</title>
+<style>
+.div1 { width: 50px; height: 50px;
+ border: 10px solid black;
+ border-radius: 20px;
+ position: absolute;
+ background: black;
+ left: 50px;
+ top: 50px;
+ background-clip: padding-box;
+}
+
+</style>
+</head>
+<body>
+ <div class="div1"></div>
+</body></html>
diff --git a/layout/reftests/border-radius/clipping-2.html b/layout/reftests/border-radius/clipping-2.html
new file mode 100644
index 0000000000..b0630a7fb2
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-2.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html><head>
+<title>Border clipping</title>
+<style>
+.div1 { width: 50px; height: 50px;
+ border: 4px dotted black;
+ border-radius: 10px;
+ position: fixed;
+ background: red;
+ left: 50px;
+ top: 50px;
+ background-clip: padding-box;
+}
+
+.div2 { width: 50px; height: 50px;
+ border: 4px dotted black;
+ border-radius: 10px;
+ position: fixed;
+ background: red;
+ left: 50px;
+ top: 140px;
+ background-clip: border-box;
+}
+
+</style>
+</head>
+<body>
+ <div class="div1"/>
+ <div class="div2"/>
+</body></html>
diff --git a/layout/reftests/border-radius/clipping-3-ref.xhtml b/layout/reftests/border-radius/clipping-3-ref.xhtml
new file mode 100644
index 0000000000..9cab93dbd7
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-3-ref.xhtml
@@ -0,0 +1,19 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<body style="margin: 0">
+ <div class="div1"/>
+
+ <svg width="200px" height="200px" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+
+ <rect style="fill: blue; stroke: none"
+ width="70" height="70"
+ x="50" y="50"/>
+
+ <rect style="fill: red; stroke: none"
+ width="70" height="70"
+ x="80" y="80"
+ rx="10" ry="10"/>
+
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/clipping-3.html b/layout/reftests/border-radius/clipping-3.html
new file mode 100644
index 0000000000..af52adb304
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-3.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html><head>
+<title>Border clipping</title>
+<style>
+.div1 { width: 50px; height: 50px;
+ border: 10px solid blue;
+ position: fixed;
+ background: blue;
+ left: 50px;
+ top: 50px;
+}
+
+.div2 { width: 50px; height: 50px;
+ border: 10px solid red;
+ position: fixed;
+ background: red;
+ left: 80px;
+ top: 80px;
+ border-radius: 10px;
+}
+
+</style>
+</head>
+<body>
+ <div class="div1"/>
+ <div class="div2"/>
+</body></html>
diff --git a/layout/reftests/border-radius/clipping-4-canvas.html b/layout/reftests/border-radius/clipping-4-canvas.html
new file mode 100644
index 0000000000..c7836b8370
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-4-canvas.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+canvas {
+ border-radius: 25px;
+}
+</style>
+<canvas id="canvas" height="100" width="200"></canvas>
+<script>
+var canvas = document.getElementById("canvas");
+var cx = canvas.getContext("2d");
+cx.fillStyle="lime";
+cx.fillRect(0, 0, 200, 100);
+</script>
diff --git a/layout/reftests/border-radius/clipping-4-image.html b/layout/reftests/border-radius/clipping-4-image.html
new file mode 100644
index 0000000000..8fedba7221
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-4-image.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+img {
+ height: 100px;
+ width: 200px;
+ border-radius: 25px;
+}
+</style>
+<img src="../pixel-rounding/lime-25x25.png" alt="">
diff --git a/layout/reftests/border-radius/clipping-4-notref.html b/layout/reftests/border-radius/clipping-4-notref.html
new file mode 100644
index 0000000000..816856f3e1
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-4-notref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+div {
+ background: lime;
+ height: 100px;
+ width: 200px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/border-radius/clipping-4-overflow-hidden.html b/layout/reftests/border-radius/clipping-4-overflow-hidden.html
new file mode 100644
index 0000000000..734fdef20a
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-4-overflow-hidden.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+body > div {
+ height: 100px;
+ width: 200px;
+ border-radius: 25px;
+ overflow: hidden;
+}
+body > div > div {
+ background: lime;
+ height: 100px;
+ width: 200px;
+}
+</style>
+<div><div></div></div>
diff --git a/layout/reftests/border-radius/clipping-4-ref.html b/layout/reftests/border-radius/clipping-4-ref.html
new file mode 100644
index 0000000000..ebe86707f3
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-4-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+div {
+ background: lime;
+ height: 100px;
+ width: 200px;
+ border-radius: 25px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/border-radius/clipping-5-canvas.html b/layout/reftests/border-radius/clipping-5-canvas.html
new file mode 100644
index 0000000000..62c05ccf4c
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-5-canvas.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+canvas {
+ border-color: transparent;
+ border-style: solid;
+ border-width: 1px 1px 3px 3px;
+ padding: 0px 1px 1px 5px;
+ /* border + padding: 1px 2px 4px 8px */
+ margin: 17px;
+ border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px;
+}
+</style>
+<canvas id="canvas" height="100" width="200"></canvas>
+<script>
+var canvas = document.getElementById("canvas");
+var cx = canvas.getContext("2d");
+cx.fillStyle="lime";
+cx.fillRect(0, 0, 200, 100);
+</script>
diff --git a/layout/reftests/border-radius/clipping-5-image.html b/layout/reftests/border-radius/clipping-5-image.html
new file mode 100644
index 0000000000..8399d0894a
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-5-image.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+img {
+ border-color: transparent;
+ border-style: solid;
+ border-width: 1px 1px 3px 3px;
+ padding: 0px 1px 1px 5px;
+ /* border + padding: 1px 2px 4px 8px */
+ margin: 17px;
+ height: 100px;
+ width: 200px;
+ border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px;
+}
+</style>
+<img src="../pixel-rounding/lime-25x25.png" alt="">
diff --git a/layout/reftests/border-radius/clipping-5-overflow-hidden.html b/layout/reftests/border-radius/clipping-5-overflow-hidden.html
new file mode 100644
index 0000000000..e81668ff7b
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-5-overflow-hidden.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+body > div {
+ /* padding box is 100px by 200px */
+ display: inline-block; /* so margin doesn't collapse with body's */
+ height: 99px;
+ width: 194px;
+ overflow: hidden;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 1px 2px 4px 8px;
+ padding: 0px 1px 1px 5px;
+ margin: 17px;
+ border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px;
+}
+body > div > div {
+ background: lime;
+ height: 100px;
+ width: 200px;
+ margin-left: -5px;
+}
+</style>
+<div><div></div></div>
diff --git a/layout/reftests/border-radius/clipping-5-ref.html b/layout/reftests/border-radius/clipping-5-ref.html
new file mode 100644
index 0000000000..bcac4ef848
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-5-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+div {
+ display: inline-block;
+ background: lime;
+ margin: 18px 19px 21px 25px;
+ /* border + padding: 1px 2px 4px 8px */
+ height: 100px;
+ width: 200px;
+
+ /* Horizontal: TL TR BR BL / Vertical: TL TR BR BL */
+ /* border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px; */
+ border-radius: 17px 15px 12px 10px / 11px 14px 14px 13px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/border-radius/clipping-5-refc.html b/layout/reftests/border-radius/clipping-5-refc.html
new file mode 100644
index 0000000000..56b130b9c9
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-5-refc.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+canvas {
+ margin: 18px 19px 21px 25px;
+ /* border + padding: 1px 2px 4px 8px */
+
+ /* Horizontal: TL TR BR BL / Vertical: TL TR BR BL */
+ /* border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px; */
+ border-radius: 17px 15px 12px 10px / 11px 14px 14px 13px;
+}
+</style>
+<canvas id="canvas" height="100" width="200"></canvas>
+<script>
+var canvas = document.getElementById("canvas");
+var cx = canvas.getContext("2d");
+cx.fillStyle="lime";
+cx.fillRect(0, 0, 200, 100);
+</script>
diff --git a/layout/reftests/border-radius/clipping-5-refi.html b/layout/reftests/border-radius/clipping-5-refi.html
new file mode 100644
index 0000000000..2e3036dd5e
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-5-refi.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+img {
+ margin: 18px 19px 21px 25px;
+ /* border + padding: 1px 2px 4px 8px */
+ height: 100px;
+ width: 200px;
+
+ /* Horizontal: TL TR BR BL / Vertical: TL TR BR BL */
+ /* border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px; */
+ border-radius: 17px 15px 12px 10px / 11px 14px 14px 13px;
+}
+</style>
+<img src="../pixel-rounding/lime-25x25.png" alt="">
diff --git a/layout/reftests/border-radius/clipping-6-ref.html b/layout/reftests/border-radius/clipping-6-ref.html
new file mode 100644
index 0000000000..7644fe21fe
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-6-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body>
+ <div style="overflow:hidden; border-radius:25px; border:3px solid #f00; padding:1px; height:180px; font-size: 300%;">
+ <div style="transform: perspective(1px)">
+ <div style="height:100px; width:100px; background-color:lime"></div>
+ <div style="height:100px; width: 50px; background-color:red; position:relative; top: -20px;">Hi</div>
+ </div>
+ </div>
+ <div
+</body>
+</html>
diff --git a/layout/reftests/border-radius/clipping-6.html b/layout/reftests/border-radius/clipping-6.html
new file mode 100644
index 0000000000..3447a17e9e
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-6.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body>
+ <div style="overflow:hidden; border-radius:25px; border:3px solid #f00; padding:1px; height:180px; font-size: 300%;">
+ <div style="height:100px; width:100px; transform:perspective(1px); background-color:lime"></div>
+ <div style="height:100px; width: 50px; background-color:red; position:relative; top: -20px;">Hi</div>
+ </div>
+ <div
+</body>
+</html>
diff --git a/layout/reftests/border-radius/clipping-7-ref.html b/layout/reftests/border-radius/clipping-7-ref.html
new file mode 100644
index 0000000000..1d83e5baa0
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-7-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body>
+ <div style="overflow:hidden; border-radius:25px; border:3px solid #f00; padding:1px; height:180px;">
+ <div style="height:100px; width:100px; background-color:lime"></div>
+ <div style="height:100px; width: 50px; background-color:red; position:relative; top: -20px;"></div>
+ </div>
+ <div
+</body>
+</html>
diff --git a/layout/reftests/border-radius/clipping-7.html b/layout/reftests/border-radius/clipping-7.html
new file mode 100644
index 0000000000..f435d2c41c
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-7.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body>
+ <div style="overflow:hidden; border-radius:25px; border:3px solid #f00; padding:1px; height:180px;">
+ <div style="height:100px; width:100px; transform:perspective(1px); background-color:lime"></div>
+ <div style="height:100px; width: 50px; background-color:red; position:relative; top: -20px;"></div>
+ </div>
+ <div
+</body>
+</html>
diff --git a/layout/reftests/border-radius/clipping-and-zindex-1-ref.html b/layout/reftests/border-radius/clipping-and-zindex-1-ref.html
new file mode 100644
index 0000000000..f1155db7fe
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-and-zindex-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<title>Test for z-index relationship to border-radius clipping of overflow</title>
+<style>
+
+#one { position: absolute; background: blue;
+ top: 50px; left: 50px; width: 100px; height: 100px }
+
+#two { position: absolute; border-radius: 15px; background: fuchsia;
+ top: 25px; left: 75px; width: 100px; height: 100px }
+
+#three { position: absolute; background: yellow;
+ top: 75px; left: 100px; width: 100px; height: 100px }
+
+</style>
+
+<div id="three"></div>
+<div id="two"></div>
+<div id="one"></div>
diff --git a/layout/reftests/border-radius/clipping-and-zindex-1.html b/layout/reftests/border-radius/clipping-and-zindex-1.html
new file mode 100644
index 0000000000..f565d7a822
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-and-zindex-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<title>Test for z-index relationship to border-radius clipping of overflow</title>
+<style>
+
+#one { position: absolute; z-index: 2; background: blue;
+ top: 50px; left: 50px; width: 100px; height: 100px }
+
+#twoouter { position: absolute; border-radius: 15px; overflow: hidden;
+ top: 25px; left: 75px; width: 100px; height: 100px }
+#twoinner { position: relative; z-index: 1; height: 100px; background: fuchsia }
+
+#three { position: absolute; z-index: 0; background: yellow;
+ top: 75px; left: 100px; width: 100px; height: 100px }
+
+</style>
+
+<div id="one"></div>
+<div id="twoouter"><div id="twoinner"></div></div>
+<div id="three"></div>
diff --git a/layout/reftests/border-radius/clipping-preserve-3d-ref.html b/layout/reftests/border-radius/clipping-preserve-3d-ref.html
new file mode 100644
index 0000000000..54ce4bc044
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-preserve-3d-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<body>
+ <div style="width: 400px; overflow: hidden; border-radius: 50%;">
+ <div style="transform-style: preserve-3d; position:relative; transform: translateX(100px);">
+ <div style="width: 200px;height: 200px;background-color: red;position: relative;left: 200px;">
+ </div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/clipping-preserve-3d.html b/layout/reftests/border-radius/clipping-preserve-3d.html
new file mode 100644
index 0000000000..62e6380b74
--- /dev/null
+++ b/layout/reftests/border-radius/clipping-preserve-3d.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<body>
+ <div style="width: 400px; overflow: hidden; border-radius: 50%;">
+ <div style="transform-style: preserve-3d; position:relative; left: 100px">
+ <div style="width: 200px;height: 200px;background-color: red;position: relative;left: 200px;">
+ </div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/color-layer-1-ref.html b/layout/reftests/border-radius/color-layer-1-ref.html
new file mode 100644
index 0000000000..118077040f
--- /dev/null
+++ b/layout/reftests/border-radius/color-layer-1-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden">
+<div style="border-radius:100px; width:800px; height:1000px; position:absolute; left:0px; top:0px; overflow:hidden">
+ <div style="background:blue; width:100%; height:100%;"></div>
+ <div style="position:absolute; top:100px; left:100px; width:100px; height:100px; border:5px solid white"></div>
+ <div style="position:absolute; top:100px; left:100px; width:100px; height:100px; border:5px solid blue"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/color-layer-1a.html b/layout/reftests/border-radius/color-layer-1a.html
new file mode 100644
index 0000000000..ff600cb660
--- /dev/null
+++ b/layout/reftests/border-radius/color-layer-1a.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden">
+<div style="border-radius:100px; width:800px; height:1000px; position:absolute; left:0px; top:0px; overflow:hidden">
+ <div style="background:blue; width:100%; height:100%;"></div>
+</div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/border-radius/corner-1-ref.svg b/layout/reftests/border-radius/corner-1-ref.svg
new file mode 100644
index 0000000000..d3e0586f8c
--- /dev/null
+++ b/layout/reftests/border-radius/corner-1-ref.svg
@@ -0,0 +1,13 @@
+<svg width="200px" height="200px" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <rect style="fill: black; stroke: none"
+ width="70" height="50"
+ x="50" y="50"
+ rx="10" ry="10"/>
+
+ <rect style="fill: black; stroke: none"
+ width="70" height="40"
+ x="50" y="80"
+ rx="6" ry="6"/>
+</svg>
+
diff --git a/layout/reftests/border-radius/corner-1.html b/layout/reftests/border-radius/corner-1.html
new file mode 100644
index 0000000000..a606b38f8f
--- /dev/null
+++ b/layout/reftests/border-radius/corner-1.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html><head>
+<title>Corners different</title>
+<style>
+.div1 { width: 50px; height: 50px;
+ border: 10px solid black;
+ border-radius: 10px 10px 6px 6px;
+ position: absolute;
+ background: black;
+ left: 50px;
+ top: 50px;
+}
+
+</style>
+</head>
+<body>
+ <div class="div1"></div>
+</body></html>
diff --git a/layout/reftests/border-radius/corner-2-ref.svg b/layout/reftests/border-radius/corner-2-ref.svg
new file mode 100644
index 0000000000..3232472eb1
--- /dev/null
+++ b/layout/reftests/border-radius/corner-2-ref.svg
@@ -0,0 +1,12 @@
+<svg width="200px" height="200px" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <rect style="fill: black; stroke: none"
+ width="50" height="70"
+ x="50" y="50"
+ rx="10" ry="10"/>
+
+ <rect style="fill: black; stroke: none"
+ width="50" height="70"
+ x="70" y="50"
+ rx="6" ry="6"/>
+</svg>
diff --git a/layout/reftests/border-radius/corner-2.html b/layout/reftests/border-radius/corner-2.html
new file mode 100644
index 0000000000..cd860e843a
--- /dev/null
+++ b/layout/reftests/border-radius/corner-2.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html><head>
+<title>Corners different</title>
+<style>
+.div1 { width: 50px; height: 50px;
+ border: 10px solid black;
+ border-radius: 10px 6px 6px 10px;
+ position: absolute;
+ background: black;
+ left: 50px;
+ top: 50px;
+}
+
+</style>
+</head>
+<body>
+ <div class="div1"></div>
+</body></html>
diff --git a/layout/reftests/border-radius/corner-3-ref.svg b/layout/reftests/border-radius/corner-3-ref.svg
new file mode 100644
index 0000000000..210cc7637c
--- /dev/null
+++ b/layout/reftests/border-radius/corner-3-ref.svg
@@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect x="20" y="50" width="60" height="130" rx="30" fill="rgba(0,0,255,0.5)"/>
+ <!-- cover left side of first rect -->
+ <rect width="50" height="100%" fill="white"/>
+</svg>
diff --git a/layout/reftests/border-radius/corner-3.html b/layout/reftests/border-radius/corner-3.html
new file mode 100644
index 0000000000..ee4dd73113
--- /dev/null
+++ b/layout/reftests/border-radius/corner-3.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+ <title>Test when only some of the corners have a border-radius and the border-radius is greater than the sum of the border width and the element's content area width/height</title>
+ <style>
+
+div {
+ width: 0px;
+ height: 100px;
+ border: 15px solid rgba(0,0,255,0.5);
+ border-radius: 0 30px 30px 0;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+}
+
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/corner-4-ref.svg b/layout/reftests/border-radius/corner-4-ref.svg
new file mode 100644
index 0000000000..939ccc04ac
--- /dev/null
+++ b/layout/reftests/border-radius/corner-4-ref.svg
@@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect x="50" y="50" width="130" height="130" rx="15" fill="rgba(0,0,255,0.5)"/>
+ <!-- cover center of first rect -->
+ <rect x="65" y="65" width="100" height="100" fill="white"/>
+</svg>
diff --git a/layout/reftests/border-radius/corner-4.html b/layout/reftests/border-radius/corner-4.html
new file mode 100644
index 0000000000..a51c24f9ca
--- /dev/null
+++ b/layout/reftests/border-radius/corner-4.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+ <title>Test the border transparency</title>
+ <style>
+
+div {
+ width: 100px;
+ height: 100px;
+ border: 15px solid rgba(0,0,255,0.5);
+ border-radius: 15px;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+}
+
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/corner-joins-1-ref.xhtml b/layout/reftests/border-radius/corner-joins-1-ref.xhtml
new file mode 100644
index 0000000000..1b0ba24a6b
--- /dev/null
+++ b/layout/reftests/border-radius/corner-joins-1-ref.xhtml
@@ -0,0 +1,89 @@
+<?xml version="1.0"?>
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+<title>border</title>
+<style type="text/css">
+@namespace url("http://www.w3.org/1999/xhtml");
+@namespace svg url("http://www.w3.org/2000/svg");
+
+div.wrapper {
+ float: left;
+ margin-left: 20px;
+ margin-top: 10px;
+}
+
+div.cover, div.cover2 {
+ position: absolute;
+ border: 4px solid white; /* cover areas that may differ */
+ width: 140px;
+ height: 118px;
+ border-radius: 63px;
+ margin-left: -2px;
+ margin-top: -2px;
+}
+div.cover2 {
+ height: 82px;
+ margin-top: 16px;
+ border-radius: 63px / 45px;
+}
+
+svg|svg {
+ display: block;
+ width: 146px;
+ height: 122px;
+ margin-right: -2px;
+ margin-bottom: 20px;
+}
+
+</style>
+</head>
+<body>
+<div class="wrapper">
+<div class="cover"></div>
+<div class="cover2"></div>
+<svg:svg>
+ <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px"
+ fill="blue"/>
+ <svg:rect x="0" y="18px" width="144px" height="86px" rx="61px" ry="43px"
+ fill="red"/>
+</svg:svg>
+<div class="cover"></div>
+<div class="cover2"></div>
+<svg:svg>
+ <svg:clipPath id="topclip">
+ <svg:rect x="0" y="0" width="144px" height="61px"/>
+ </svg:clipPath>
+ <svg:clipPath id="botclip">
+ <svg:rect x="0" y="61px" width="144px" height="61px"/>
+ </svg:clipPath>
+ <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px"
+ fill="black" clip-path="url(#topclip)"/>
+ <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px"
+ fill="blue" clip-path="url(#botclip)"/>
+ <svg:rect x="0" y="18px" width="144px" height="86px" rx="61px" ry="43px"
+ fill="red"/>
+</svg:svg>
+</div>
+<div class="wrapper">
+<div class="cover" style="width: 142px"></div>
+<div class="cover2" style="margin-left: -1px; border-radius: 61px / 45px"></div>
+<svg:svg>
+ <svg:rect x="0" y="0" width="146px" height="122px" rx="61px" ry="61px"
+ fill="blue"/>
+ <svg:rect x="0" y="18px" width="146px" height="86px" rx="61px" ry="43px"
+ fill="red"/>
+</svg:svg>
+<div class="cover"></div>
+<div class="cover2"></div>
+<svg:svg>
+ <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px"
+ fill="black" clip-path="url(#topclip)"/>
+ <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px"
+ fill="blue" clip-path="url(#botclip)"/>
+ <svg:rect x="0" y="18px" width="144px" height="86px" rx="61px" ry="43px"
+ fill="red"/>
+</svg:svg>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/corner-joins-1.xhtml b/layout/reftests/border-radius/corner-joins-1.xhtml
new file mode 100644
index 0000000000..f7a9b8ecdc
--- /dev/null
+++ b/layout/reftests/border-radius/corner-joins-1.xhtml
@@ -0,0 +1,78 @@
+<?xml version="1.0"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>border</title>
+<style type="text/css">
+
+div.wrapper {
+ float: left;
+ margin-left: 20px;
+ margin-top: 10px;
+}
+
+div.test {
+ width: 144px;
+ height: 86px;
+ border-radius: 72px;
+ border-top: 18px solid;
+ border-bottom: 18px solid;
+ background: red;
+ margin-bottom: 20px;
+}
+
+div.cover, div.cover2 {
+ position: absolute;
+ border: 4px solid white; /* cover areas that may differ */
+ width: 140px;
+ height: 118px;
+ border-radius: 63px;
+ margin-left: -2px;
+ margin-top: -2px;
+}
+div.cover2 {
+ height: 82px;
+ margin-top: 16px;
+ border-radius: 63px / 45px;
+}
+
+#one {
+ border-color: blue;
+}
+
+#two {
+ border-bottom-color: blue;
+}
+
+#three {
+ border-color: blue;
+ border-left: 0.01px solid red;
+ border-right: 0.01px solid red;
+}
+
+#four {
+ border-bottom-color: blue;
+ border-left: 0.001px solid red;
+ border-right: 0.001px solid red;
+}
+
+</style>
+</head>
+<body>
+<div class="wrapper">
+<div class="cover"></div>
+<div class="cover2"></div>
+<div class="test" id="one"></div>
+<div class="cover"></div>
+<div class="cover2"></div>
+<div class="test" id="two"></div>
+</div>
+<div class="wrapper">
+<div class="cover" style="width: 142px"></div>
+<div class="cover2" style="margin-left: -1px; border-radius: 61px / 45px"></div>
+<div class="test" id="three"></div>
+<div class="cover"></div>
+<div class="cover2"></div>
+<div class="test" id="four"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/corner-joins-2-ref.xhtml b/layout/reftests/border-radius/corner-joins-2-ref.xhtml
new file mode 100644
index 0000000000..de765cd10d
--- /dev/null
+++ b/layout/reftests/border-radius/corner-joins-2-ref.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>border</title>
+<style type="text/css">
+
+body {
+ filter: url('../filters.svg#NonWhiteToBlack');
+}
+
+body > div {
+ /* filter doesn't change alpha */
+ background: white;
+}
+
+div.test {
+ width: 154px;
+ height: 142px;
+ border-radius: 72px;
+ background: black;
+}
+
+</style>
+</head>
+<body>
+<div>
+<div class="test"></div>
+</div>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ version="1.1">
+ <!-- use an empty g to force filters.svg to load before onload -->
+ <use xlink:href="../filters.svg#empty" />
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/corner-joins-2.xhtml b/layout/reftests/border-radius/corner-joins-2.xhtml
new file mode 100644
index 0000000000..fcc0399c32
--- /dev/null
+++ b/layout/reftests/border-radius/corner-joins-2.xhtml
@@ -0,0 +1,42 @@
+<?xml version="1.0"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>border</title>
+<style type="text/css">
+
+body {
+ filter: url('../filters.svg#NonWhiteToBlack');
+}
+
+body > div {
+ /* filter doesn't change alpha */
+ background: white;
+}
+
+div.test {
+ width: 144px;
+ height: 86px;
+ border-radius: 72px;
+ border-top: 28px solid;
+ border-bottom: 28px solid;
+ background: cyan;
+ margin-bottom: 20px;
+ border-color: blue;
+ border-left: 5px solid red;
+ border-right: 5px solid red;
+}
+
+</style>
+</head>
+<body>
+<div>
+<div class="test"></div>
+</div>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ version="1.1">
+ <!-- use an empty g to force filters.svg to load before onload -->
+ <use xlink:href="../filters.svg#empty" />
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/corner-split-ref.svg b/layout/reftests/border-radius/corner-split-ref.svg
new file mode 100644
index 0000000000..742fc03ba9
--- /dev/null
+++ b/layout/reftests/border-radius/corner-split-ref.svg
@@ -0,0 +1,20 @@
+<svg width="178" height="178"
+ xmlns="http://www.w3.org/2000/svg">
+ <clipPath id="topside"><path d="M175,0 L35,70 L0,0 z" /></clipPath>
+ <clipPath id="leftside"><path d="M0,0 L35,70 L25,75 L0,175 z" /></clipPath>
+ <clipPath id="bottomside"><path d="M0,175 L25,75 L75,75 L175,175 z" /></clipPath>
+ <clipPath id="rightside"><path d="M75,75 L75,50 L175,0 L175,175 z" /></clipPath>
+ <rect x="0" y="0" width="175" height="175" rx="75" ry="75" clip-path="url(#topside)" fill="red" />
+ <rect x="0" y="0" width="175" height="175" rx="75" ry="75" clip-path="url(#leftside)" fill="green" />
+ <rect x="0" y="0" width="175" height="175" rx="75" ry="75" clip-path="url(#bottomside)" fill="blue" />
+ <rect x="0" y="0" width="175" height="175" rx="75" ry="75" clip-path="url(#rightside)" fill="black" />
+ <path d="M75,50 L75,75 L25,75 A50,25 0 0,1 75,50" fill="white" />
+
+ <rect x="0" y="0" width="175" height="175" rx="75" ry="75" fill="none" stroke="orange" stroke-width="3" />
+ <line x1="145" y1="15" x2="75" y2="50" stroke="orange" stroke-width="3" />
+ <line x1="153.033004761" y1="153.033004761" x2="75" y2="75" stroke="orange" stroke-width="3" />
+ <line x1="9.580468178" y1="136.678131104" x2="25" y2="75" stroke="orange" stroke-width="3" />
+ <line x1="15.000000954" y1="30.000001907" x2="31.386978149" y2="62.773956299" stroke="orange" stroke-width="3" />
+ <path d="M75,50 L75,75 L25,75 A50,25 0 0,1 75,50" fill="none" stroke="orange" stroke-width="3" />
+</svg>
+
diff --git a/layout/reftests/border-radius/corner-split.html b/layout/reftests/border-radius/corner-split.html
new file mode 100644
index 0000000000..59d26aa1e5
--- /dev/null
+++ b/layout/reftests/border-radius/corner-split.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style type="text/css">
+#borders, .cover {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+#borders {
+ width: 50px;
+ height: 25px;
+ border-radius: 75px;
+ border-top: 50px solid red;
+ border-bottom: 100px solid blue;
+ border-left: 25px solid green;
+ border-right: 100px solid black;
+}
+ </style>
+ </head>
+ <body>
+ <div id="borders"></div>
+<svg width="178" height="178" class="cover">
+ <rect x="0" y="0" width="175" height="175" rx="75" ry="75" fill="none" stroke="orange" stroke-width="3" />
+ <line x1="145" y1="15" x2="75" y2="50" stroke="orange" stroke-width="3" />
+ <line x1="153.033004761" y1="153.033004761" x2="75" y2="75" stroke="orange" stroke-width="3" />
+ <line x1="9.580468178" y1="136.678131104" x2="25" y2="75" stroke="orange" stroke-width="3" />
+ <line x1="15.000000954" y1="30.000001907" x2="31.386978149" y2="62.773956299" stroke="orange" stroke-width="3" />
+ <path d="M75,50 L75,75 L25,75 A50,25 0 0,1 75,50" fill="none" stroke="orange" stroke-width="3" />
+</svg>
+ </body>
+</html>
diff --git a/layout/reftests/border-radius/curved-border-background-nogap-ref.html b/layout/reftests/border-radius/curved-border-background-nogap-ref.html
new file mode 100644
index 0000000000..67aead2bca
--- /dev/null
+++ b/layout/reftests/border-radius/curved-border-background-nogap-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<style>
+ div {
+ width: 100px;
+ height: 100px;
+ background: black;
+ }
+</style>
+<div></div>
diff --git a/layout/reftests/border-radius/curved-border-background-nogap.html b/layout/reftests/border-radius/curved-border-background-nogap.html
new file mode 100644
index 0000000000..01207e7f04
--- /dev/null
+++ b/layout/reftests/border-radius/curved-border-background-nogap.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<style>
+ /*
+ Turns out that the antialiasing on the outer edge of a block with
+ border-radius is not consistent if the width and border-width are changed
+ even if the resulting shape should look the same. So clip out the part
+ that's too far from the center
+ */
+ div.outer {
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ }
+ /* We want the following constraints to be satisfied:
+ 1) Entire inner div content area is contained inside the 100px square.
+ 2) Entire 100px square is contained inside the outer circle of the inner
+ div's border.
+
+ This requires that the inner div width/height be < 100px and that the
+ radius of the outer circle be at least 50 * sqrt(2). Let's go with a 75px
+ radius for that outer circle. We then need to shift our inner div up and
+ to the left by 25px to center it in the clipping region.
+ */
+
+ div.inner {
+ width: 50px;
+ height: 50px;
+ border: 50px solid black;
+ background: black;
+ border-radius: 100px;
+ position: relative;
+ top: -25px;
+ left: -25px;
+ }
+</style>
+<div class="outer"><div class="inner"></div></div>
diff --git a/layout/reftests/border-radius/curved-borders-all-styles.html b/layout/reftests/border-radius/curved-borders-all-styles.html
new file mode 100644
index 0000000000..e816483e21
--- /dev/null
+++ b/layout/reftests/border-radius/curved-borders-all-styles.html
@@ -0,0 +1,29 @@
+<html>
+
+<head>
+ <title>testcase for bug #382721</title>
+<style>
+ div {
+ background: beige;
+ margin: 1ex;
+ padding: 1ex;
+ border-radius: 3ex;
+ }
+</style>
+<script>
+ function ini() {
+ var s,i,d;
+ s=['none','hidden','dotted','dashed','solid',
+ 'double','groove','ridge','inset','outset'];
+ for (i=0; i<s.length; i++) {
+ d=document.createElement('div');
+ d.style.border=d.innerHTML=s[i];
+ document.body.appendChild(d);
+ }}
+</script>
+</head>
+
+<body onload="ini()"></body>
+
+</html>
+
diff --git a/layout/reftests/border-radius/curved-stripe-border-ref.svg b/layout/reftests/border-radius/curved-stripe-border-ref.svg
new file mode 100644
index 0000000000..726094142c
--- /dev/null
+++ b/layout/reftests/border-radius/curved-stripe-border-ref.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="200px" height="200px">
+<title>Curved stripe border (SVG)</title>
+<style type="text/css">
+path { stroke: none; }
+</style>
+<path
+ d="M20,60 a60,40 0 0,1 60,-40
+ h60 a60,40 0 0,1 60,40
+ v100 a60,40 0 0,1 -60,40
+ h-60 a60,40 0 0,1 -60,-40 z
+ M30,160 a50,30 0 0,0 50,30
+ h60 a50,30 0 0,0 50,-30
+ v-100 a50,30 0 0,0 -50,-30
+ h-60 a50,30 0 0,0 -50,30 z"/>
+<path
+ d="M40,60 a40,20 0 0,1 40,-20
+ h60 a40,20 0 0,1 40,20
+ v100 a40,20 0 0,1 -40,20
+ h-60 a40,20 0 0,1 -40,-20 z
+ M50,160 a30,10 0 0,0 30,10
+ h60 a30,10 0 0,0 30,-10
+ v-100 a30,10 0 0,0 -30,-10
+ h-60 a30,10 0 0,0 -30,10 z"/>
+</svg>
diff --git a/layout/reftests/border-radius/curved-stripe-border.html b/layout/reftests/border-radius/curved-stripe-border.html
new file mode 100644
index 0000000000..1f962765d1
--- /dev/null
+++ b/layout/reftests/border-radius/curved-stripe-border.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html><head>
+<title>Curved stripe border (HTML)</title>
+<style>
+body { margin: 0 }
+div {
+ box-sizing: border-box;
+ width: 180px;
+ height: 180px;
+ border: 30px double black;
+ border-radius: 60px / 40px;
+ margin: 20px;
+}
+</style>
+</head><body>
+<div></div>
+</body></html>
diff --git a/layout/reftests/border-radius/iframe-1-ref.html b/layout/reftests/border-radius/iframe-1-ref.html
new file mode 100644
index 0000000000..360c443f04
--- /dev/null
+++ b/layout/reftests/border-radius/iframe-1-ref.html
@@ -0,0 +1,7 @@
+<html>
+<body>
+<iframe style="position: absolute; left: 0px; top: 0px; width: 300px; height: 150px; border: none; border-radius: 50px; background: green;" src="data:text/html,<body>"></iframe>
+<div style="position: absolute; left: 10px; top: 0px; width: 280px; height: 150px; background: red;"></div>
+<div style="position: absolute; left: 0px; top: 10px; width: 300px; height: 130px; background: red;"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/iframe-1.html b/layout/reftests/border-radius/iframe-1.html
new file mode 100644
index 0000000000..b3fc86792c
--- /dev/null
+++ b/layout/reftests/border-radius/iframe-1.html
@@ -0,0 +1,7 @@
+<html>
+<body>
+<iframe style="position: absolute; left: 0px; top: 0px; width: 300px; height: 150px; border: none; border-radius: 50px; background: green;" src="data:text/html,<body bgcolor=green>"></iframe>
+<div style="position: absolute; left: 10px; top: 0px; width: 280px; height: 150px; background: red;"></div>
+<div style="position: absolute; left: 0px; top: 10px; width: 300px; height: 130px; background: red;"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/inherit-1-ref.html b/layout/reftests/border-radius/inherit-1-ref.html
new file mode 100644
index 0000000000..c77e814ff3
--- /dev/null
+++ b/layout/reftests/border-radius/inherit-1-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html><head>
+<title>Border-radius inheritance</title>
+<style>
+.div1 { width: 100px; height: 100px;
+ border: 10px solid black;
+ border-radius: 10px;
+ left: 50px;
+ top: 50px;
+}
+
+div > div {
+ width: 40px; height: 40px;
+ border: 10px solid black;
+ position: absolute;
+ border-radius: 0px;
+ left: 40px;
+ top: 40px;
+}
+
+</style>
+</head>
+<body>
+ <div class="div1"><div></div></div>
+</body></html>
diff --git a/layout/reftests/border-radius/inherit-1.html b/layout/reftests/border-radius/inherit-1.html
new file mode 100644
index 0000000000..012e14799c
--- /dev/null
+++ b/layout/reftests/border-radius/inherit-1.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html><head>
+<title>Border-radius inheritance</title>
+<style>
+.div1 { width: 100px; height: 100px;
+ border: 10px solid black;
+ border-radius: 10px;
+ left: 50px;
+ top: 50px;
+}
+
+div > div {
+ width: 40px; height: 40px;
+ border: 10px solid black;
+ position: absolute;
+ left: 40px;
+ top: 40px;
+}
+
+</style>
+</head>
+<body>
+ <div class="div1"><div></div></div>
+</body></html>
diff --git a/layout/reftests/border-radius/intersecting-clipping-1-canvas.html b/layout/reftests/border-radius/intersecting-clipping-1-canvas.html
new file mode 100644
index 0000000000..020b1e4ce2
--- /dev/null
+++ b/layout/reftests/border-radius/intersecting-clipping-1-canvas.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+div {
+ overflow: hidden;
+ width: 200px;
+ height: 100px;
+ border-radius: 50px / 20px;
+}
+canvas {
+ border-radius: 20px / 40px;
+}
+</style>
+<div><canvas id="canvas" height="100" width="200"></canvas></div>
+<script>
+var canvas = document.getElementById("canvas");
+var cx = canvas.getContext("2d");
+cx.fillStyle="lime";
+cx.fillRect(0, 0, 200, 100);
+</script>
diff --git a/layout/reftests/border-radius/intersecting-clipping-1-image.html b/layout/reftests/border-radius/intersecting-clipping-1-image.html
new file mode 100644
index 0000000000..ba533d1097
--- /dev/null
+++ b/layout/reftests/border-radius/intersecting-clipping-1-image.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+div {
+ overflow: hidden;
+ width: 200px;
+ height: 100px;
+ border-radius: 50px / 20px;
+}
+img {
+ border-radius: 20px / 40px;
+ width: 200px;
+ height: 100px;
+}
+</style>
+<div><img src="../pixel-rounding/lime-25x25.png" alt=""></div>
diff --git a/layout/reftests/border-radius/intersecting-clipping-1-overflow-hidden.html b/layout/reftests/border-radius/intersecting-clipping-1-overflow-hidden.html
new file mode 100644
index 0000000000..38e2e3f48c
--- /dev/null
+++ b/layout/reftests/border-radius/intersecting-clipping-1-overflow-hidden.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+body > div {
+ overflow: hidden;
+ width: 200px;
+ height: 100px;
+ border-radius: 50px / 20px;
+}
+body > div > div {
+ border-radius: 20px / 40px;
+ overflow: hidden;
+ width: 200px;
+ height: 100px;
+ background: lime;
+}
+</style>
+<div><div></div></div>
diff --git a/layout/reftests/border-radius/intersecting-clipping-1-ref.html b/layout/reftests/border-radius/intersecting-clipping-1-ref.html
new file mode 100644
index 0000000000..0e4061a3f5
--- /dev/null
+++ b/layout/reftests/border-radius/intersecting-clipping-1-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+#contain {
+ width: 200px;
+ height: 100px;
+ position: relative;
+}
+#contain > div {
+ overflow: hidden;
+ width: 200px;
+ height: 100px;
+ border-radius: 50px / 20px;
+}
+#contain > div > div {
+ border-radius: 20px / 40px;
+ overflow: hidden;
+ width: 200px;
+ height: 100px;
+ background: lime;
+}
+
+#contain > div.spot {
+ position: absolute;
+ height: 1px;
+ width: 1px;
+}
+
+</style>
+<div id="contain">
+<div><div></div></div>
+
+<!--
+This is just like the test, except we'll add a bunch of spots in various
+places that should match the background of what they're on.
+-->
+
+<div class="spot" style="top: 1px; left: 15px; background: white"></div>
+<div class="spot" style="top: 14px; left: 2px; background: white"></div>
+<div class="spot" style="top: 18px; left: 0px; background: white"></div>
+<div class="spot" style="top: 82px; left: 198px; background: white"></div>
+<div class="spot" style="top: 97px; left: 180px; background: white"></div>
+<div class="spot" style="top: 2px; left: 180px; background: white"></div>
+<div class="spot" style="top: 17px; left: 198px; background: white"></div>
+<div class="spot" style="top: 97px; left: 19px; background: white"></div>
+<div class="spot" style="top: 82px; left: 1px; background: white"></div>
+
+<div class="spot" style="top: 10px; left: 8px; background: lime"></div>
+<div class="spot" style="top: 89px; left: 8px; background: lime"></div>
+<div class="spot" style="top: 10px; left: 191px; background: lime"></div>
+<div class="spot" style="top: 89px; left: 191px; background: lime"></div>
+
+</div>
diff --git a/layout/reftests/border-radius/intersecting-clipping-1-refc.html b/layout/reftests/border-radius/intersecting-clipping-1-refc.html
new file mode 100644
index 0000000000..7208a8c67b
--- /dev/null
+++ b/layout/reftests/border-radius/intersecting-clipping-1-refc.html
@@ -0,0 +1,55 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+#contain {
+ width: 200px;
+ height: 100px;
+ position: relative;
+}
+#contain > div {
+ overflow: hidden;
+ width: 200px;
+ height: 100px;
+ border-radius: 50px / 20px;
+}
+#contain > div > canvas {
+ border-radius: 20px / 40px;
+}
+
+#contain > div.spot {
+ position: absolute;
+ height: 1px;
+ width: 1px;
+}
+
+</style>
+<div id="contain">
+<div><canvas id="canvas" height="100" width="200"></canvas></div>
+<script>
+var canvas = document.getElementById("canvas");
+var cx = canvas.getContext("2d");
+cx.fillStyle="lime";
+cx.fillRect(0, 0, 200, 100);
+</script>
+
+<!--
+This is just like the test, except we'll add a bunch of spots in various
+places that should match the background of what they're on.
+-->
+
+<div class="spot" style="top: 1px; left: 15px; background: white"></div>
+<div class="spot" style="top: 14px; left: 2px; background: white"></div>
+<div class="spot" style="top: 18px; left: 0px; background: white"></div>
+<div class="spot" style="top: 82px; left: 198px; background: white"></div>
+<div class="spot" style="top: 97px; left: 180px; background: white"></div>
+<div class="spot" style="top: 2px; left: 180px; background: white"></div>
+<div class="spot" style="top: 17px; left: 198px; background: white"></div>
+<div class="spot" style="top: 97px; left: 19px; background: white"></div>
+<div class="spot" style="top: 82px; left: 1px; background: white"></div>
+
+<div class="spot" style="top: 10px; left: 8px; background: lime"></div>
+<div class="spot" style="top: 89px; left: 8px; background: lime"></div>
+<div class="spot" style="top: 10px; left: 191px; background: lime"></div>
+<div class="spot" style="top: 89px; left: 191px; background: lime"></div>
+
+</div>
diff --git a/layout/reftests/border-radius/intersecting-clipping-1-refi.html b/layout/reftests/border-radius/intersecting-clipping-1-refi.html
new file mode 100644
index 0000000000..c21a147252
--- /dev/null
+++ b/layout/reftests/border-radius/intersecting-clipping-1-refi.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<title>Test for clipping of border-radius</title>
+<style>
+#contain {
+ width: 200px;
+ height: 100px;
+ position: relative;
+}
+#contain > div {
+ overflow: hidden;
+ width: 200px;
+ height: 100px;
+ border-radius: 50px / 20px;
+}
+#contain > div > img {
+ border-radius: 20px / 40px;
+ width: 200px;
+ height: 100px;
+}
+
+#contain > div.spot {
+ position: absolute;
+ height: 1px;
+ width: 1px;
+}
+
+</style>
+<div id="contain">
+<div><img src="../pixel-rounding/lime-25x25.png" alt=""></div>
+
+<!--
+This is just like the test, except we'll add a bunch of spots in various
+places that should match the background of what they're on.
+-->
+
+<div class="spot" style="top: 1px; left: 15px; background: white"></div>
+<div class="spot" style="top: 14px; left: 2px; background: white"></div>
+<div class="spot" style="top: 18px; left: 0px; background: white"></div>
+<div class="spot" style="top: 82px; left: 198px; background: white"></div>
+<div class="spot" style="top: 97px; left: 180px; background: white"></div>
+<div class="spot" style="top: 2px; left: 180px; background: white"></div>
+<div class="spot" style="top: 17px; left: 198px; background: white"></div>
+<div class="spot" style="top: 97px; left: 19px; background: white"></div>
+<div class="spot" style="top: 82px; left: 1px; background: white"></div>
+
+<div class="spot" style="top: 10px; left: 8px; background: lime"></div>
+<div class="spot" style="top: 89px; left: 8px; background: lime"></div>
+<div class="spot" style="top: 10px; left: 191px; background: lime"></div>
+<div class="spot" style="top: 89px; left: 191px; background: lime"></div>
+
+</div>
diff --git a/layout/reftests/border-radius/invalidate-1-ref.html b/layout/reftests/border-radius/invalidate-1-ref.html
new file mode 100644
index 0000000000..951f549d04
--- /dev/null
+++ b/layout/reftests/border-radius/invalidate-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div id="d" style="background:blue; border-radius:50px; width:200px; height:200px;">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/invalidate-1a.html b/layout/reftests/border-radius/invalidate-1a.html
new file mode 100644
index 0000000000..0d5ce323be
--- /dev/null
+++ b/layout/reftests/border-radius/invalidate-1a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body>
+<div id="d" style="background:blue; border-radius:50px; width:200px; height:100px;">
+</div>
+<script>
+function doTest() {
+ var d = document.getElementById("d");
+ d.style.height = "200px";
+ document.documentElement.className = "";
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/invalidate-1b.html b/layout/reftests/border-radius/invalidate-1b.html
new file mode 100644
index 0000000000..be740a2251
--- /dev/null
+++ b/layout/reftests/border-radius/invalidate-1b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body>
+<div id="d" style="background:blue; border-radius:50px; width:100px; height:200px;">
+</div>
+<script>
+function doTest() {
+ var d = document.getElementById("d");
+ d.style.width = "200px";
+ document.documentElement.className = "";
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/outline-circle.html b/layout/reftests/border-radius/outline-circle.html
new file mode 100644
index 0000000000..41fcf369e3
--- /dev/null
+++ b/layout/reftests/border-radius/outline-circle.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html><head>
+<title>Circular outline</title>
+<style>
+div { width: 50px; height: 50px;
+ outline: 2px solid black;
+ border-radius: 10px;
+}
+</style>
+</head>
+<body><div></div></body></html>
diff --git a/layout/reftests/border-radius/outline-ellips.html b/layout/reftests/border-radius/outline-ellips.html
new file mode 100644
index 0000000000..965f44432f
--- /dev/null
+++ b/layout/reftests/border-radius/outline-ellips.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html><head>
+<title>Elliptical outline</title>
+<style>
+div { width: 50px; height: 50px;
+ outline: 2px solid black;
+ border-radius: 10px / 20px;
+}
+</style>
+</head>
+<body><div></div></body></html>
diff --git a/layout/reftests/border-radius/outline-square.html b/layout/reftests/border-radius/outline-square.html
new file mode 100644
index 0000000000..e95610cf25
--- /dev/null
+++ b/layout/reftests/border-radius/outline-square.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html><head>
+<title>Square outline</title>
+<style>
+div { width: 50px; height: 50px;
+ outline: 2px solid black;
+}
+</style>
+</head>
+<body><div></div></body></html>
diff --git a/layout/reftests/border-radius/percent-1-ref.html b/layout/reftests/border-radius/percent-1-ref.html
new file mode 100644
index 0000000000..8bfd633b2d
--- /dev/null
+++ b/layout/reftests/border-radius/percent-1-ref.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html><head><title>Border radius with percent units &mdash; reference</title>
+<style>
+div { background: green; }
+.r1 { height: 20px; } .c1 { width: 20px; }
+.r2 { height: 40px; } .c2 { width: 40px; }
+.r3 { height: 60px; } .c3 { width: 60px; }
+.r4 { height: 80px; } .c4 { width: 80px; }
+
+.r1.c1 { border-radius: 5px / 5px; }
+.r1.c2 { border-radius: 10px / 5px; }
+.r1.c3 { border-radius: 15px / 5px; }
+.r1.c4 { border-radius: 20px / 5px; }
+.r2.c1 { border-radius: 5px / 10px; }
+.r2.c2 { border-radius: 10px / 10px; }
+.r2.c3 { border-radius: 15px / 10px; }
+.r2.c4 { border-radius: 20px / 10px; }
+.r3.c1 { border-radius: 5px / 15px; }
+.r3.c2 { border-radius: 10px / 15px; }
+.r3.c3 { border-radius: 15px / 15px; }
+.r3.c4 { border-radius: 20px / 15px; }
+.r4.c1 { border-radius: 5px / 20px; }
+.r4.c2 { border-radius: 10px / 20px; }
+.r4.c3 { border-radius: 15px / 20px; }
+.r4.c4 { border-radius: 20px / 20px; }
+
+</style>
+</head><body>
+<table>
+ <tr>
+ <td><div class="r1 c1"></div></td>
+ <td><div class="r1 c2"></div></td>
+ <td><div class="r1 c3"></div></td>
+ <td><div class="r1 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r2 c1"></div></td>
+ <td><div class="r2 c2"></div></td>
+ <td><div class="r2 c3"></div></td>
+ <td><div class="r2 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r3 c1"></div></td>
+ <td><div class="r3 c2"></div></td>
+ <td><div class="r3 c3"></div></td>
+ <td><div class="r3 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r4 c1"></div></td>
+ <td><div class="r4 c2"></div></td>
+ <td><div class="r4 c3"></div></td>
+ <td><div class="r4 c4"></div></td>
+ </tr>
+</table>
+</body></html>
diff --git a/layout/reftests/border-radius/percent-1.html b/layout/reftests/border-radius/percent-1.html
new file mode 100644
index 0000000000..395a070ca7
--- /dev/null
+++ b/layout/reftests/border-radius/percent-1.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html><head><title>Border radius with percent units &mdash; test</title>
+<style>
+div { border-radius: 25%; background: green; }
+.r1 { height: 20px; } .c1 { width: 20px; }
+.r2 { height: 40px; } .c2 { width: 40px; }
+.r3 { height: 60px; } .c3 { width: 60px; }
+.r4 { height: 80px; } .c4 { width: 80px; }
+</style>
+</head><body>
+<table>
+ <tr>
+ <td><div class="r1 c1"></div></td>
+ <td><div class="r1 c2"></div></td>
+ <td><div class="r1 c3"></div></td>
+ <td><div class="r1 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r2 c1"></div></td>
+ <td><div class="r2 c2"></div></td>
+ <td><div class="r2 c3"></div></td>
+ <td><div class="r2 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r3 c1"></div></td>
+ <td><div class="r3 c2"></div></td>
+ <td><div class="r3 c3"></div></td>
+ <td><div class="r3 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r4 c1"></div></td>
+ <td><div class="r4 c2"></div></td>
+ <td><div class="r4 c3"></div></td>
+ <td><div class="r4 c4"></div></td>
+ </tr>
+</table>
+</body></html>
diff --git a/layout/reftests/border-radius/percent-2-ref.html b/layout/reftests/border-radius/percent-2-ref.html
new file mode 100644
index 0000000000..2680427acd
--- /dev/null
+++ b/layout/reftests/border-radius/percent-2-ref.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html><head><title>Border radius with percent units &mdash; reference</title>
+<style>
+div { background: green; }
+.r1 { height: 20px; } .c1 { width: 20px; }
+.r2 { height: 40px; } .c2 { width: 40px; }
+.r3 { height: 60px; } .c3 { width: 60px; }
+.r4 { height: 80px; } .c4 { width: 80px; }
+
+.r1.c1 { border-radius: 5px 2px / 5px 2px; }
+.r1.c2 { border-radius: 10px 4px / 5px 2px; }
+.r1.c3 { border-radius: 15px 6px / 5px 2px; }
+.r1.c4 { border-radius: 20px 8px / 5px 2px; }
+.r2.c1 { border-radius: 5px 2px / 10px 4px; }
+.r2.c2 { border-radius: 10px 4px / 10px 4px; }
+.r2.c3 { border-radius: 15px 6px / 10px 4px; }
+.r2.c4 { border-radius: 20px 8px / 10px 4px; }
+.r3.c1 { border-radius: 5px 2px / 15px 6px; }
+.r3.c2 { border-radius: 10px 4px / 15px 6px; }
+.r3.c3 { border-radius: 15px 6px / 15px 6px; }
+.r3.c4 { border-radius: 20px 8px / 15px 6px; }
+.r4.c1 { border-radius: 5px 2px / 20px 8px; }
+.r4.c2 { border-radius: 10px 4px / 20px 8px; }
+.r4.c3 { border-radius: 15px 6px / 20px 8px; }
+.r4.c4 { border-radius: 20px 8px / 20px 8px; }
+
+</style>
+</head><body>
+<table>
+ <tr>
+ <td><div class="r1 c1"></div></td>
+ <td><div class="r1 c2"></div></td>
+ <td><div class="r1 c3"></div></td>
+ <td><div class="r1 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r2 c1"></div></td>
+ <td><div class="r2 c2"></div></td>
+ <td><div class="r2 c3"></div></td>
+ <td><div class="r2 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r3 c1"></div></td>
+ <td><div class="r3 c2"></div></td>
+ <td><div class="r3 c3"></div></td>
+ <td><div class="r3 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r4 c1"></div></td>
+ <td><div class="r4 c2"></div></td>
+ <td><div class="r4 c3"></div></td>
+ <td><div class="r4 c4"></div></td>
+ </tr>
+</table>
+</body></html>
diff --git a/layout/reftests/border-radius/percent-2.html b/layout/reftests/border-radius/percent-2.html
new file mode 100644
index 0000000000..98fdb10bed
--- /dev/null
+++ b/layout/reftests/border-radius/percent-2.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html><head><title>Border radius with percent units &mdash; test</title>
+<style>
+div { border-radius: 25% 10%; background: green; }
+.r1 { height: 20px; } .c1 { width: 20px; }
+.r2 { height: 40px; } .c2 { width: 40px; }
+.r3 { height: 60px; } .c3 { width: 60px; }
+.r4 { height: 80px; } .c4 { width: 80px; }
+</style>
+</head><body>
+<table>
+ <tr>
+ <td><div class="r1 c1"></div></td>
+ <td><div class="r1 c2"></div></td>
+ <td><div class="r1 c3"></div></td>
+ <td><div class="r1 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r2 c1"></div></td>
+ <td><div class="r2 c2"></div></td>
+ <td><div class="r2 c3"></div></td>
+ <td><div class="r2 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r3 c1"></div></td>
+ <td><div class="r3 c2"></div></td>
+ <td><div class="r3 c3"></div></td>
+ <td><div class="r3 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r4 c1"></div></td>
+ <td><div class="r4 c2"></div></td>
+ <td><div class="r4 c3"></div></td>
+ <td><div class="r4 c4"></div></td>
+ </tr>
+</table>
+</body></html>
diff --git a/layout/reftests/border-radius/percent-3-ref.html b/layout/reftests/border-radius/percent-3-ref.html
new file mode 100644
index 0000000000..83abf9c4da
--- /dev/null
+++ b/layout/reftests/border-radius/percent-3-ref.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html><head><title>Border radius with percent units &mdash; reference</title>
+<style>
+div { background: green; }
+.r1 { height: 20px; } .c1 { width: 20px; }
+.r2 { height: 40px; } .c2 { width: 40px; }
+.r3 { height: 60px; } .c3 { width: 60px; }
+.r4 { height: 80px; } .c4 { width: 80px; }
+
+.r1.c1 { border-radius: 5px / 2px; }
+.r1.c2 { border-radius: 10px / 2px; }
+.r1.c3 { border-radius: 15px / 2px; }
+.r1.c4 { border-radius: 20px / 2px; }
+.r2.c1 { border-radius: 5px / 4px; }
+.r2.c2 { border-radius: 10px / 4px; }
+.r2.c3 { border-radius: 15px / 4px; }
+.r2.c4 { border-radius: 20px / 4px; }
+.r3.c1 { border-radius: 5px / 6px; }
+.r3.c2 { border-radius: 10px / 6px; }
+.r3.c3 { border-radius: 15px / 6px; }
+.r3.c4 { border-radius: 20px / 6px; }
+.r4.c1 { border-radius: 5px / 8px; }
+.r4.c2 { border-radius: 10px / 8px; }
+.r4.c3 { border-radius: 15px / 8px; }
+.r4.c4 { border-radius: 20px / 8px; }
+
+</style>
+</head><body>
+<table>
+ <tr>
+ <td><div class="r1 c1"></div></td>
+ <td><div class="r1 c2"></div></td>
+ <td><div class="r1 c3"></div></td>
+ <td><div class="r1 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r2 c1"></div></td>
+ <td><div class="r2 c2"></div></td>
+ <td><div class="r2 c3"></div></td>
+ <td><div class="r2 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r3 c1"></div></td>
+ <td><div class="r3 c2"></div></td>
+ <td><div class="r3 c3"></div></td>
+ <td><div class="r3 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r4 c1"></div></td>
+ <td><div class="r4 c2"></div></td>
+ <td><div class="r4 c3"></div></td>
+ <td><div class="r4 c4"></div></td>
+ </tr>
+</table>
+</body></html>
diff --git a/layout/reftests/border-radius/percent-3.html b/layout/reftests/border-radius/percent-3.html
new file mode 100644
index 0000000000..bb3103554e
--- /dev/null
+++ b/layout/reftests/border-radius/percent-3.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html><head><title>Border radius with percent units &mdash; test</title>
+<style>
+div { border-radius: 25% / 10%; background: green; }
+.r1 { height: 20px; } .c1 { width: 20px; }
+.r2 { height: 40px; } .c2 { width: 40px; }
+.r3 { height: 60px; } .c3 { width: 60px; }
+.r4 { height: 80px; } .c4 { width: 80px; }
+</style>
+</head><body>
+<table>
+ <tr>
+ <td><div class="r1 c1"></div></td>
+ <td><div class="r1 c2"></div></td>
+ <td><div class="r1 c3"></div></td>
+ <td><div class="r1 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r2 c1"></div></td>
+ <td><div class="r2 c2"></div></td>
+ <td><div class="r2 c3"></div></td>
+ <td><div class="r2 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r3 c1"></div></td>
+ <td><div class="r3 c2"></div></td>
+ <td><div class="r3 c3"></div></td>
+ <td><div class="r3 c4"></div></td>
+ </tr>
+ <tr>
+ <td><div class="r4 c1"></div></td>
+ <td><div class="r4 c2"></div></td>
+ <td><div class="r4 c3"></div></td>
+ <td><div class="r4 c4"></div></td>
+ </tr>
+</table>
+</body></html>
diff --git a/layout/reftests/border-radius/reftest.list b/layout/reftests/border-radius/reftest.list
new file mode 100644
index 0000000000..7d409143a9
--- /dev/null
+++ b/layout/reftests/border-radius/reftest.list
@@ -0,0 +1,96 @@
+# really basic tests that square, circular, and elliptical border and
+# outline radius are not the same thing
+!= border-square.html about:blank
+!= border-circle.html about:blank
+!= border-ellips.html about:blank
+!= border-square.html border-circle.html
+!= border-square.html border-ellips.html
+!= border-circle.html border-ellips.html
+
+!= outline-square.html about:blank
+!= outline-circle.html about:blank
+!= outline-ellips.html about:blank
+!= outline-square.html outline-circle.html
+!= outline-square.html outline-ellips.html
+!= outline-circle.html outline-ellips.html
+== border-value-interpret.html border-value-interpret-ref.html
+!= curved-borders-all-styles.html about:blank # no way to generate reference for dotted/dashed/inset/outset
+# ridge/groove borders
+
+# percent units
+== percent-1.html percent-1-ref.html
+fuzzy(0-1,0-342) == percent-2.html percent-2-ref.html
+fuzzy(0-1,0-343) == percent-3.html percent-3-ref.html
+
+# more serious tests, using SVG reference
+fuzzy(17-30,58-70) == border-circle-2.html border-circle-2-ref.xhtml
+fuzzy(61-63,248-1013) == curved-stripe-border.html curved-stripe-border-ref.svg # bug 459945
+
+# Corners
+fuzzy(17-30,47-58) == corner-1.html corner-1-ref.svg # bottom corners different radius than top corners
+fuzzy(18-30,49-57) == corner-2.html corner-2-ref.svg # right corners different radius than left corners; see bug 500804
+fuzzy(18-23,90-105) == corner-3.html corner-3-ref.svg
+fuzzy(12-13,83-108) == corner-4.html corner-4-ref.svg
+
+# Test that radii too long are reduced
+== border-reduce-height.html border-reduce-height-ref.html
+
+# Tests for border clipping
+fails == clipping-1.html clipping-1-ref.html # background color should completely fill box; bug 466572
+!= clipping-2.html about:blank # background color clipped to inner/outer border, can't get
+# great tests for this due to antialiasing problems described in bug 466572
+fuzzy(17-30,58-111) == clipping-3.html clipping-3-ref.xhtml # edge of border-radius clips an underlying object's background
+
+# Tests for clipping the contents of replaced elements and overflow!=visible
+!= clipping-4-ref.html clipping-4-notref.html
+skip-if(Android&&emulator) fuzzy(0-8,0-20) fuzzy-if(useDrawSnapshot,1-1,172-172) == clipping-4-canvas.html clipping-4-ref.html # bug 732535
+fuzzy(0-1,0-172) == clipping-4-image.html clipping-4-ref.html
+fuzzy(0-1,0-77) == clipping-4-overflow-hidden.html clipping-4-ref.html
+skip-if(Android&&emulator) == clipping-5-canvas.html clipping-5-refc.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-5) == clipping-5-image.html clipping-5-refi.html
+fuzzy(0-1,0-77) == clipping-5-overflow-hidden.html clipping-5-ref.html
+fuzzy(0-1,0-97) == clipping-5-refi.html clipping-5-ref.html
+skip-if(Android&&emulator) fuzzy(0-1,0-77) fuzzy-if(useDrawSnapshot,1-1,97-97) == clipping-5-refc.html clipping-5-ref.html # bug 732535
+fuzzy(0-21,0-76) fuzzy-if(winWidget,0-144,0-335) == clipping-6.html clipping-6-ref.html # PaintedLayer and MaskLayer with transforms that aren't identical
+fuzzy(0-28,0-97) == clipping-7.html clipping-7-ref.html # ColorLayer and MaskLayer with transforms that aren't identical. Reference image rendered without using layers (which causes fuzzy failures).
+== clipping-and-zindex-1.html clipping-and-zindex-1-ref.html
+skip-if(Android&&emulator) fuzzy-if(cocoaWidget,0-1,0-4) fuzzy-if(d2d,0-59,0-342) == intersecting-clipping-1-canvas.html intersecting-clipping-1-refc.html
+== intersecting-clipping-1-image.html intersecting-clipping-1-refi.html
+== intersecting-clipping-1-overflow-hidden.html intersecting-clipping-1-ref.html
+fuzzy(0-1,0-300) == intersecting-clipping-1-refi.html intersecting-clipping-1-ref.html
+skip-if(Android&&emulator) fuzzy(0-1,0-135) skip-if(winWidget) fuzzy-if(useDrawSnapshot,1-1,299-299) == intersecting-clipping-1-refc.html intersecting-clipping-1-ref.html # bug 732535 # Disable on Windows bug 1451808
+
+== clipping-preserve-3d.html clipping-preserve-3d-ref.html
+
+# Inheritance
+== inherit-1.html inherit-1-ref.html # border-radius shouldn't inherit
+
+# Table elements
+== table-collapse-1.html table-collapse-1-ref.html # border-radius is ignored on internal table elements
+# when border-collapse: collapse
+
+fuzzy(0-1,0-116) == invalidate-1a.html invalidate-1-ref.html
+fuzzy(0-1,0-117) == invalidate-1b.html invalidate-1-ref.html
+
+# test that border-radius is reduced for scrollbars
+fails-if(Android) fuzzy-if(asyncPan&&!layersGPUAccelerated,0-12,0-12) fuzzy-if(browserIsRemote&&layersGPUAccelerated&&/^Windows\x20NT\x206\.1/.test(http.oscpu),0-12,0-12) fuzzy-if(!Android,0-1,0-50) fuzzy-if(gtkWidget&&layersGPUAccelerated,0-12,0-12) == scrollbar-clamping-1.html scrollbar-clamping-1-ref.html
+fails-if(Android) == scrollbar-clamping-2.html scrollbar-clamping-2-ref.html
+
+# Test for bad corner joins.
+fuzzy(0-1,0-1) == corner-joins-1.xhtml corner-joins-1-ref.xhtml
+random-if(winWidget) fuzzy(0-255,0-610) == corner-joins-2.xhtml corner-joins-2-ref.xhtml
+
+fuzzy(0-59,0-146) == scroll-1.html scroll-1-ref.html # see bug 732535 #Bug 959166
+
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-35,0-194) fuzzy-if(swgl,0-1,0-2) == transforms-1.html transforms-1-ref.html # bug 1507152
+
+== zero-radius-clip-1.html zero-radius-clip-ref.html
+
+== iframe-1.html iframe-1-ref.html
+
+# Test for antialiasing gaps between background and border
+fuzzy(0-1,0-9) == curved-border-background-nogap.html curved-border-background-nogap-ref.html
+
+fuzzy(0-1,0-4) == color-layer-1a.html color-layer-1-ref.html
+
+fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,104-162) == corner-split.html corner-split-ref.svg
diff --git a/layout/reftests/border-radius/scroll-1-ref.html b/layout/reftests/border-radius/scroll-1-ref.html
new file mode 100644
index 0000000000..f290648d0f
--- /dev/null
+++ b/layout/reftests/border-radius/scroll-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="border-radius:100px; width:300px; height:300px; overflow:hidden;">
+ <div style="height:20px; background:blue;"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/scroll-1.html b/layout/reftests/border-radius/scroll-1.html
new file mode 100644
index 0000000000..30fd7fd8ff
--- /dev/null
+++ b/layout/reftests/border-radius/scroll-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+<script>
+function scrollTo(v) {
+ var d = document.getElementById("d");
+ d.scrollTop = v;
+ if (v < 100) {
+ setTimeout(function() { scrollTo(v + 50); }, 400);
+ } else {
+ document.documentElement.removeAttribute("class");
+ }
+}
+</script>
+</head>
+<body onload="scrollTo(0)">
+<div style="border-radius:100px; width:300px; height:300px; overflow:hidden;" id="d">
+ <div style="height:1000px;">
+ <div style="margin-top:100px; height:20px; background:blue;"></div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/scrollbar-clamping-1-ref.html b/layout/reftests/border-radius/scrollbar-clamping-1-ref.html
new file mode 100644
index 0000000000..39d803754c
--- /dev/null
+++ b/layout/reftests/border-radius/scrollbar-clamping-1-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html dir="ltr">
+<title>Test of reduction of border-radius for scrollbars (border drawing)</title>
+<style>
+
+.contain { height: 130px; position: relative }
+
+.test {
+ position: absolute;
+ top: 0;
+ left: 0;
+ /* border-width: 2px 4px 8px 10px; */
+ height: 100px;
+ width: 200px;
+ /* border-radius: 12px / 15px; */
+ border: medium solid blue;
+ border-width: 2px 4px 8px 10px;
+}
+
+.cover {
+ position: absolute;
+ width: 200px;
+ height: 100px;
+ top: 2px;
+ left: 10px;
+ background: blue;
+}
+
+</style>
+
+<div class="contain">
+ <!-- scrollbar along bottom -->
+ <div class="test" id="x" style="border-radius: 12px 12px 6.4px 10px / 15px 15px 8px 12.5px"></div>
+ <div class="cover" style="border-top-right-radius: 5px"></div>
+</div>
+
+<div class="contain">
+ <!-- scrollbar along right -->
+ <div class="test" id="y" style="border-radius: 12px 4px 6.4px 12px / 15px 5px 8px 15px"></div>
+ <div class="cover"></div>
+</div>
+
+<div class="contain">
+ <!-- scrollbar along bottom and right -->
+ <div class="test" id="xy" style="border-radius: 12px 4px 6.4px 10px / 15px 5px 8px 12.5px"></div>
+ <div class="cover"></div>
+</div>
diff --git a/layout/reftests/border-radius/scrollbar-clamping-1.html b/layout/reftests/border-radius/scrollbar-clamping-1.html
new file mode 100644
index 0000000000..5d4f3f8cb1
--- /dev/null
+++ b/layout/reftests/border-radius/scrollbar-clamping-1.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<title>Test of reduction of border-radius for scrollbars (border drawing)</title>
+<style>
+
+.contain { height: 130px; position: relative }
+
+.test {
+ position: absolute;
+ top: 0;
+ left: 0;
+ border: medium solid blue;
+ border-width: 2px 4px 8px 10px;
+ height: 100px;
+ width: 200px;
+ border-radius: 12px / 15px;
+}
+
+.cover {
+ position: absolute;
+ width: 200px;
+ height: 100px;
+ top: 2px;
+ left: 10px;
+ background: blue;
+}
+
+#x, #xy { overflow-x: scroll }
+#y, #xy { overflow-y: scroll }
+
+</style>
+
+<div class="contain">
+ <div class="test" id="x"></div>
+ <div class="cover" style="border-top-right-radius: 5px"></div>
+</div>
+
+<div class="contain">
+ <div class="test" id="y"></div>
+ <div class="cover"></div>
+</div>
+
+<div class="contain">
+ <div class="test" id="xy"></div>
+ <div class="cover"></div>
+</div>
diff --git a/layout/reftests/border-radius/scrollbar-clamping-2-ref.html b/layout/reftests/border-radius/scrollbar-clamping-2-ref.html
new file mode 100644
index 0000000000..de8015e4e8
--- /dev/null
+++ b/layout/reftests/border-radius/scrollbar-clamping-2-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html dir="ltr">
+<title>Test of reduction of border-radius for scrollbars (background drawing)</title>
+<style>
+
+.contain { height: 130px; position: relative }
+
+.test {
+ position: absolute;
+ top: 0;
+ left: 0;
+ /* border-width: 2px 4px 8px 10px; */
+ height: 110px;
+ width: 214px;
+ /* border-radius: 12px / 15px; */
+ background: blue;
+}
+
+</style>
+
+<div class="contain">
+ <!-- scrollbar along bottom -->
+ <div class="test" id="x" style="border-radius: 12px 12px 6.4px 10px / 15px 15px 8px 12.5px"></div>
+</div>
+
+<div class="contain">
+ <!-- scrollbar along right -->
+ <div class="test" id="y" style="border-radius: 12px 4px 6.4px 12px / 15px 5px 8px 15px"></div>
+</div>
+
+<div class="contain">
+ <!-- scrollbar along bottom and right -->
+ <div class="test" id="xy" style="border-radius: 12px 4px 6.4px 10px / 15px 5px 8px 12.5px"></div>
+</div>
diff --git a/layout/reftests/border-radius/scrollbar-clamping-2.html b/layout/reftests/border-radius/scrollbar-clamping-2.html
new file mode 100644
index 0000000000..177e102005
--- /dev/null
+++ b/layout/reftests/border-radius/scrollbar-clamping-2.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<title>Test of reduction of border-radius for scrollbars (background drawing)</title>
+<style>
+
+.contain { height: 130px; position: relative }
+
+.test {
+ position: absolute;
+ top: 0;
+ left: 0;
+ border: medium solid transparent;
+ background: blue;
+ border-width: 2px 4px 8px 10px;
+ height: 100px;
+ width: 200px;
+ border-radius: 12px / 15px;
+}
+
+.cover {
+ position: absolute;
+ width: 200px;
+ height: 100px;
+ top: 2px;
+ left: 10px;
+ background: blue;
+}
+
+#x, #xy { overflow-x: scroll }
+#y, #xy { overflow-y: scroll }
+
+</style>
+
+<div class="contain">
+ <div class="test" id="x"></div>
+ <div class="cover" style="margin-top: 50px; height: 50px"></div>
+</div>
+
+<div class="contain">
+ <div class="test" id="y"></div>
+ <div class="cover" style="margin-left: 100px; width: 100px"></div>
+</div>
+
+<div class="contain">
+ <div class="test" id="xy"></div>
+ <div class="cover"></div>
+</div>
diff --git a/layout/reftests/border-radius/table-collapse-1-ref.html b/layout/reftests/border-radius/table-collapse-1-ref.html
new file mode 100644
index 0000000000..9fefb6f8cd
--- /dev/null
+++ b/layout/reftests/border-radius/table-collapse-1-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html><head>
+<title>Table border collapse</title>
+<style>
+table {
+ border: 2px solid black;
+ border-collapse: collapse;
+}
+
+td {
+ border: 2px solid black;
+ width: 50px;
+ height: 50px;
+}
+
+</style>
+</head>
+<body>
+ <table>
+ <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+ <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+ <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+ </table>
+</body></html>
diff --git a/layout/reftests/border-radius/table-collapse-1.html b/layout/reftests/border-radius/table-collapse-1.html
new file mode 100644
index 0000000000..c7a99b7d73
--- /dev/null
+++ b/layout/reftests/border-radius/table-collapse-1.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html><head>
+<title>Table border collapse</title>
+<style>
+table {
+ border: 2px solid black;
+ border-collapse: collapse;
+}
+
+td {
+ border: 2px solid black;
+ width: 50px;
+ height: 50px;
+ border-radius: 4px;
+}
+
+</style>
+</head>
+<body>
+ <table>
+ <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+ <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+ <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+ </table>
+</body></html>
diff --git a/layout/reftests/border-radius/transforms-1-ref.html b/layout/reftests/border-radius/transforms-1-ref.html
new file mode 100644
index 0000000000..2aefee939f
--- /dev/null
+++ b/layout/reftests/border-radius/transforms-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<body style="background:white">
+<style>
+div {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ border-radius: 30px;
+ overflow: hidden;
+}
+
+span {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: black;
+}
+</style>
+<div><span></span></div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/transforms-1.html b/layout/reftests/border-radius/transforms-1.html
new file mode 100644
index 0000000000..5b64b3c293
--- /dev/null
+++ b/layout/reftests/border-radius/transforms-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<body style="background:white">
+<style>
+div {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ border-radius: 30px;
+ overflow: hidden;
+}
+
+span {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: black;
+ transform: scale(2);
+}
+</style>
+<div><span></span></div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/zero-radius-clip-1.html b/layout/reftests/border-radius/zero-radius-clip-1.html
new file mode 100644
index 0000000000..a1364cbd98
--- /dev/null
+++ b/layout/reftests/border-radius/zero-radius-clip-1.html
@@ -0,0 +1,7 @@
+<html>
+<body>
+<div style="background: blue; height: 100px; border-radius: 0 0 0 0; border-radius: 0 0 0 0;">
+ <div style="background: purple; height: 50px;"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-radius/zero-radius-clip-ref.html b/layout/reftests/border-radius/zero-radius-clip-ref.html
new file mode 100644
index 0000000000..26955c64ec
--- /dev/null
+++ b/layout/reftests/border-radius/zero-radius-clip-ref.html
@@ -0,0 +1,7 @@
+<html>
+<body>
+<div style="background: blue; height: 100px;">
+ <div style="background: purple; height: 50px;"></div>
+</div>
+</body>
+</html>