summaryrefslogtreecommitdiffstats
path: root/layout/reftests/box-shadow
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/box-shadow')
-rw-r--r--layout/reftests/box-shadow/1178575-2-ref.html29
-rw-r--r--layout/reftests/box-shadow/1178575-2.html35
-rw-r--r--layout/reftests/box-shadow/1178575-ref.html22
-rw-r--r--layout/reftests/box-shadow/1178575.html28
-rw-r--r--layout/reftests/box-shadow/1212823-1-ref.html7
-rw-r--r--layout/reftests/box-shadow/1212823-1.html6
-rw-r--r--layout/reftests/box-shadow/1212823-2-ref.html6
-rw-r--r--layout/reftests/box-shadow/1212823-2.html2
-rw-r--r--layout/reftests/box-shadow/611574-1-ref.html62
-rw-r--r--layout/reftests/box-shadow/611574-1.html62
-rw-r--r--layout/reftests/box-shadow/611574-2-ref.html65
-rw-r--r--layout/reftests/box-shadow/611574-2.html67
-rw-r--r--layout/reftests/box-shadow/boxshadow-basic-ref.html28
-rw-r--r--layout/reftests/box-shadow/boxshadow-basic.html17
-rw-r--r--layout/reftests/box-shadow/boxshadow-blur-2-notref.html11
-rw-r--r--layout/reftests/box-shadow/boxshadow-blur-2-ref.html11
-rw-r--r--layout/reftests/box-shadow/boxshadow-blur-2.html10
-rw-r--r--layout/reftests/box-shadow/boxshadow-blur-notref.html17
-rw-r--r--layout/reftests/box-shadow/boxshadow-blur-notref2.html16
-rw-r--r--layout/reftests/box-shadow/boxshadow-blur.html17
-rw-r--r--layout/reftests/box-shadow/boxshadow-border-radius-int-ref.html31
-rw-r--r--layout/reftests/box-shadow/boxshadow-border-radius-int.html32
-rw-r--r--layout/reftests/box-shadow/boxshadow-button-ref.html24
-rw-r--r--layout/reftests/box-shadow/boxshadow-button.html24
-rw-r--r--layout/reftests/box-shadow/boxshadow-color-rounding-middle-ref.html23
-rw-r--r--layout/reftests/box-shadow/boxshadow-color-rounding-middle.html11
-rw-r--r--layout/reftests/box-shadow/boxshadow-color-rounding-ref.html10
-rw-r--r--layout/reftests/box-shadow/boxshadow-color-rounding.html11
-rw-r--r--layout/reftests/box-shadow/boxshadow-dynamic-ref.xhtml7
-rw-r--r--layout/reftests/box-shadow/boxshadow-dynamic.xhtml33
-rw-r--r--layout/reftests/box-shadow/boxshadow-fileupload-ref.html31
-rw-r--r--layout/reftests/box-shadow/boxshadow-fileupload.html22
-rw-r--r--layout/reftests/box-shadow/boxshadow-inner-basic-ref.svg41
-rw-r--r--layout/reftests/box-shadow/boxshadow-inner-basic.html8
-rw-r--r--layout/reftests/box-shadow/boxshadow-inset-large-border-radius-ref.html17
-rw-r--r--layout/reftests/box-shadow/boxshadow-inset-large-border-radius.html35
-rw-r--r--layout/reftests/box-shadow/boxshadow-inset-large-offset-ref.html23
-rw-r--r--layout/reftests/box-shadow/boxshadow-inset-large-offset.html26
-rw-r--r--layout/reftests/box-shadow/boxshadow-inset-neg-spread.html17
-rw-r--r--layout/reftests/box-shadow/boxshadow-inset-neg-spread2-ref.html16
-rw-r--r--layout/reftests/box-shadow/boxshadow-inset-neg-spread2.html20
-rw-r--r--layout/reftests/box-shadow/boxshadow-large-border-radius-ref.html37
-rw-r--r--layout/reftests/box-shadow/boxshadow-large-border-radius.html37
-rw-r--r--layout/reftests/box-shadow/boxshadow-large-offset-ref.html50
-rw-r--r--layout/reftests/box-shadow/boxshadow-large-offset.html49
-rw-r--r--layout/reftests/box-shadow/boxshadow-mixed-2-ref.html26
-rw-r--r--layout/reftests/box-shadow/boxshadow-mixed-2.html13
-rw-r--r--layout/reftests/box-shadow/boxshadow-mixed-ref.html1
-rw-r--r--layout/reftests/box-shadow/boxshadow-mixed.html1
-rw-r--r--layout/reftests/box-shadow/boxshadow-multiple-ref.html48
-rw-r--r--layout/reftests/box-shadow/boxshadow-multiple.html17
-rw-r--r--layout/reftests/box-shadow/boxshadow-onecorner-ref.html3
-rw-r--r--layout/reftests/box-shadow/boxshadow-onecorner.html2
-rw-r--r--layout/reftests/box-shadow/boxshadow-opacity-ref.html18
-rw-r--r--layout/reftests/box-shadow/boxshadow-opacity.html17
-rw-r--r--layout/reftests/box-shadow/boxshadow-rotated-ref.html15
-rw-r--r--layout/reftests/box-shadow/boxshadow-rotated.html16
-rw-r--r--layout/reftests/box-shadow/boxshadow-rounded-spread-ref.html1
-rw-r--r--layout/reftests/box-shadow/boxshadow-rounded-spread.html1
-rw-r--r--layout/reftests/box-shadow/boxshadow-rounding-ref.html1
-rw-r--r--layout/reftests/box-shadow/boxshadow-rounding.html1
-rw-r--r--layout/reftests/box-shadow/boxshadow-skiprect-ref.html24
-rw-r--r--layout/reftests/box-shadow/boxshadow-skiprect.html14
-rw-r--r--layout/reftests/box-shadow/boxshadow-spread-ref.html28
-rw-r--r--layout/reftests/box-shadow/boxshadow-spread.html17
-rw-r--r--layout/reftests/box-shadow/boxshadow-threecorners-ref.html3
-rw-r--r--layout/reftests/box-shadow/boxshadow-threecorners.html2
-rw-r--r--layout/reftests/box-shadow/boxshadow-twocorners-ref.html3
-rw-r--r--layout/reftests/box-shadow/boxshadow-twocorners.html2
-rw-r--r--layout/reftests/box-shadow/fieldset-inset-ref.html95
-rw-r--r--layout/reftests/box-shadow/fieldset-inset.html90
-rw-r--r--layout/reftests/box-shadow/fieldset-ref.html95
-rw-r--r--layout/reftests/box-shadow/fieldset.html90
-rw-r--r--layout/reftests/box-shadow/overflow-not-scrollable-1-ref.html18
-rw-r--r--layout/reftests/box-shadow/overflow-not-scrollable-1-ref2.html17
-rw-r--r--layout/reftests/box-shadow/overflow-not-scrollable-1.html18
-rw-r--r--layout/reftests/box-shadow/overflow-not-scrollable-2-ref.html19
-rw-r--r--layout/reftests/box-shadow/overflow-not-scrollable-2.html19
-rw-r--r--layout/reftests/box-shadow/reftest.list49
-rw-r--r--layout/reftests/box-shadow/tableboxshadow-basic-ref.html1
-rw-r--r--layout/reftests/box-shadow/tableboxshadow-basic.html1
-rw-r--r--layout/reftests/box-shadow/tableboxshadow-tdshadow-ref.html5
-rw-r--r--layout/reftests/box-shadow/tableboxshadow-tdshadow.html1
-rw-r--r--layout/reftests/box-shadow/tableboxshadow-trshadow-ref.html5
-rw-r--r--layout/reftests/box-shadow/tableboxshadow-trshadow.html1
85 files changed, 1951 insertions, 0 deletions
diff --git a/layout/reftests/box-shadow/1178575-2-ref.html b/layout/reftests/box-shadow/1178575-2-ref.html
new file mode 100644
index 0000000000..2e2b09a57c
--- /dev/null
+++ b/layout/reftests/box-shadow/1178575-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase #2 for bug 1178575</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:20px;
+ }
+
+ div {
+ position: absolute;
+ left: 0;
+ right: 0;
+ box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5);
+ margin-top: 10px;
+ height: 40px;
+ }
+
+ span {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ height: 100px;
+ }
+
+ </style>
+</head>
+<body><span><div></div><span></body></html>
diff --git a/layout/reftests/box-shadow/1178575-2.html b/layout/reftests/box-shadow/1178575-2.html
new file mode 100644
index 0000000000..7bcdadcb8e
--- /dev/null
+++ b/layout/reftests/box-shadow/1178575-2.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+ <meta charset="utf-8">
+ <title>Testcase #2 for bug 1178575</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:20px;
+ }
+
+ div {
+ position: absolute;
+ left: 0;
+ right: 0;
+ box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5);
+ margin-top: 10px;
+ }
+
+ span {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ height: 200px;
+ }
+
+ </style>
+<script>
+function tweak() {
+ document.querySelector('div').style.height = "40px";
+ document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", tweak);
+</script>
+</head>
+<body><span><div></div><span></body></html>
diff --git a/layout/reftests/box-shadow/1178575-ref.html b/layout/reftests/box-shadow/1178575-ref.html
new file mode 100644
index 0000000000..3a6442dddb
--- /dev/null
+++ b/layout/reftests/box-shadow/1178575-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1178575</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+ div {
+ position: absolute;
+ left: 0;
+ right: 0;
+ box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5);
+ margin-top: 10px;
+ height: 3em;
+ }
+
+ </style>
+</head>
+<body><div></div></body></html>
diff --git a/layout/reftests/box-shadow/1178575.html b/layout/reftests/box-shadow/1178575.html
new file mode 100644
index 0000000000..8b54c1c7e7
--- /dev/null
+++ b/layout/reftests/box-shadow/1178575.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1178575</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+ div {
+ position: absolute;
+ left: 0;
+ right: 0;
+ box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5);
+ margin-top: 10px;
+ }
+
+ </style>
+<script>
+function tweak() {
+ document.querySelector('div').style.height = "3em";
+ document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", tweak);
+</script>
+</head>
+<body><div></div></body></html>
diff --git a/layout/reftests/box-shadow/1212823-1-ref.html b/layout/reftests/box-shadow/1212823-1-ref.html
new file mode 100644
index 0000000000..91cf26d3cc
--- /dev/null
+++ b/layout/reftests/box-shadow/1212823-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="width:314px; height:16px; top:10px; position:absolute; left:200px; background-color:red; z-index:-1"></div>
+<input style="width:300px; height:10px;"></input>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/1212823-1.html b/layout/reftests/box-shadow/1212823-1.html
new file mode 100644
index 0000000000..2337ddf75f
--- /dev/null
+++ b/layout/reftests/box-shadow/1212823-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<input style="width:300px; height:10px; box-shadow: 200px 0px 0px 0px red;"></input>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/1212823-2-ref.html b/layout/reftests/box-shadow/1212823-2-ref.html
new file mode 100644
index 0000000000..531d868bca
--- /dev/null
+++ b/layout/reftests/box-shadow/1212823-2-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<!-- This relies on the precise widget etc values. Feel free to adjust this as
+ needed as long as the bug itself doesn't regress. font-size: 0 and
+ vertical-align: top avoids depending on font metrics -->
+<div style="width: 316px; height: 6px; position: absolute; left: 200px; border-radius: 2px; background-color: red; z-index:-1"></div>
+<input style="width: 300px; font-size: 0; vertical-align: top"></input>
diff --git a/layout/reftests/box-shadow/1212823-2.html b/layout/reftests/box-shadow/1212823-2.html
new file mode 100644
index 0000000000..2736787d5f
--- /dev/null
+++ b/layout/reftests/box-shadow/1212823-2.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<input style="width: 300px; box-shadow: 200px 0px 0px 0px red; font-size: 0; vertical-align: top"></input>
diff --git a/layout/reftests/box-shadow/611574-1-ref.html b/layout/reftests/box-shadow/611574-1-ref.html
new file mode 100644
index 0000000000..53fce85e47
--- /dev/null
+++ b/layout/reftests/box-shadow/611574-1-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html><head><style>
+button,span,fieldset { background-color: #0F0; break-inside:avoid; }
+body { font-size:12px; }
+</style></head>
+<body>
+<div style="column-count:3;height:600px;column-fill:auto">
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+
+<p><span>No Blur Radius</span>
+<p><span>No Blur Radius</span>
+<p><span style="box-sizing:border-box;">No Blur Radius</span>
+<p><span>No Blur Radius</span>
+<p><span>No Blur Radius</span>
+
+<p><span>2px Blur Radius</span>
+<p><span>2px Blur Radius</span>
+<p><span style="box-sizing:border-box;">2px Blur Radius</span>
+<p><span>2px Blur Radius</span>
+<p><span>2px Blur Radius</span>
+
+<p><fieldset>No Blur Radius</fieldset>
+<p><fieldset><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset>No Blur Radius</fieldset>
+<p><fieldset style="box-sizing:border-box;">No Blur Radius</fieldset>
+<p><fieldset>No Blur Radius</fieldset>
+<p><fieldset>No Blur Radius</fieldset>
+
+<p><fieldset>2px Blur Radius</fieldset>
+<p><fieldset><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset>2px Blur Radius</fieldset>
+<p><fieldset style="box-sizing:border-box;">2px Blur Radius</fieldset>
+<p><fieldset>2px Blur Radius</fieldset>
+<p><fieldset>2px Blur Radius</fieldset>
+
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;"><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-sizing:border-box;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;"><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-sizing:border-box;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/611574-1.html b/layout/reftests/box-shadow/611574-1.html
new file mode 100644
index 0000000000..b155f5a414
--- /dev/null
+++ b/layout/reftests/box-shadow/611574-1.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html><head><style>
+button,span,fieldset { background-color: #0F0; break-inside:avoid; }
+body { font-size:12px; }
+</style></head>
+<body>
+<div style="column-count:3;height:600px;column-fill:auto">
+<p><button style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</button>
+
+<p><button style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</button>
+
+<p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span>
+<p><span style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</span>
+<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span>
+<p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span>
+<p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span>
+
+<p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span>
+<p><span style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</span>
+<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span>
+<p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span>
+<p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span>
+
+<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>
+
+<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+
+<p><fieldset style="display:inline; box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>
+
+<p><fieldset style="display:inline; box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/611574-2-ref.html b/layout/reftests/box-shadow/611574-2-ref.html
new file mode 100644
index 0000000000..b6f50300d9
--- /dev/null
+++ b/layout/reftests/box-shadow/611574-2-ref.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+<head><style>
+button,span,fieldset { border-radius: 7px 3px; background-color: #0F0; }
+button { border: none; outline: 3px solid black; outline-offset: -2px; }
+</style></head>
+<body style="margin:30px">
+<div style="column-count:3; column-fill:auto; height:600px">
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+
+<!-- XXX TODO: SPAN does not work due to differences in anti-aliasing with the test
+<p><span>No Blur Radius</span>
+<p><span>No Blur Radius</span>
+<p><span style="box-sizing:border-box;">No Blur Radius</span>
+<p><span>No Blur Radius</span>
+<p><span>No Blur Radius</span>
+
+<p><span>2px Blur Radius</span>
+<p><span>2px Blur Radius</span>
+<p><span style="box-sizing:border-box;">2px Blur Radius</span>
+<p><span>2px Blur Radius</span>
+<p><span>2px Blur Radius</span>
+-->
+
+<p><fieldset>No Blur Radius</fieldset>
+<p><fieldset><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset>No Blur Radius</fieldset>
+<p><fieldset style="box-sizing:border-box;">No Blur Radius</fieldset>
+<p><fieldset>No Blur Radius</fieldset>
+<p><fieldset>No Blur Radius</fieldset>
+
+<p><fieldset>2px Blur Radius</fieldset>
+<p><fieldset><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset>2px Blur Radius</fieldset>
+<p><fieldset style="box-sizing:border-box;">2px Blur Radius</fieldset>
+<p><fieldset>2px Blur Radius</fieldset>
+<p><fieldset>2px Blur Radius</fieldset>
+
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;"><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-sizing:border-box;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;"><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-sizing:border-box;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/611574-2.html b/layout/reftests/box-shadow/611574-2.html
new file mode 100644
index 0000000000..db9c2df899
--- /dev/null
+++ b/layout/reftests/box-shadow/611574-2.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<head><style>
+button,span,fieldset { border-radius: 7px 3px; background-color: #0F0; }
+button { border: none; outline: 3px solid black; outline-offset: -2px; }
+</style></head>
+<body style="margin:30px">
+<div style="column-count:3; column-fill:auto; height:600px">
+<p><button style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</button>
+
+<p><button style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</button>
+
+<!-- XXX TODO: SPAN does not work due to differences in anti-aliasing with the reference
+<p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span>
+<p><span style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</span>
+<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span>
+<p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span>
+<p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span>
+
+<p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span>
+<p><span style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</span>
+<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span>
+<p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span>
+<p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span>
+-->
+
+<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>
+
+<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+
+<p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>
+
+<p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-basic-ref.html b/layout/reftests/box-shadow/boxshadow-basic-ref.html
new file mode 100644
index 0000000000..0a4639491b
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-basic-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color: green;
+}
+
+#thediv {
+ background-color: green;
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ z-index: 2;
+}
+
+#theshadow {
+ background-color: black;
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 23px;
+ left: 23px;
+ z-index: 1;
+}
+</style>
+
+<div id="theshadow">&nbsp;</div><div id="thediv">Foo</div>
diff --git a/layout/reftests/box-shadow/boxshadow-basic.html b/layout/reftests/box-shadow/boxshadow-basic.html
new file mode 100644
index 0000000000..0870136d3d
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-basic.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color: green;
+}
+
+#thediv {
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ box-shadow: 3px 3px black;
+}
+</style>
+
+<div id="thediv">Foo</div>
diff --git a/layout/reftests/box-shadow/boxshadow-blur-2-notref.html b/layout/reftests/box-shadow/boxshadow-blur-2-notref.html
new file mode 100644
index 0000000000..130d921585
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-blur-2-notref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+body { margin: 0 }
+p {
+height: 1200px;
+width: 100px;
+box-shadow: 0px -100px 100px black;
+}
+</style>
+<p>
+<div style="position:absolute; background: white; top: 100px; left: 212px; height: 2px; width: 2px"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-blur-2-ref.html b/layout/reftests/box-shadow/boxshadow-blur-2-ref.html
new file mode 100644
index 0000000000..73d192a7ee
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-blur-2-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+body { margin: 0 }
+p {
+height: 1200px;
+width: 100px;
+box-shadow: 0px -100px 100px black;
+}
+</style>
+<p>
+<div style="position:absolute; background: white; top: 100px; left: 215px; height: 2px; width: 2px"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-blur-2.html b/layout/reftests/box-shadow/boxshadow-blur-2.html
new file mode 100644
index 0000000000..173e724de3
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-blur-2.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+body { margin: 0 }
+p {
+height: 1200px;
+width: 100px;
+box-shadow: 0px -100px 100px black;
+}
+</style>
+<p>
diff --git a/layout/reftests/box-shadow/boxshadow-blur-notref.html b/layout/reftests/box-shadow/boxshadow-blur-notref.html
new file mode 100644
index 0000000000..890c8e39ca
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-blur-notref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color: green;
+}
+
+#thediv {
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ box-shadow: 3px 3px red;
+}
+</style>
+
+<div id="thediv">Foo</div>
diff --git a/layout/reftests/box-shadow/boxshadow-blur-notref2.html b/layout/reftests/box-shadow/boxshadow-blur-notref2.html
new file mode 100644
index 0000000000..fdfdc48f5f
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-blur-notref2.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color: green;
+}
+
+#thediv {
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+}
+</style>
+
+<div id="thediv">Foo</div>
diff --git a/layout/reftests/box-shadow/boxshadow-blur.html b/layout/reftests/box-shadow/boxshadow-blur.html
new file mode 100644
index 0000000000..f70c1cd1c0
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-blur.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color: green;
+}
+
+#thediv {
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ box-shadow: 3px 3px 2px red;
+}
+</style>
+
+<div id="thediv">Foo</div>
diff --git a/layout/reftests/box-shadow/boxshadow-border-radius-int-ref.html b/layout/reftests/box-shadow/boxshadow-border-radius-int-ref.html
new file mode 100644
index 0000000000..e797c61a26
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-border-radius-int-ref.html
@@ -0,0 +1,31 @@
+<html>
+<style>
+#boxShadow {
+ height: 210px;
+ width: 290px;
+ box-shadow: 0px 0px 2px graytext inset;
+}
+
+#leftCover {
+ width: 30px;
+ height: 300px;
+ background-color: white;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+}
+
+#rightCover {
+ width: 20px;
+ height: 300px;
+ background-color: white;
+ position: absolute;
+ top: 0px;
+ left: 280px;
+}
+</style>
+<body>
+<div id="boxShadow">test</div>
+<div id="leftCover"></div>
+<div id="rightCover"></div>
+</body>
diff --git a/layout/reftests/box-shadow/boxshadow-border-radius-int.html b/layout/reftests/box-shadow/boxshadow-border-radius-int.html
new file mode 100644
index 0000000000..737641576a
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-border-radius-int.html
@@ -0,0 +1,32 @@
+<html>
+<style>
+#boxShadow {
+ height: 210px;
+ width: 290px;
+ border-radius: 11px;
+ box-shadow: 0px 0px 2px graytext inset;
+}
+
+#leftCover {
+ width: 30px;
+ height: 300px;
+ background-color: white;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+}
+
+#rightCover {
+ width: 20px;
+ height: 300px;
+ background-color: white;
+ position: absolute;
+ top: 0px;
+ left: 280px;
+}
+</style>
+<body>
+<div id="boxShadow">test</div>
+<div id="leftCover"></div>
+<div id="rightCover"></div>
+</body>
diff --git a/layout/reftests/box-shadow/boxshadow-button-ref.html b/layout/reftests/box-shadow/boxshadow-button-ref.html
new file mode 100644
index 0000000000..9d026129d4
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-button-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<style>
+#a, #b {
+ width: 100px;
+ height: 100px;
+ background-color: grey;
+ -moz-appearance: none;
+ box-shadow: 4px 4px 3px black;
+ border: none !important;
+ position: absolute;
+}
+
+#a {
+ top: 20px;
+ left: 20px;
+}
+
+#b {
+ top: 170px;
+ left: 20px;
+</style>
+
+<div id="a">&nbsp;</div>
+<div id="b">&nbsp;</div>
diff --git a/layout/reftests/box-shadow/boxshadow-button.html b/layout/reftests/box-shadow/boxshadow-button.html
new file mode 100644
index 0000000000..f1522536db
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-button.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<style>
+#a, #b {
+ width: 100px;
+ height: 100px;
+ background-color: grey;
+ -moz-appearance: none;
+ box-shadow: 4px 4px 3px black;
+ border: none !important;
+ position: absolute;
+}
+
+#a {
+ top: 20px;
+ left: 20px;
+}
+
+#b {
+ top: 170px;
+ left: 20px;
+</style>
+
+<input type="button" id="a" value=""></input>
+<button id="b"></button>
diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding-middle-ref.html b/layout/reftests/box-shadow/boxshadow-color-rounding-middle-ref.html
new file mode 100644
index 0000000000..aa2a57e81d
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-color-rounding-middle-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<style>
+#outerDiv {
+ width: 500px;
+ height: 500px;
+ background: lime;
+ position: absolute;
+}
+
+#middleBlur {
+ width: 300px;
+ height: 300px;
+ margin-left: 100px;
+ margin-top: 100px;
+ background: black;
+ box-shadow: inset 0 0 20px 100px lime;
+}
+</style>
+
+<div id="outerDiv">
+ <div id="middleBlur">
+ </div>
+</div>
diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding-middle.html b/layout/reftests/box-shadow/boxshadow-color-rounding-middle.html
new file mode 100644
index 0000000000..1693fb9a3d
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-color-rounding-middle.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+#thediv {
+ width: 500px;
+ height: 500px;
+ background: black;
+ box-shadow: inset 0 0 20px 200px lime;
+}
+</style>
+
+<div id="thediv"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding-ref.html b/layout/reftests/box-shadow/boxshadow-color-rounding-ref.html
new file mode 100644
index 0000000000..95fa9075ed
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-color-rounding-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+#thediv {
+ width: 300px;
+ height: 300px;
+ background: lime;
+}
+</style>
+
+<div id="thediv"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding.html b/layout/reftests/box-shadow/boxshadow-color-rounding.html
new file mode 100644
index 0000000000..057c077eb6
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-color-rounding.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+#thediv {
+ width: 300px;
+ height: 300px;
+ background: black;
+ box-shadow: inset 0 0 20px 200px lime;
+}
+</style>
+
+<div id="thediv"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-dynamic-ref.xhtml b/layout/reftests/box-shadow/boxshadow-dynamic-ref.xhtml
new file mode 100644
index 0000000000..0aaddc1a18
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-dynamic-ref.xhtml
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+<hbox flex="1"
+ style="margin:50px; background:yellow;
+ box-shadow: 1px 2px 2px black, 0 0 7px white, 0 0 14px rgb(50, 170, 255), 0 0 21px rgb(50, 170, 255);
+ border-radius: 10px;"/>
+</window>
diff --git a/layout/reftests/box-shadow/boxshadow-dynamic.xhtml b/layout/reftests/box-shadow/boxshadow-dynamic.xhtml
new file mode 100644
index 0000000000..97ad1c57ea
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-dynamic.xhtml
@@ -0,0 +1,33 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="data:text/css,
+
+hbox {
+ margin: 50px;
+ background: yellow;
+}
+
+hbox[x] {
+ box-shadow: 1px 2px 2px black, 0 0 7px white, 0 0 14px rgb(50, 170, 255), 0 0 21px rgb(50, 170, 255);
+ border-radius: 10px;
+}
+
+"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ class="reftest-wait">
+
+ <script>
+ <![CDATA[
+
+ document.documentElement.addEventListener("MozReftestInvalidate",
+ doTest, false);
+
+ function doTest() {
+ document.getElementById("hbox1").setAttribute("x",1);
+ document.documentElement.removeAttribute("class");
+ }
+
+ ]]>
+ </script>
+
+ <hbox id="hbox1" flex="1"/>
+</window>
diff --git a/layout/reftests/box-shadow/boxshadow-fileupload-ref.html b/layout/reftests/box-shadow/boxshadow-fileupload-ref.html
new file mode 100644
index 0000000000..ab36e2af5c
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-fileupload-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html><head>
+
+<style>
+#s {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ display: block;
+ width: 400px;
+ height: 150px;
+}
+
+#p {
+ background-color: black;
+ width: 400px;
+ height: 150px;
+ position: absolute;
+ top: 270px;
+ left: 20px;
+}
+</style>
+
+</head>
+<body>
+
+<input type="file" id="s" />
+<div id="p">&nbsp;</div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-fileupload.html b/layout/reftests/box-shadow/boxshadow-fileupload.html
new file mode 100644
index 0000000000..28ca6ea4e4
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-fileupload.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html><head>
+
+<style>
+#s {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ display: block;
+ width: 400px;
+ height: 150px;
+ box-shadow: 0px 250px black;
+}
+</style>
+
+</head>
+<body>
+
+<input type="file" id="s" />
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inner-basic-ref.svg b/layout/reftests/box-shadow/boxshadow-inner-basic-ref.svg
new file mode 100644
index 0000000000..ed63f9a9ae
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inner-basic-ref.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+<!-- This reference SVG must perform *exactly* the same path construction,
+ clipping, and filling operations that PaintBoxShadowInner does for
+ the HTML test file. If it doesn't match perfectly, antialiased
+ pixels at the curved edges will not agree.
+
+ PaintBoxShadowInner defines both its second (nonrectangular)
+ clipping path and its fill path as the even-odd-rule compositions
+ of two rectangles, one with nonzero corner radius. It is
+ impossible to express "the path consisting of the even-odd-rule
+ composition of two |rect| elements" in SVG. This is a minor
+ nuisance because we have to write everything out using |path|,
+ plus a major nuisance because Gecko uses the same ellipse-to-
+ Bezier conversion for rounded rectangles in SVG and HTML, but the
+ SVG 'A' operator uses a different one. Therefore we cannot use 'A'.
+ The 'C' parameters here were obtained by dumping out the cairo
+ operations used to draw the HTML, using cairo-trace. -->
+ <defs>
+ <clipPath id="outer">
+ <rect x="16" y="16" width="240" height="240"/>
+ </clipPath>
+ <clipPath id="inner">
+ <path clip-rule="evenodd"
+ d="M 248 16
+ H 24 C 19.58468 16 16 19.58468 16 24
+ V 248 C 16 252.41532 19.58468 256 24 256
+ H 248 C 252.41532 256 256 252.41532 256 248
+ V 24 C 256 19.58468 252.41532 16 248 16 Z
+ M 48 56 H 272 V 296 H 48 Z"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#outer)">
+ <path fill="grey" fill-rule="evenodd" clip-path="url(#inner)"
+ d="M 16 16 H 256 V 256 H 16 Z
+ M 280 48
+ H 56 C 51.58468 48 48 51.58468 48 56
+ V 280 C 48 284.41532 51.58468 288 56 288
+ H 280 C 284.41532 288 288 284.41532 288 280
+ V 56 C 288 51.58468 284.41532 48 280 48 Z"/>
+ </g>
+</svg>
diff --git a/layout/reftests/box-shadow/boxshadow-inner-basic.html b/layout/reftests/box-shadow/boxshadow-inner-basic.html
new file mode 100644
index 0000000000..8ba6109657
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inner-basic.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<div style="
+ width: 240px; height: 240px;
+ border-radius: 8px;
+ box-shadow: 32px 32px grey inset;
+ position: absolute;
+ top: 16px; left: 16px;
+"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-border-radius-ref.html b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius-ref.html
new file mode 100644
index 0000000000..77c8d299b6
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#ref {
+ background: black;
+ width: 575px;
+ height: 5px;
+ margin-left: 125px;
+}
+
+</style>
+</head>
+<body>
+<div id="ref">
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-border-radius.html b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius.html
new file mode 100644
index 0000000000..87ce0f01c6
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#boxShadow {
+ background: gray;
+ width: 700px;
+ height: 20px;
+ box-shadow: 15px 15px 3px black inset;
+ border-radius: 100px 0px 0px 0px;
+}
+
+#cutLeft {
+ background: white;
+ width: 125px;
+ height: 20px;
+ position: absolute;
+}
+
+#cutAcross {
+ background: white;
+ width: 700px;
+ height: 15px;
+ position: absolute;
+ margin-top: 5px;
+}
+
+</style>
+</head>
+<body>
+<div id="cutLeft"></div>
+<div id="cutAcross"></div>
+<div id="boxShadow"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-offset-ref.html b/layout/reftests/box-shadow/boxshadow-inset-large-offset-ref.html
new file mode 100644
index 0000000000..f117b53ed9
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-large-offset-ref.html
@@ -0,0 +1,23 @@
+<html>
+<head>
+<style>
+div.test {
+ width: 530px;
+ height: 500px;
+ background-color: black;
+}
+
+div.cover {
+ width: 500px;
+ height: 500px;
+ background-color: black;
+ position: absolute;
+ margin-top: 0px;
+ margin-left: 30px;
+}
+</style>
+<body>
+<div class="test">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-offset.html b/layout/reftests/box-shadow/boxshadow-inset-large-offset.html
new file mode 100644
index 0000000000..fe8db9f07a
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-large-offset.html
@@ -0,0 +1,26 @@
+<html>
+<head>
+<style>
+div.test {
+ width: 500px;
+ height: 500px;
+ box-shadow: inset 70px 70px 50px 0px black;
+ position: absolute;
+}
+
+div.cover {
+ width: 500px;
+ height: 500px;
+ background-color: black;
+ position: absolute;
+ margin-top: 0px;
+ margin-left: 30px;
+}
+</style>
+<body>
+<div class="test">
+</div>
+<div class="cover">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-neg-spread.html b/layout/reftests/box-shadow/boxshadow-inset-neg-spread.html
new file mode 100644
index 0000000000..b018ea062e
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-neg-spread.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+<style>
+div.neg
+{
+ margin: 35px auto 95px auto;
+ width: 200px;
+ height: 200px;
+ box-shadow: 0px 0px 15px -20px #808080 inset;
+}
+</style>
+</head>
+
+<body>
+<div class="neg"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-neg-spread2-ref.html b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2-ref.html
new file mode 100644
index 0000000000..b6b1a3dfc2
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2-ref.html
@@ -0,0 +1,16 @@
+<html>
+<head>
+<style>
+.test {
+ background-color: #fec;
+ display: inline-block;
+ width: 5em;
+ height: 5em;
+}
+</style>
+</head>
+
+<body>
+<div class="test"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-neg-spread2.html b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2.html
new file mode 100644
index 0000000000..b846f25aba
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2.html
@@ -0,0 +1,20 @@
+<html>
+<head>
+<style>
+.test {
+ background-color: #fec;
+ display: inline-block;
+ width: 5em;
+ height: 5em;
+}
+
+.first {
+ box-shadow: inset 0 0 1px -3px rgba(0,0,10,0.25);
+}
+</style>
+</head>
+
+<body>
+<div class="first test"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-large-border-radius-ref.html b/layout/reftests/box-shadow/boxshadow-large-border-radius-ref.html
new file mode 100644
index 0000000000..d914fb7abc
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-large-border-radius-ref.html
@@ -0,0 +1,37 @@
+<html>
+<head>
+<style>
+ #leftCover {
+ width: 30px;
+ height: 50px;
+ background-color: white;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ #rightCover {
+ width: 20px;
+ height: 120px;
+ background-color: white;
+ position: absolute;
+ top: 0px;
+ left: 150px;
+ }
+
+ #boxShadowRegular {
+ width: 152px;
+ height: 19.5px;
+ box-shadow: 0px 0px 1px #3b99FC inset,
+ 0px 0px 4px 1px #3B99FC,
+ 0px 0px 1.5px 1px #3B99FC;
+ position: absolute;
+ }
+
+</style>
+</head>
+<html>
+ <div id="boxShadowRegular"></div>
+ <div id="leftCover"></div>
+ <div id="rightCover"></div>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-large-border-radius.html b/layout/reftests/box-shadow/boxshadow-large-border-radius.html
new file mode 100644
index 0000000000..90eee1db36
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-large-border-radius.html
@@ -0,0 +1,37 @@
+<html>
+<head>
+<style>
+ #boxShadow {
+ width: 152px;
+ height: 19.5px;
+ box-shadow: 0px 0px 1px #3b99FC inset,
+ 0px 0px 4px 1px #3B99FC,
+ 0px 0px 1.5px 1px #3B99FC;
+ border-radius: 10000px 0px 0px 10000px;
+ position: absolute;
+ }
+
+ #leftCover {
+ width: 30px;
+ height: 50px;
+ background-color: white;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ #rightCover {
+ width: 20px;
+ height: 120px;
+ background-color: white;
+ position: absolute;
+ top: 0px;
+ left: 150px;
+ }
+</style>
+</head>
+<html>
+ <div id="boxShadow"></div>
+ <div id="leftCover"></div>
+ <div id="rightCover"></div>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-large-offset-ref.html b/layout/reftests/box-shadow/boxshadow-large-offset-ref.html
new file mode 100644
index 0000000000..2160b81479
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-large-offset-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<style>
+.top {
+ background-color: red;
+ width: 800px;
+ height: 400px;
+}
+
+.bottom {
+ background-color: #fec;
+ width: 800px;
+ height: 400px;
+}
+
+.leftCut {
+ position: absolute;
+ margin-left: 0px;
+ margin-top: 0px;
+ width: 10px;
+ height: 800px;
+ background-color: black;
+}
+
+.rightCut {
+ position: absolute;
+ margin-left: 790px;
+ margin-top: 0px;
+ width: 10px;
+ height: 800px;
+ background-color: black;
+}
+
+.centerCut {
+ position: absolute;
+ margin-top: 395px;
+ width: 800px;
+ height: 20px;
+ background-color: black;
+}
+</style>
+
+<body>
+<div class="leftCut"></div>
+<div class="rightCut"></div>
+<div class="centerCut"></div>
+<div class="top"></div>
+<div class="bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-large-offset.html b/layout/reftests/box-shadow/boxshadow-large-offset.html
new file mode 100644
index 0000000000..5df87c368b
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-large-offset.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<style>
+.test {
+ background-color: #fec;
+ display: inline-block;
+ width: 800px;
+ height: 800px;
+}
+
+.second {
+ box-shadow: inset 0 400px 1px 0px red;
+}
+
+.leftCut {
+ position: absolute;
+ margin-left: 0px;
+ margin-top: 0px;
+ width: 10px;
+ height: 800px;
+ background-color: black;
+}
+
+.rightCut {
+ position: absolute;
+ margin-left: 790px;
+ margin-top: 0px;
+ width: 10px;
+ height: 800px;
+ background-color: black;
+}
+
+.centerCut {
+ position: absolute;
+ margin-top: 395px;
+ width: 800px;
+ height: 20px;
+ background-color: black;
+}
+
+</style>
+
+<body>
+<div class="leftCut"></div>
+<div class="rightCut"></div>
+<div class="centerCut"></div>
+<div class="test second"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-mixed-2-ref.html b/layout/reftests/box-shadow/boxshadow-mixed-2-ref.html
new file mode 100644
index 0000000000..3b57608a23
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-mixed-2-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<title>Reference, bug 1402060</title>
+<style>
+
+.blackAtTop {
+ width: 100px;
+ height: 90px;
+ border-top: 10px solid black;
+}
+
+.blue {
+ width: 100px;
+ height: 100px;
+ background: blue;
+ margin-left: 10px;
+}
+
+.white {
+ width: 90px;
+ height: 90px;
+ background: white;
+}
+
+</style>
+
+<div class="blackAtTop"><div class="blue"><div class="white"></div></div></div>
diff --git a/layout/reftests/box-shadow/boxshadow-mixed-2.html b/layout/reftests/box-shadow/boxshadow-mixed-2.html
new file mode 100644
index 0000000000..5e109524f1
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-mixed-2.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1402060</title>
+<style>
+
+div {
+ width: 100px;
+ height: 100px;
+ box-shadow: inset 0 10px black, 10px 10px blue;
+}
+
+</style>
+
+<div></div>
diff --git a/layout/reftests/box-shadow/boxshadow-mixed-ref.html b/layout/reftests/box-shadow/boxshadow-mixed-ref.html
new file mode 100644
index 0000000000..3c71b12e20
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-mixed-ref.html
@@ -0,0 +1 @@
+<div style="background: blue padding-box; border: 2px solid red; border-radius: 10px; width: 300px; height: 300px; position: absolute; top: 10px; left: 10px;">inset and outset</div><div style="border-radius: 10px; background-color: green; width: 304px; height: 304px; position: absolute; top: 10px; left: 360px;">&nbsp;</div>
diff --git a/layout/reftests/box-shadow/boxshadow-mixed.html b/layout/reftests/box-shadow/boxshadow-mixed.html
new file mode 100644
index 0000000000..796fd409e4
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-mixed.html
@@ -0,0 +1 @@
+<div style="border: 2px red solid; border-radius: 10px; width: 300px; height: 300px; box-shadow: 500px 500px 0px 20px blue inset, 350px 0px green; position: absolute; top: 10px; left: 10px;">inset and outset</div>
diff --git a/layout/reftests/box-shadow/boxshadow-multiple-ref.html b/layout/reftests/box-shadow/boxshadow-multiple-ref.html
new file mode 100644
index 0000000000..9eefe7e746
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-multiple-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color: green;
+}
+
+#thediv {
+ background-color: green;
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ z-index: 4;
+}
+
+#theshadow {
+ background-color: black;
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 29px;
+ left: 29px;
+ z-index: 1;
+}
+
+#theshadow2 {
+ background-color: blue;
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 26px;
+ left: 26px;
+ z-index: 2;
+}
+
+#theshadow3 {
+ background-color: red;
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 23px;
+ left: 23px;
+ z-index: 3;
+}
+</style>
+
+<div id="theshadow">&nbsp;</div><div id="theshadow2">&nbsp;</div><div id="theshadow3">&nbsp;</div><div id="thediv">Foo</div>
diff --git a/layout/reftests/box-shadow/boxshadow-multiple.html b/layout/reftests/box-shadow/boxshadow-multiple.html
new file mode 100644
index 0000000000..6307c1020d
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-multiple.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color: green;
+}
+
+#thediv {
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ box-shadow: 3px 3px red, 6px 6px blue, 9px 9px black;
+}
+</style>
+
+<div id="thediv">Foo</div>
diff --git a/layout/reftests/box-shadow/boxshadow-onecorner-ref.html b/layout/reftests/box-shadow/boxshadow-onecorner-ref.html
new file mode 100644
index 0000000000..5a92e99517
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-onecorner-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE HTML>
+<div style="position: absolute; top: 300px; left: 70px; width: 360px; height: 160px; border-top-right-radius: 40px; background: red;">&nbsp;</div>
+<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-top-right-radius: 10px; background: yellow;">Test</div>
diff --git a/layout/reftests/box-shadow/boxshadow-onecorner.html b/layout/reftests/box-shadow/boxshadow-onecorner.html
new file mode 100644
index 0000000000..1f0805b3bd
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-onecorner.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-top-right-radius: 10px; box-shadow: 0 300px 0 30px red; background: yellow;">Test</div>
diff --git a/layout/reftests/box-shadow/boxshadow-opacity-ref.html b/layout/reftests/box-shadow/boxshadow-opacity-ref.html
new file mode 100644
index 0000000000..4ff7d22395
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-opacity-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color: green;
+}
+
+#thediv {
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ opacity: 0.6;
+ box-shadow: 3px 3px 2px rgb(255,0,0);
+}
+</style>
+
+<div id="thediv"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-opacity.html b/layout/reftests/box-shadow/boxshadow-opacity.html
new file mode 100644
index 0000000000..585c3081fd
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-opacity.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color: green;
+}
+
+#thediv {
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ box-shadow: 3px 3px 2px rgba(255,0,0,0.6);
+}
+</style>
+
+<div id="thediv"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-rotated-ref.html b/layout/reftests/box-shadow/boxshadow-rotated-ref.html
new file mode 100644
index 0000000000..9888d71f2b
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-rotated-ref.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+<style>
+div.second {
+ margin: 35px auto 95px auto;
+ box-shadow: 0px 0px 15px 0px #808080;
+ width: 100;
+ height: 116.36px;
+}
+</style>
+</head>
+<body>
+<div class="second"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-rotated.html b/layout/reftests/box-shadow/boxshadow-rotated.html
new file mode 100644
index 0000000000..7cc8451f8a
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-rotated.html
@@ -0,0 +1,16 @@
+<html>
+<head>
+<style>
+div.first {
+ margin: 35px auto 95px auto;
+ box-shadow: 0px 0px 15px 0px #808080;
+ transform: rotate(-180deg);
+ width: 100;
+ height: 116.36px;
+}
+</style>
+</head>
+<body>
+<div class="first"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-rounded-spread-ref.html b/layout/reftests/box-shadow/boxshadow-rounded-spread-ref.html
new file mode 100644
index 0000000000..3b2e5a949c
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-rounded-spread-ref.html
@@ -0,0 +1 @@
+<div style="width: 300px; height: 300px; border-radius: 100%; position: absolute; top: 20px; left: 20px;">shadow div</div><div style="border-radius: 100%; width: 320px; height: 320px; background-color: grey; position: absolute; top: 330px; left: 30px;">&nbsp;</div>
diff --git a/layout/reftests/box-shadow/boxshadow-rounded-spread.html b/layout/reftests/box-shadow/boxshadow-rounded-spread.html
new file mode 100644
index 0000000000..a43810bca1
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-rounded-spread.html
@@ -0,0 +1 @@
+<div style="box-shadow: 20px 320px 0 10px grey; width: 300px; height: 300px; border-radius: 100%; position: absolute; top: 20px; left: 20px;">shadow div</div>
diff --git a/layout/reftests/box-shadow/boxshadow-rounding-ref.html b/layout/reftests/box-shadow/boxshadow-rounding-ref.html
new file mode 100644
index 0000000000..8f785547ad
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-rounding-ref.html
@@ -0,0 +1 @@
+<div style="width: 100px; height: 200px; box-shadow: 3px 3px 2px black; background-color: green;">Hello</div>
diff --git a/layout/reftests/box-shadow/boxshadow-rounding.html b/layout/reftests/box-shadow/boxshadow-rounding.html
new file mode 100644
index 0000000000..29d812a2cb
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-rounding.html
@@ -0,0 +1 @@
+<div style="width: 100.2px; height: 200.2px; box-shadow: 3px 3px 2px black; background-color: green;">Hello</div>
diff --git a/layout/reftests/box-shadow/boxshadow-skiprect-ref.html b/layout/reftests/box-shadow/boxshadow-skiprect-ref.html
new file mode 100644
index 0000000000..ecebb4bd6f
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-skiprect-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<style>
+
+#thediv {
+ width: 400px;
+ height: 250px;
+ position: absolute;
+ top: -500px;
+ left: -500px;
+ box-shadow: 540px 540px 10.5px black;
+}
+
+#blankdiv {
+ width: 400px;
+ height: 250px;
+ background-color: white;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+}
+</style>
+
+<div id="thediv">&nbsp;</div>
+<div id="blankdiv">&nbsp;</div>
diff --git a/layout/reftests/box-shadow/boxshadow-skiprect.html b/layout/reftests/box-shadow/boxshadow-skiprect.html
new file mode 100644
index 0000000000..f888f9d098
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-skiprect.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<style>
+
+#thediv {
+ width: 400px;
+ height: 250px;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ box-shadow: 0px 0px 10.5px black;
+}
+</style>
+
+<div id="thediv">&nbsp;</div>
diff --git a/layout/reftests/box-shadow/boxshadow-spread-ref.html b/layout/reftests/box-shadow/boxshadow-spread-ref.html
new file mode 100644
index 0000000000..2636adc0b3
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-spread-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color: green;
+}
+
+#thediv {
+ background-color: green;
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ z-index: 2;
+}
+
+#theshadow {
+ background-color: black;
+ width: 306px;
+ height: 106px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ z-index: 1;
+}
+</style>
+
+<div id="theshadow">&nbsp;</div><div id="thediv">Foo</div>
diff --git a/layout/reftests/box-shadow/boxshadow-spread.html b/layout/reftests/box-shadow/boxshadow-spread.html
new file mode 100644
index 0000000000..a7c9a8c1df
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-spread.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color: green;
+}
+
+#thediv {
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ color: black;
+ box-shadow: 3px 3px 0px 3px;
+}
+</style>
+<div id="thediv">Foo</div>
diff --git a/layout/reftests/box-shadow/boxshadow-threecorners-ref.html b/layout/reftests/box-shadow/boxshadow-threecorners-ref.html
new file mode 100644
index 0000000000..cd9f383e1f
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-threecorners-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE HTML>
+<div style="position: absolute; top: 300px; left: 70px; width: 360px; height: 160px; border-bottom-left-radius: 40px; border-top-left-radius: 40px; border-top-right-radius: 40px; background: red;">&nbsp;</div>
+<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background: yellow;">Test</div>
diff --git a/layout/reftests/box-shadow/boxshadow-threecorners.html b/layout/reftests/box-shadow/boxshadow-threecorners.html
new file mode 100644
index 0000000000..f00135f959
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-threecorners.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 0 300px 0 30px red; background: yellow;">Test</div>
diff --git a/layout/reftests/box-shadow/boxshadow-twocorners-ref.html b/layout/reftests/box-shadow/boxshadow-twocorners-ref.html
new file mode 100644
index 0000000000..bc3263cdb1
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-twocorners-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE HTML>
+<div style="position: absolute; top: 300px; left: 70px; width: 360px; height: 160px; border-bottom-left-radius: 40px; border-top-right-radius: 40px; background: red;">&nbsp;</div>
+<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; background: yellow;">Test</div>
diff --git a/layout/reftests/box-shadow/boxshadow-twocorners.html b/layout/reftests/box-shadow/boxshadow-twocorners.html
new file mode 100644
index 0000000000..e62c316f2b
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-twocorners.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 0 300px 0 30px red; background: yellow;">Test</div>
diff --git a/layout/reftests/box-shadow/fieldset-inset-ref.html b/layout/reftests/box-shadow/fieldset-inset-ref.html
new file mode 100644
index 0000000000..6d02c04c8b
--- /dev/null
+++ b/layout/reftests/box-shadow/fieldset-inset-ref.html
@@ -0,0 +1,95 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase #2 for bug 485149</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+
+body {padding:20px;}
+
+field {
+ display:block;
+ overflow:hidden;
+ background:yellow;
+
+ box-shadow: inset 0 0 5px 5px #cccccc;
+ border:1px solid #000000;
+ border-radius:7px;
+ width:200px;
+ height:50px;
+ margin-left:5px;
+ margin-right:2px;
+ padding:10px;
+ border-box;
+}
+
+.with-legend {
+ margin-top:8px;
+ height:42px;
+}
+
+p { height:40px; margin:0; }
+
+#mask1 {
+ position:absolute;
+ left:0;
+ top:0;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:700px;
+}
+
+#mask2 {
+ position:absolute;
+ left:170px;
+ top:330px;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:300px;
+}
+
+#mask3 {
+ position:absolute;
+ left:0;
+ top:380px;
+ background:black;
+ z-index:1;
+ width:300px;
+ height:300px;
+}
+
+</style>
+</head>
+<body>
+
+<field class="with-legend">
+1
+</field>
+
+<p></p>
+<field class="with-legend" style="position:relative">
+2
+</field>
+
+<p></p>
+<field>
+3
+</field>
+
+<p></p>
+<field class="with-legend" style="border-color:transparent">
+4
+</field>
+
+<div id="mask1"></div>
+<div id="mask2"></div>
+<div id="mask3"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/fieldset-inset.html b/layout/reftests/box-shadow/fieldset-inset.html
new file mode 100644
index 0000000000..d49e2411f9
--- /dev/null
+++ b/layout/reftests/box-shadow/fieldset-inset.html
@@ -0,0 +1,90 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase #2 for bug 485149</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+
+body {padding:20px;}
+
+fieldset {
+ overflow:hidden;
+ background:yellow;
+
+ box-shadow: inset 0 0 5px 5px #cccccc;
+ border:1px solid #000000;
+ border-radius:7px;
+ width:200px;
+ height:50px;
+ margin-left:5px;
+ margin-right:2px;
+ padding:10px;
+}
+
+legend { height:16px; }
+
+p { height:40px; margin:0; }
+
+#mask1 {
+ position:absolute;
+ left:0;
+ top:0;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:700px;
+}
+
+#mask2 {
+ position:absolute;
+ left:170px;
+ top:330px;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:300px;
+}
+
+#mask3 {
+ position:absolute;
+ left:0;
+ top:380px;
+ background:black;
+ z-index:1;
+ width:300px;
+ height:300px;
+}
+
+</style>
+</head>
+<body>
+
+<fieldset><legend>Legend</legend>
+1
+</fieldset>
+
+<p></p>
+<fieldset style="position:relative;"><legend>Legend</legend>
+2
+</fieldset>
+
+<p></p>
+<fieldset>
+3
+</fieldset>
+
+<p></p>
+<fieldset><legend style="width:150px;"></legend>
+4
+</fieldset>
+
+<div id="mask1"></div>
+<div id="mask2"></div>
+<div id="mask3"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/fieldset-ref.html b/layout/reftests/box-shadow/fieldset-ref.html
new file mode 100644
index 0000000000..9196d50636
--- /dev/null
+++ b/layout/reftests/box-shadow/fieldset-ref.html
@@ -0,0 +1,95 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 485149</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+
+body {padding:20px;}
+
+field {
+ display:block;
+ overflow:hidden;
+ background:yellow;
+
+ box-shadow:0 0 5px 5px #cccccc;
+ border:1px solid #000000;
+ border-radius:7px;
+ width:200px;
+ height:50px;
+ margin-left:5px;
+ margin-right:2px;
+ padding:10px;
+ border-box;
+}
+
+.with-legend {
+ margin-top:8px;
+ height:42px;
+}
+
+p { height:40px; margin:0; }
+
+#mask1 {
+ position:absolute;
+ left:0;
+ top:0;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:700px;
+}
+
+#mask2 {
+ position:absolute;
+ left:170px;
+ top:330px;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:300px;
+}
+
+#mask3 {
+ position:absolute;
+ left:0;
+ top:380px;
+ background:black;
+ z-index:1;
+ width:300px;
+ height:300px;
+}
+
+</style>
+</head>
+<body>
+
+<field class="with-legend">
+1
+</field>
+
+<p></p>
+<field class="with-legend" style="position:relative">
+2
+</field>
+
+<p></p>
+<field>
+3
+</field>
+
+<p></p>
+<field class="with-legend" style="border-color:transparent">
+4
+</field>
+
+<div id="mask1"></div>
+<div id="mask2"></div>
+<div id="mask3"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/fieldset.html b/layout/reftests/box-shadow/fieldset.html
new file mode 100644
index 0000000000..581633f54b
--- /dev/null
+++ b/layout/reftests/box-shadow/fieldset.html
@@ -0,0 +1,90 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 485149</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+
+body {padding:20px;}
+
+fieldset {
+ overflow:hidden;
+ background:yellow;
+
+ box-shadow:0 0 5px 5px #cccccc;
+ border:1px solid #000000;
+ border-radius:7px;
+ width:200px;
+ height:50px;
+ margin-left:5px;
+ margin-right:2px;
+ padding:10px;
+}
+
+legend { height:16px; }
+
+p { height:40px; margin:0; }
+
+#mask1 {
+ position:absolute;
+ left:0;
+ top:0;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:700px;
+}
+
+#mask2 {
+ position:absolute;
+ left:170px;
+ top:330px;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:300px;
+}
+
+#mask3 {
+ position:absolute;
+ left:0;
+ top:380px;
+ background:black;
+ z-index:1;
+ width:300px;
+ height:300px;
+}
+
+</style>
+</head>
+<body>
+
+<fieldset><legend>Legend</legend>
+1
+</fieldset>
+
+<p></p>
+<fieldset style="position:relative;"><legend>Legend</legend>
+2
+</fieldset>
+
+<p></p>
+<fieldset>
+3
+</fieldset>
+
+<p></p>
+<fieldset><legend style="width:150px;"></legend>
+4
+</fieldset>
+
+<div id="mask1"></div>
+<div id="mask2"></div>
+<div id="mask3"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-1-ref.html b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref.html
new file mode 100644
index 0000000000..89906bb1c0
--- /dev/null
+++ b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style type="text/css">
+
+div {
+ height: 200px; width: 200px; overflow: hidden;
+ font-size: 50px;
+}
+span {
+ box-shadow: 210px 210px 2px gray;
+
+ /* work around potential font overflow */
+ margin-left: 5px;
+}
+
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-1-ref2.html b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref2.html
new file mode 100644
index 0000000000..03d34afd9f
--- /dev/null
+++ b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style type="text/css">
+
+div {
+ height: 200px; width: 200px;
+ font-size: 50px;
+}
+
+span {
+ /* work around potential font overflow */
+ margin-left: 5px;
+}
+
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-1.html b/layout/reftests/box-shadow/overflow-not-scrollable-1.html
new file mode 100644
index 0000000000..94a4b7fe07
--- /dev/null
+++ b/layout/reftests/box-shadow/overflow-not-scrollable-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style type="text/css">
+
+div {
+ height: 200px; width: 200px; overflow: auto;
+ font-size: 50px;
+}
+span {
+ box-shadow: 210px 210px 2px gray;
+
+ /* work around potential font overflow */
+ margin-left: 5px;
+}
+
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-2-ref.html b/layout/reftests/box-shadow/overflow-not-scrollable-2-ref.html
new file mode 100644
index 0000000000..8bac681910
--- /dev/null
+++ b/layout/reftests/box-shadow/overflow-not-scrollable-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<style type="text/css">
+
+div {
+ height: 200px; width: 200px; overflow: hidden;
+ font-size: 50px;
+ font-weight: bold;
+}
+span {
+ box-shadow: 100px 100px 30px black;
+
+ /* work around potential font overflow */
+ margin-left: 5px;
+}
+
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-2.html b/layout/reftests/box-shadow/overflow-not-scrollable-2.html
new file mode 100644
index 0000000000..66dba48daf
--- /dev/null
+++ b/layout/reftests/box-shadow/overflow-not-scrollable-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<style type="text/css">
+
+div {
+ height: 200px; width: 200px; overflow: auto;
+ font-size: 50px;
+ font-weight: bold;
+}
+span {
+ box-shadow: 100px 100px 30px black;
+
+ /* work around potential font overflow */
+ margin-left: 5px;
+}
+
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/layout/reftests/box-shadow/reftest.list b/layout/reftests/box-shadow/reftest.list
new file mode 100644
index 0000000000..ed6baf7946
--- /dev/null
+++ b/layout/reftests/box-shadow/reftest.list
@@ -0,0 +1,49 @@
+== boxshadow-basic.html boxshadow-basic-ref.html
+!= boxshadow-blur.html boxshadow-blur-notref.html
+!= boxshadow-blur.html boxshadow-blur-notref2.html
+random == boxshadow-blur-2.html boxshadow-blur-2-ref.html # fixedpoint division in blur code makes this fail
+random != boxshadow-blur-2.html boxshadow-blur-2-notref.html # fixedpoint division in blur code makes this fail
+== boxshadow-multiple.html boxshadow-multiple-ref.html
+== boxshadow-spread.html boxshadow-spread-ref.html
+== tableboxshadow-basic.html tableboxshadow-basic-ref.html
+== tableboxshadow-trshadow.html tableboxshadow-trshadow-ref.html
+== tableboxshadow-tdshadow.html tableboxshadow-tdshadow-ref.html
+== boxshadow-rounding.html boxshadow-rounding-ref.html
+# One uses old path, one uses WR box shadow.
+== boxshadow-button.html boxshadow-button-ref.html
+fuzzy(0-14,0-179) fuzzy-if(swgl&&!Android,0-1,0-952) fuzzy-if(useDrawSnapshot&&swgl,14-14,54-54) == boxshadow-large-border-radius.html boxshadow-large-border-radius-ref.html # Bug 1209649
+
+== boxshadow-fileupload.html boxshadow-fileupload-ref.html
+fuzzy(13-19,28-51) == boxshadow-inner-basic.html boxshadow-inner-basic-ref.svg
+fuzzy(0-1,0-18) random-if(layersGPUAccelerated) == boxshadow-mixed.html boxshadow-mixed-ref.html
+fuzzy(0-1,0-17) == boxshadow-mixed-2.html boxshadow-mixed-2-ref.html
+random-if(d2d) fuzzy(0-127,0-3528) == boxshadow-rounded-spread.html boxshadow-rounded-spread-ref.html
+fuzzy(0-1,0-50) == chrome://reftest/content/box-shadow/boxshadow-dynamic.xhtml chrome://reftest/content/box-shadow/boxshadow-dynamic-ref.xhtml
+random-if(d2d) fuzzy(0-1,0-14) == boxshadow-onecorner.html boxshadow-onecorner-ref.html
+random-if(d2d) fuzzy(0-1,0-22) == boxshadow-twocorners.html boxshadow-twocorners-ref.html
+random-if(d2d) fuzzy(0-1,0-36) == boxshadow-threecorners.html boxshadow-threecorners-ref.html
+fuzzy(0-2,0-440) == boxshadow-skiprect.html boxshadow-skiprect-ref.html
+fuzzy-if(useDrawSnapshot,1-1,1197-2400) == boxshadow-opacity.html boxshadow-opacity-ref.html
+== boxshadow-color-rounding.html boxshadow-color-rounding-ref.html
+== boxshadow-color-rounding-middle.html boxshadow-color-rounding-middle-ref.html
+fuzzy(0-3,0-500) fuzzy-if(d2d,0-2,0-1080) == boxshadow-border-radius-int.html boxshadow-border-radius-int-ref.html
+== boxshadow-inset-neg-spread.html about:blank
+== boxshadow-inset-neg-spread2.html boxshadow-inset-neg-spread2-ref.html
+fuzzy(0-26,0-3610) fuzzy-if(d2d,0-26,0-5910) fuzzy-if(!(swgl&&Android),0-6,378-4500) == boxshadow-rotated.html boxshadow-rotated-ref.html # Bug 1211264
+== boxshadow-inset-large-border-radius.html boxshadow-inset-large-border-radius-ref.html
+
+# fuzzy due to blur going inside, but as long as it's essentially black instead of a light gray its ok.
+fuzzy(12-15,9400-13267) == boxshadow-inset-large-offset.html boxshadow-inset-large-offset-ref.html
+
+== overflow-not-scrollable-1.html overflow-not-scrollable-1-ref.html
+== overflow-not-scrollable-1.html overflow-not-scrollable-1-ref2.html
+== overflow-not-scrollable-2.html overflow-not-scrollable-2-ref.html
+fuzzy(0-1,0-655) == 611574-1.html 611574-1-ref.html
+fuzzy(0-4,0-144) fuzzy-if(d2d,0-1,0-36) == 611574-2.html 611574-2-ref.html
+fuzzy(0-16,0-10) == fieldset.html fieldset-ref.html # minor anti-aliasing problem on Windows
+fuzzy(0-16,0-10) == fieldset-inset.html fieldset-inset-ref.html # minor anti-aliasing problem on Windows
+== 1178575.html 1178575-ref.html
+== 1178575-2.html 1178575-2-ref.html
+fuzzy(0-159,0-2) fails == 1212823-1.html 1212823-1-ref.html
+fuzzy(0-93,0-8) == 1212823-2.html 1212823-2-ref.html
+== boxshadow-large-offset.html boxshadow-large-offset-ref.html
diff --git a/layout/reftests/box-shadow/tableboxshadow-basic-ref.html b/layout/reftests/box-shadow/tableboxshadow-basic-ref.html
new file mode 100644
index 0000000000..6a797820a2
--- /dev/null
+++ b/layout/reftests/box-shadow/tableboxshadow-basic-ref.html
@@ -0,0 +1 @@
+<div style="position: absolute; top: 33px; left: 33px; height: 300px; width: 600px; background-color: black;">s</div><table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 30px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table>
diff --git a/layout/reftests/box-shadow/tableboxshadow-basic.html b/layout/reftests/box-shadow/tableboxshadow-basic.html
new file mode 100644
index 0000000000..4601d636a8
--- /dev/null
+++ b/layout/reftests/box-shadow/tableboxshadow-basic.html
@@ -0,0 +1 @@
+<table border="0" cellpadding="0" cellspacing="0" style="box-shadow: 3px 3px black; position: absolute; top: 30px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table>
diff --git a/layout/reftests/box-shadow/tableboxshadow-tdshadow-ref.html b/layout/reftests/box-shadow/tableboxshadow-tdshadow-ref.html
new file mode 100644
index 0000000000..972d315ed5
--- /dev/null
+++ b/layout/reftests/box-shadow/tableboxshadow-tdshadow-ref.html
@@ -0,0 +1,5 @@
+<div style="width: 300px; height: 300px; position: absolute; top: 56px; left: 56px; background-color: rgba(0, 0, 0, 0.4);">s</div>
+
+<div style="width: 300px; height: 300px; position: absolute; top: 56px; left: 376px; background-color: rgba(0, 0, 0, 0.4);">s</div>
+
+<table border="0" cellpadding="0" cellspacing="20" style="position: absolute; top: 30px; left: 30px;"><tr><td style="background-color: green; width: 300px; height: 300px;">s</td><td style="background-color: green; width: 300px; height: 300px;">s</td></tr></table>
diff --git a/layout/reftests/box-shadow/tableboxshadow-tdshadow.html b/layout/reftests/box-shadow/tableboxshadow-tdshadow.html
new file mode 100644
index 0000000000..bc7abb8f0a
--- /dev/null
+++ b/layout/reftests/box-shadow/tableboxshadow-tdshadow.html
@@ -0,0 +1 @@
+<table border="0" cellpadding="0" cellspacing="20" style="position: absolute; top: 30px; left: 30px;"><tr><td style="background-color: green; box-shadow: 6px 6px rgba(0, 0, 0, 0.4); width: 300px; height: 300px;">s</td><td style="background-color: green; box-shadow: 6px 6px rgba(0, 0, 0, 0.4); width: 300px; height: 300px;">s</td></tr></table>
diff --git a/layout/reftests/box-shadow/tableboxshadow-trshadow-ref.html b/layout/reftests/box-shadow/tableboxshadow-trshadow-ref.html
new file mode 100644
index 0000000000..d337519480
--- /dev/null
+++ b/layout/reftests/box-shadow/tableboxshadow-trshadow-ref.html
@@ -0,0 +1,5 @@
+<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 330px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table>
+
+<div style="position: absolute; top: 33px; left: 33px; height: 300px; width: 600px; background-color: black;">s</div>
+
+<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 30px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table>
diff --git a/layout/reftests/box-shadow/tableboxshadow-trshadow.html b/layout/reftests/box-shadow/tableboxshadow-trshadow.html
new file mode 100644
index 0000000000..c928402122
--- /dev/null
+++ b/layout/reftests/box-shadow/tableboxshadow-trshadow.html
@@ -0,0 +1 @@
+<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 30px; left: 30px; background-color: green;"><tr style="box-shadow: 3px 3px black;"><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr><tr><td style="width: 300px; height: 300px;">s</td><td>s</td></tr></table>