From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../border-radius/border-circle-2-ref.xhtml        | 11 +++
 layout/reftests/border-radius/border-circle-2.html | 20 +++++
 layout/reftests/border-radius/border-circle.html   | 11 +++
 layout/reftests/border-radius/border-ellips.html   | 11 +++
 .../border-radius/border-reduce-height-ref.html    | 19 +++++
 .../border-radius/border-reduce-height.html        | 19 +++++
 layout/reftests/border-radius/border-square.html   | 10 +++
 .../border-radius/border-value-interpret-ref.html  | 21 +++++
 .../border-radius/border-value-interpret.html      | 18 ++++
 layout/reftests/border-radius/clipping-1-ref.html  | 28 +++++++
 layout/reftests/border-radius/clipping-1.html      | 19 +++++
 layout/reftests/border-radius/clipping-2.html      | 30 +++++++
 layout/reftests/border-radius/clipping-3-ref.xhtml | 19 +++++
 layout/reftests/border-radius/clipping-3.html      | 27 ++++++
 .../reftests/border-radius/clipping-4-canvas.html  | 14 ++++
 .../reftests/border-radius/clipping-4-image.html   | 10 +++
 .../reftests/border-radius/clipping-4-notref.html  | 10 +++
 .../border-radius/clipping-4-overflow-hidden.html  | 16 ++++
 layout/reftests/border-radius/clipping-4-ref.html  | 11 +++
 .../reftests/border-radius/clipping-5-canvas.html  | 20 +++++
 .../reftests/border-radius/clipping-5-image.html   | 16 ++++
 .../border-radius/clipping-5-overflow-hidden.html  | 24 ++++++
 layout/reftests/border-radius/clipping-5-ref.html  | 17 ++++
 layout/reftests/border-radius/clipping-5-refc.html | 19 +++++
 layout/reftests/border-radius/clipping-5-refi.html | 15 ++++
 layout/reftests/border-radius/clipping-6-ref.html  | 15 ++++
 layout/reftests/border-radius/clipping-6.html      | 13 +++
 layout/reftests/border-radius/clipping-7-ref.html  | 13 +++
 layout/reftests/border-radius/clipping-7.html      | 13 +++
 .../border-radius/clipping-and-zindex-1-ref.html   | 18 ++++
 .../border-radius/clipping-and-zindex-1.html       | 19 +++++
 .../border-radius/clipping-preserve-3d-ref.html    | 11 +++
 .../border-radius/clipping-preserve-3d.html        | 11 +++
 .../reftests/border-radius/color-layer-1-ref.html  | 10 +++
 layout/reftests/border-radius/color-layer-1a.html  |  8 ++
 layout/reftests/border-radius/corner-1-ref.svg     | 13 +++
 layout/reftests/border-radius/corner-1.html        | 18 ++++
 layout/reftests/border-radius/corner-2-ref.svg     | 12 +++
 layout/reftests/border-radius/corner-2.html        | 18 ++++
 layout/reftests/border-radius/corner-3-ref.svg     |  5 ++
 layout/reftests/border-radius/corner-3.html        | 22 +++++
 layout/reftests/border-radius/corner-4-ref.svg     |  5 ++
 layout/reftests/border-radius/corner-4.html        | 22 +++++
 .../border-radius/corner-joins-1-ref.xhtml         | 89 ++++++++++++++++++++
 layout/reftests/border-radius/corner-joins-1.xhtml | 78 ++++++++++++++++++
 .../border-radius/corner-joins-2-ref.xhtml         | 36 ++++++++
 layout/reftests/border-radius/corner-joins-2.xhtml | 42 ++++++++++
 layout/reftests/border-radius/corner-split-ref.svg | 20 +++++
 layout/reftests/border-radius/corner-split.html    | 32 ++++++++
 .../curved-border-background-nogap-ref.html        |  9 ++
 .../curved-border-background-nogap.html            | 36 ++++++++
 .../border-radius/curved-borders-all-styles.html   | 29 +++++++
 .../border-radius/curved-stripe-border-ref.svg     | 26 ++++++
 .../border-radius/curved-stripe-border.html        | 17 ++++
 layout/reftests/border-radius/iframe-1-ref.html    |  7 ++
 layout/reftests/border-radius/iframe-1.html        |  7 ++
 layout/reftests/border-radius/inherit-1-ref.html   | 25 ++++++
 layout/reftests/border-radius/inherit-1.html       | 24 ++++++
 .../intersecting-clipping-1-canvas.html            | 20 +++++
 .../intersecting-clipping-1-image.html             | 16 ++++
 .../intersecting-clipping-1-overflow-hidden.html   | 18 ++++
 .../border-radius/intersecting-clipping-1-ref.html | 53 ++++++++++++
 .../intersecting-clipping-1-refc.html              | 55 +++++++++++++
 .../intersecting-clipping-1-refi.html              | 51 ++++++++++++
 .../reftests/border-radius/invalidate-1-ref.html   |  7 ++
 layout/reftests/border-radius/invalidate-1a.html   | 15 ++++
 layout/reftests/border-radius/invalidate-1b.html   | 15 ++++
 layout/reftests/border-radius/outline-circle.html  | 11 +++
 layout/reftests/border-radius/outline-ellips.html  | 11 +++
 layout/reftests/border-radius/outline-square.html  | 10 +++
 layout/reftests/border-radius/percent-1-ref.html   | 55 +++++++++++++
 layout/reftests/border-radius/percent-1.html       | 37 +++++++++
 layout/reftests/border-radius/percent-2-ref.html   | 55 +++++++++++++
 layout/reftests/border-radius/percent-2.html       | 37 +++++++++
 layout/reftests/border-radius/percent-3-ref.html   | 55 +++++++++++++
 layout/reftests/border-radius/percent-3.html       | 37 +++++++++
 layout/reftests/border-radius/reftest.list         | 96 ++++++++++++++++++++++
 layout/reftests/border-radius/scroll-1-ref.html    |  8 ++
 layout/reftests/border-radius/scroll-1.html        | 23 ++++++
 .../border-radius/scrollbar-clamping-1-ref.html    | 47 +++++++++++
 .../border-radius/scrollbar-clamping-1.html        | 45 ++++++++++
 .../border-radius/scrollbar-clamping-2-ref.html    | 34 ++++++++
 .../border-radius/scrollbar-clamping-2.html        | 46 +++++++++++
 .../border-radius/table-collapse-1-ref.html        | 24 ++++++
 .../reftests/border-radius/table-collapse-1.html   | 25 ++++++
 .../reftests/border-radius/transforms-1-ref.html   | 24 ++++++
 layout/reftests/border-radius/transforms-1.html    | 25 ++++++
 .../reftests/border-radius/zero-radius-clip-1.html |  7 ++
 .../border-radius/zero-radius-clip-ref.html        |  7 ++
 89 files changed, 2127 insertions(+)
 create mode 100644 layout/reftests/border-radius/border-circle-2-ref.xhtml
 create mode 100644 layout/reftests/border-radius/border-circle-2.html
 create mode 100644 layout/reftests/border-radius/border-circle.html
 create mode 100644 layout/reftests/border-radius/border-ellips.html
 create mode 100644 layout/reftests/border-radius/border-reduce-height-ref.html
 create mode 100644 layout/reftests/border-radius/border-reduce-height.html
 create mode 100644 layout/reftests/border-radius/border-square.html
 create mode 100644 layout/reftests/border-radius/border-value-interpret-ref.html
 create mode 100644 layout/reftests/border-radius/border-value-interpret.html
 create mode 100644 layout/reftests/border-radius/clipping-1-ref.html
 create mode 100644 layout/reftests/border-radius/clipping-1.html
 create mode 100644 layout/reftests/border-radius/clipping-2.html
 create mode 100644 layout/reftests/border-radius/clipping-3-ref.xhtml
 create mode 100644 layout/reftests/border-radius/clipping-3.html
 create mode 100644 layout/reftests/border-radius/clipping-4-canvas.html
 create mode 100644 layout/reftests/border-radius/clipping-4-image.html
 create mode 100644 layout/reftests/border-radius/clipping-4-notref.html
 create mode 100644 layout/reftests/border-radius/clipping-4-overflow-hidden.html
 create mode 100644 layout/reftests/border-radius/clipping-4-ref.html
 create mode 100644 layout/reftests/border-radius/clipping-5-canvas.html
 create mode 100644 layout/reftests/border-radius/clipping-5-image.html
 create mode 100644 layout/reftests/border-radius/clipping-5-overflow-hidden.html
 create mode 100644 layout/reftests/border-radius/clipping-5-ref.html
 create mode 100644 layout/reftests/border-radius/clipping-5-refc.html
 create mode 100644 layout/reftests/border-radius/clipping-5-refi.html
 create mode 100644 layout/reftests/border-radius/clipping-6-ref.html
 create mode 100644 layout/reftests/border-radius/clipping-6.html
 create mode 100644 layout/reftests/border-radius/clipping-7-ref.html
 create mode 100644 layout/reftests/border-radius/clipping-7.html
 create mode 100644 layout/reftests/border-radius/clipping-and-zindex-1-ref.html
 create mode 100644 layout/reftests/border-radius/clipping-and-zindex-1.html
 create mode 100644 layout/reftests/border-radius/clipping-preserve-3d-ref.html
 create mode 100644 layout/reftests/border-radius/clipping-preserve-3d.html
 create mode 100644 layout/reftests/border-radius/color-layer-1-ref.html
 create mode 100644 layout/reftests/border-radius/color-layer-1a.html
 create mode 100644 layout/reftests/border-radius/corner-1-ref.svg
 create mode 100644 layout/reftests/border-radius/corner-1.html
 create mode 100644 layout/reftests/border-radius/corner-2-ref.svg
 create mode 100644 layout/reftests/border-radius/corner-2.html
 create mode 100644 layout/reftests/border-radius/corner-3-ref.svg
 create mode 100644 layout/reftests/border-radius/corner-3.html
 create mode 100644 layout/reftests/border-radius/corner-4-ref.svg
 create mode 100644 layout/reftests/border-radius/corner-4.html
 create mode 100644 layout/reftests/border-radius/corner-joins-1-ref.xhtml
 create mode 100644 layout/reftests/border-radius/corner-joins-1.xhtml
 create mode 100644 layout/reftests/border-radius/corner-joins-2-ref.xhtml
 create mode 100644 layout/reftests/border-radius/corner-joins-2.xhtml
 create mode 100644 layout/reftests/border-radius/corner-split-ref.svg
 create mode 100644 layout/reftests/border-radius/corner-split.html
 create mode 100644 layout/reftests/border-radius/curved-border-background-nogap-ref.html
 create mode 100644 layout/reftests/border-radius/curved-border-background-nogap.html
 create mode 100644 layout/reftests/border-radius/curved-borders-all-styles.html
 create mode 100644 layout/reftests/border-radius/curved-stripe-border-ref.svg
 create mode 100644 layout/reftests/border-radius/curved-stripe-border.html
 create mode 100644 layout/reftests/border-radius/iframe-1-ref.html
 create mode 100644 layout/reftests/border-radius/iframe-1.html
 create mode 100644 layout/reftests/border-radius/inherit-1-ref.html
 create mode 100644 layout/reftests/border-radius/inherit-1.html
 create mode 100644 layout/reftests/border-radius/intersecting-clipping-1-canvas.html
 create mode 100644 layout/reftests/border-radius/intersecting-clipping-1-image.html
 create mode 100644 layout/reftests/border-radius/intersecting-clipping-1-overflow-hidden.html
 create mode 100644 layout/reftests/border-radius/intersecting-clipping-1-ref.html
 create mode 100644 layout/reftests/border-radius/intersecting-clipping-1-refc.html
 create mode 100644 layout/reftests/border-radius/intersecting-clipping-1-refi.html
 create mode 100644 layout/reftests/border-radius/invalidate-1-ref.html
 create mode 100644 layout/reftests/border-radius/invalidate-1a.html
 create mode 100644 layout/reftests/border-radius/invalidate-1b.html
 create mode 100644 layout/reftests/border-radius/outline-circle.html
 create mode 100644 layout/reftests/border-radius/outline-ellips.html
 create mode 100644 layout/reftests/border-radius/outline-square.html
 create mode 100644 layout/reftests/border-radius/percent-1-ref.html
 create mode 100644 layout/reftests/border-radius/percent-1.html
 create mode 100644 layout/reftests/border-radius/percent-2-ref.html
 create mode 100644 layout/reftests/border-radius/percent-2.html
 create mode 100644 layout/reftests/border-radius/percent-3-ref.html
 create mode 100644 layout/reftests/border-radius/percent-3.html
 create mode 100644 layout/reftests/border-radius/reftest.list
 create mode 100644 layout/reftests/border-radius/scroll-1-ref.html
 create mode 100644 layout/reftests/border-radius/scroll-1.html
 create mode 100644 layout/reftests/border-radius/scrollbar-clamping-1-ref.html
 create mode 100644 layout/reftests/border-radius/scrollbar-clamping-1.html
 create mode 100644 layout/reftests/border-radius/scrollbar-clamping-2-ref.html
 create mode 100644 layout/reftests/border-radius/scrollbar-clamping-2.html
 create mode 100644 layout/reftests/border-radius/table-collapse-1-ref.html
 create mode 100644 layout/reftests/border-radius/table-collapse-1.html
 create mode 100644 layout/reftests/border-radius/transforms-1-ref.html
 create mode 100644 layout/reftests/border-radius/transforms-1.html
 create mode 100644 layout/reftests/border-radius/zero-radius-clip-1.html
 create mode 100644 layout/reftests/border-radius/zero-radius-clip-ref.html

(limited to 'layout/reftests/border-radius')

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