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/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-stylo.list117
-rw-r--r--layout/reftests/border-radius/reftest.list94
-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
88 files changed, 2220 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 000000000..b589b4d04
--- /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 000000000..6ad0321ab
--- /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 000000000..02fbebe7a
--- /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 000000000..94c53fafa
--- /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 000000000..0c28216da
--- /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 000000000..db0310a6b
--- /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 000000000..4e16637bb
--- /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 000000000..c9a42716b
--- /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 000000000..16ee01c97
--- /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 000000000..f02eee730
--- /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 000000000..979af7881
--- /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 000000000..b0630a7fb
--- /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 000000000..9cab93dbd
--- /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 000000000..af52adb30
--- /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 000000000..c7836b837
--- /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 000000000..8fedba722
--- /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 000000000..816856f3e
--- /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 000000000..734fdef20
--- /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 000000000..ebe86707f
--- /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 000000000..62c05ccf4
--- /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 000000000..8399d0894
--- /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 000000000..e81668ff7
--- /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 000000000..bcac4ef84
--- /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 000000000..56b130b9c
--- /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 000000000..2e3036dd5
--- /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 000000000..7644fe21f
--- /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 000000000..3447a17e9
--- /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 000000000..1d83e5baa
--- /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 000000000..f435d2c41
--- /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 000000000..f1155db7f
--- /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 000000000..f565d7a82
--- /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/color-layer-1-ref.html b/layout/reftests/border-radius/color-layer-1-ref.html
new file mode 100644
index 000000000..118077040
--- /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 000000000..ff600cb66
--- /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 000000000..d3e0586f8
--- /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 000000000..a606b38f8
--- /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 000000000..3232472eb
--- /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 000000000..cd860e843
--- /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 000000000..210cc7637
--- /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 000000000..ee4dd7311
--- /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 000000000..939ccc04a
--- /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 000000000..a51c24f9c
--- /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 000000000..1b0ba24a6
--- /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 000000000..f7a9b8ecd
--- /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 000000000..de765cd10
--- /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 000000000..fcc0399c3
--- /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 000000000..742fc03ba
--- /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 000000000..59d26aa1e
--- /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 000000000..67aead2bc
--- /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 000000000..01207e7f0
--- /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 000000000..e816483e2
--- /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 000000000..726094142
--- /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 000000000..1f962765d
--- /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 000000000..360c443f0
--- /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 000000000..b3fc86792
--- /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 000000000..c77e814ff
--- /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 000000000..012e14799
--- /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 000000000..020b1e4ce
--- /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 000000000..ba533d109
--- /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 000000000..38e2e3f48
--- /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 000000000..0e4061a3f
--- /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 000000000..7208a8c67
--- /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 000000000..c21a14725
--- /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 000000000..951f549d0
--- /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 000000000..d9782c1fc
--- /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, false);
+</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 000000000..5a5ba39e5
--- /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, false);
+</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 000000000..4cdb4835e
--- /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;
+ -moz-outline-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 000000000..a41a98064
--- /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;
+ -moz-outline-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 000000000..e95610cf2
--- /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 000000000..8bfd633b2
--- /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 000000000..395a070ca
--- /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 000000000..2680427ac
--- /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 000000000..98fdb10be
--- /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 000000000..83abf9c4d
--- /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 000000000..bb3103554
--- /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-stylo.list b/layout/reftests/border-radius/reftest-stylo.list
new file mode 100644
index 000000000..f19a311ef
--- /dev/null
+++ b/layout/reftests/border-radius/reftest-stylo.list
@@ -0,0 +1,117 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# really basic tests that square, circular, and elliptical border and
+# outline radius are not the same thing
+== border-square.html border-square.html
+== border-circle.html border-circle.html
+== border-ellips.html border-ellips.html
+== border-square.html border-square.html
+== border-square.html border-square.html
+== border-circle.html border-circle.html
+
+== outline-square.html outline-square.html
+== outline-circle.html outline-circle.html
+== outline-ellips.html outline-ellips.html
+== outline-square.html outline-square.html
+== outline-square.html outline-square.html
+== outline-circle.html outline-circle.html
+== border-value-interpret.html border-value-interpret.html
+== curved-borders-all-styles.html curved-borders-all-styles.html
+# no way to generate reference for dotted/dashed/inset/outset
+# ridge/groove borders
+
+# percent units
+== percent-1.html percent-1.html
+fuzzy-if(skiaContent,1,342) == percent-2.html percent-2.html
+fuzzy-if(skiaContent,1,343) == percent-3.html percent-3.html
+
+# more serious tests, using SVG reference
+== border-circle-2.html border-circle-2.html
+fuzzy-if(gtkWidget,14,280) fuzzy-if(cocoaWidget,4,582) fuzzy-if(Android||B2G,36,264) fuzzy-if(d2d,51,323) fuzzy-if(winWidget&&!d2d,16,377) fuzzy-if(skiaContent,52,377) == curved-stripe-border.html curved-stripe-border.html
+# bug 459945
+
+# Corners
+== corner-1.html corner-1.html
+# bottom corners different radius than top corners
+skip fuzzy-if(gtkWidget,23,5) fuzzy-if(winWidget&&!d2d,23,5) fuzzy-if(d2d,32,8) fuzzy-if(Android||B2G,10,8) == corner-2.html corner-2.html
+# right corners different radius than left corners; see bug 500804
+fuzzy-if(gtkWidget,3,10) fuzzy-if(winWidget&&!d2d,3,10) fuzzy-if(d2d,15,32) fuzzy-if(Android||B2G,3,15) fuzzy-if(skiaContent,3,100) == corner-3.html corner-3.html
+fails fuzzy-if(skiaContent,1,2728) == corner-4.html corner-4.html
+
+# Test that radii too long are reduced
+== border-reduce-height.html border-reduce-height.html
+
+# Tests for border clipping
+== clipping-1.html clipping-1.html
+# background color should completely fill box; bug 466572
+== clipping-2.html clipping-2.html
+# background color clipped to inner/outer border, can't get
+# great tests for this due to antialiasing problems described in bug 466572
+fuzzy-if(skiaContent,1,13) == clipping-3.html clipping-3.html
+# 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-ref.html
+fuzzy-if(true,1,20) fuzzy-if(d2d,64,196) fuzzy-if(cocoaWidget,1,180) fuzzy-if(Android,140,237) == clipping-4-canvas.html clipping-4-canvas.html
+# bug 732535
+fuzzy-if(Android,5,54) fuzzy-if(/^Windows\x20NT\x206\.2/.test(http.oscpu),1,10) == clipping-4-image.html clipping-4-image.html
+fuzzy-if(/^Windows\x20NT\x206\.2/.test(http.oscpu),1,10) fuzzy-if(skiaContent,1,77) == clipping-4-overflow-hidden.html clipping-4-overflow-hidden.html
+== clipping-5-canvas.html clipping-5-canvas.html
+fuzzy-if(/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) == clipping-5-image.html clipping-5-image.html
+fuzzy-if(/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) fuzzy-if(skiaContent,1,77) == clipping-5-overflow-hidden.html clipping-5-overflow-hidden.html
+fuzzy-if(/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) fuzzy-if(Android,5,21) fuzzy-if(skiaContent,1,77) == clipping-5-refi.html clipping-5-refi.html
+fuzzy-if(true,1,7) fuzzy-if(d2d,48,94) fuzzy-if(cocoaWidget,1,99) fuzzy-if(Android,99,115) fuzzy-if(skiaContent,1,77) == clipping-5-refc.html clipping-5-refc.html
+# bug 732535
+fuzzy-if(winWidget,105,71) fuzzy-if(Android,8,469) == clipping-6.html clipping-6.html
+# PaintedLayer and MaskLayer with transforms that aren't identical
+fuzzy-if(true,2,29) fuzzy-if(d2d,46,50) fuzzy-if(Android,255,586) fuzzy-if(skiaContent,16,27) == clipping-7.html clipping-7.html
+# ColorLayer and MaskLayer with transforms that aren't identical. Reference image rendered without using layers (which causes fuzzy failures).
+fuzzy-if(/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) == clipping-and-zindex-1.html clipping-and-zindex-1.html
+fuzzy-if(cocoaWidget,1,4) == intersecting-clipping-1-canvas.html intersecting-clipping-1-canvas.html
+== intersecting-clipping-1-image.html intersecting-clipping-1-image.html
+== intersecting-clipping-1-overflow-hidden.html intersecting-clipping-1-overflow-hidden.html
+fuzzy-if(Android,5,105) fuzzy-if(d2d,1,20) fuzzy-if(skiaContent,1,135) == intersecting-clipping-1-refi.html intersecting-clipping-1-refi.html
+fuzzy-if(true,1,33) fuzzy-if(d2d,48,350) fuzzy-if(cocoaWidget,1,332) fuzzy-if(Android,124,440) fuzzy-if(skiaContent,1,135) == intersecting-clipping-1-refc.html intersecting-clipping-1-refc.html
+# bug 732535
+
+# Inheritance
+== inherit-1.html inherit-1.html
+# border-radius shouldn't inherit
+
+# Table elements
+== table-collapse-1.html table-collapse-1.html
+# border-radius is ignored on internal table elements
+# when border-collapse: collapse
+
+fails fuzzy-if(azureQuartz,1,3) skip-if(B2G||Mulet) fuzzy-if(skiaContent,1,116) == invalidate-1a.html invalidate-1a.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails fuzzy-if(azureQuartz,1,3) skip-if(B2G||Mulet) fuzzy-if(skiaContent,1,117) == invalidate-1b.html invalidate-1b.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# test that border-radius is reduced for scrollbars
+skip-if(B2G||Mulet) fails-if(Android) fuzzy-if(asyncPan&&!layersGPUAccelerated,12,12) fuzzy-if(browserIsRemote&&layersGPUAccelerated&&/^Windows\x20NT\x206\.1/.test(http.oscpu),12,12) fuzzy-if(skiaContent,1,50) == scrollbar-clamping-1.html scrollbar-clamping-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) fails-if(Android) == scrollbar-clamping-2.html scrollbar-clamping-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# Test for bad corner joins.
+fails fuzzy-if(true,1,1) == corner-joins-1.xhtml corner-joins-1.xhtml
+fails skip-if(B2G||Mulet) random-if(winWidget) fuzzy-if(skiaContent,255,610) HTTP(..) == corner-joins-2.xhtml corner-joins-2.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+skip-if(B2G||Mulet) fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||/^Windows\x20NT\x206\.2/.test(http.oscpu),1,20) fuzzy-if(d2d,64,157) fuzzy-if(Android,166,400) fuzzy-if(skiaContent,64,70) == scroll-1.html scroll-1.html
+# see bug 732535 #Bug 959166
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+== transforms-1.html transforms-1.html
+
+== zero-radius-clip-1.html zero-radius-clip-1.html
+
+== iframe-1.html iframe-1.html
+
+# Test for antialiasing gaps between background and border
+fuzzy-if(gtkWidget,1,9) fuzzy-if(winWidget&&!d2d,1,9) fuzzy-if(d2d,5,40) fuzzy-if(Android||B2G||skiaContent,1,9) == curved-border-background-nogap.html curved-border-background-nogap.html
+
+== color-layer-1a.html color-layer-1a.html
+
+== corner-split.html corner-split.html
+# bug 1185636
diff --git a/layout/reftests/border-radius/reftest.list b/layout/reftests/border-radius/reftest.list
new file mode 100644
index 000000000..e199a4aea
--- /dev/null
+++ b/layout/reftests/border-radius/reftest.list
@@ -0,0 +1,94 @@
+# 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-if(skiaContent,1,342) == percent-2.html percent-2-ref.html
+fuzzy-if(skiaContent,1,343) == percent-3.html percent-3-ref.html
+
+# more serious tests, using SVG reference
+== border-circle-2.html border-circle-2-ref.xhtml
+fuzzy-if(gtkWidget,14,280) fuzzy-if(cocoaWidget,4,582) fuzzy-if(Android,36,264) fuzzy-if(d2d,51,323) fuzzy-if(winWidget&&!d2d,16,377) fuzzy-if(skiaContent,52,377) == curved-stripe-border.html curved-stripe-border-ref.svg # bug 459945
+
+# Corners
+== corner-1.html corner-1-ref.svg # bottom corners different radius than top corners
+fuzzy-if(gtkWidget,23,5) fuzzy-if(winWidget&&!d2d,23,5) fuzzy-if(d2d,32,8) fuzzy-if(Android,10,8) == corner-2.html corner-2-ref.svg # right corners different radius than left corners; see bug 500804
+fuzzy-if(gtkWidget,3,10) fuzzy-if(winWidget&&!d2d,3,10) fuzzy-if(d2d,15,32) fuzzy-if(Android,3,15) fuzzy-if(skiaContent,3,100) == corner-3.html corner-3-ref.svg
+fuzzy-if(skiaContent,1,2728) == 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-if(skiaContent,1,13) == 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
+fuzzy-if(true,1,20) fuzzy-if(d2d,64,196) fuzzy-if(cocoaWidget,1,180) fuzzy-if(Android,140,237) == clipping-4-canvas.html clipping-4-ref.html # bug 732535
+fuzzy-if(Android,5,54) fuzzy-if(/^Windows\x20NT\x206\.2/.test(http.oscpu),1,10) fuzzy-if(skiaContent,1,140) == clipping-4-image.html clipping-4-ref.html
+fuzzy-if(/^Windows\x20NT\x206\.2/.test(http.oscpu),1,10) fuzzy-if(skiaContent,1,77) == clipping-4-overflow-hidden.html clipping-4-ref.html
+== clipping-5-canvas.html clipping-5-refc.html
+fuzzy-if(/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) == clipping-5-image.html clipping-5-refi.html
+fuzzy-if(/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) fuzzy-if(skiaContent,1,77) == clipping-5-overflow-hidden.html clipping-5-ref.html
+fuzzy-if(/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) fuzzy-if(Android,5,21) fuzzy-if(skiaContent,1,77) == clipping-5-refi.html clipping-5-ref.html
+fuzzy-if(true,1,7) fuzzy-if(d2d,48,94) fuzzy-if(cocoaWidget,1,99) fuzzy-if(Android,99,115) fuzzy-if(skiaContent,1,77) == clipping-5-refc.html clipping-5-ref.html # bug 732535
+fuzzy-if(winWidget,105,71) fuzzy-if(Android,8,469) == clipping-6.html clipping-6-ref.html # PaintedLayer and MaskLayer with transforms that aren't identical
+fuzzy-if(true,2,29) fuzzy-if(d2d,46,50) fuzzy-if(Android,255,586) fuzzy-if(skiaContent,19,29) == 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).
+fuzzy-if(/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) == clipping-and-zindex-1.html clipping-and-zindex-1-ref.html
+fuzzy-if(cocoaWidget,1,4) == 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-if(Android,5,105) fuzzy-if(d2d,1,20) fuzzy-if(skiaContent,1,250) == intersecting-clipping-1-refi.html intersecting-clipping-1-ref.html
+fuzzy-if(true,1,33) fuzzy-if(d2d,48,350) fuzzy-if(cocoaWidget,1,332) fuzzy-if(Android,124,440) fuzzy-if(skiaContent,1,135) == intersecting-clipping-1-refc.html intersecting-clipping-1-ref.html # bug 732535
+
+# 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-if(azureQuartz,1,3) fuzzy-if(skiaContent,1,116) == invalidate-1a.html invalidate-1-ref.html
+fuzzy-if(azureQuartz,1,3) fuzzy-if(skiaContent,1,117) == invalidate-1b.html invalidate-1-ref.html
+
+# test that border-radius is reduced for scrollbars
+fails-if(Android) fuzzy-if(asyncPan&&!layersGPUAccelerated,12,12) fuzzy-if(browserIsRemote&&layersGPUAccelerated&&/^Windows\x20NT\x206\.1/.test(http.oscpu),12,12) fuzzy-if(skiaContent&&!Android,1,50) fuzzy-if(gtkWidget&&layersGPUAccelerated,12,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-if(true,1,1) == corner-joins-1.xhtml corner-joins-1-ref.xhtml
+fuzzy(255,20) random-if(winWidget) fuzzy-if(skiaContent,255,610) HTTP(..) == corner-joins-2.xhtml corner-joins-2-ref.xhtml
+
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||/^Windows\x20NT\x206\.2/.test(http.oscpu),1,20) fuzzy-if(d2d,64,157) fuzzy-if(Android,166,400) fuzzy-if(skiaContent,64,70) == scroll-1.html scroll-1-ref.html # see bug 732535 #Bug 959166
+
+== transforms-1.html transforms-1-ref.html
+
+== 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-if(gtkWidget,1,9) fuzzy-if(winWidget&&!d2d,1,9) fuzzy-if(d2d,5,40) fuzzy-if(Android||skiaContent,1,9) == curved-border-background-nogap.html curved-border-background-nogap-ref.html
+
+== color-layer-1a.html color-layer-1-ref.html
+
+== corner-split.html corner-split-ref.svg # bug 1185636
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 000000000..f290648d0
--- /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 000000000..30fd7fd8f
--- /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 000000000..39d803754
--- /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 000000000..5d4f3f8cb
--- /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 000000000..de8015e4e
--- /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 000000000..177e10200
--- /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 000000000..9fefb6f8c
--- /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 000000000..c7a99b7d7
--- /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 000000000..2aefee939
--- /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 000000000..5b64b3c29
--- /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 000000000..a1364cbd9
--- /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 000000000..26955c64e
--- /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>