diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-1.html b/mozilla/layout/html/tests/style/bugs/bug302186-1.html
new file mode 100644
index 00000000000..52ae3270240
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+</head>
+
+<body>
+<form>
+<div>
+  <input type="image"><span>There should be no red.</span>
+</div>
+<div>
+  <input type="image"><span class="reverse">There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-10.html b/mozilla/layout/html/tests/style/bugs/bug302186-10.html
new file mode 100644
index 00000000000..3aa9d4df517
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-10.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+</head>
+
+<body onload='var div1 = document.getElementById("div1");
+              var inputs = div1.getElementsByTagName("input");
+              var firstElement = div1.removeChild(inputs[0]);
+              var div2 = document.getElementById("div2");
+              inputs = div2.getElementsByTagName("input");
+              var secondElement = div2.removeChild(inputs[0]);
+              div1.insertBefore(secondElement, div1.firstChild);
+              div2.insertBefore(firstElement, div2.firstChild);
+'>
+<form>
+<div id="div1">
+  <input type="submit" id="foo1"><span>There should be no red.</span>
+</div>
+<div id="div2">
+  <input type="submit" id="foo2"><span class="reverse">There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-11.html b/mozilla/layout/html/tests/style/bugs/bug302186-11.html
new file mode 100644
index 00000000000..dc020170886
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-11.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+</head>
+
+<body onload='var div1 = document.getElementById("div1");
+              var inputs = div1.getElementsByTagName("input");
+              var firstElement = div1.removeChild(inputs[0]);
+              var div2 = document.getElementById("div2");
+              inputs = div2.getElementsByTagName("input");
+              var secondElement = div2.removeChild(inputs[0]);
+              div1.insertBefore(secondElement, div1.firstChild);
+              div2.insertBefore(firstElement, div2.firstChild);
+'>
+<form>
+<div id="div1">
+  <input type="image" id="foo1"><span>There should be no red.</span>
+</div>
+<div id="div2">
+  <input type="image" id="foo2"><span class="reverse">There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-12.html b/mozilla/layout/html/tests/style/bugs/bug302186-12.html
new file mode 100644
index 00000000000..8b4fd5de23d
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-12.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+
+<body onload='document.getElementById("foo").setAttribute("type", "button");'>
+<form>
+<div>
+  <input type="image" checked="checked" id="foo"></button>
+  <span class="reverse">There should be no red.</span>
+</div>
+<div>
+  <input type="image"></button><span>There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-13.html b/mozilla/layout/html/tests/style/bugs/bug302186-13.html
new file mode 100644
index 00000000000..aec5884ab0a
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-13.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+button { display: none }
+</style>
+
+<body onload='document.getElementById("foo").setAttribute("type", "submit");'>
+<form>
+<div>
+  <button type="button" id="foo"></button>
+  <span>There should be no red.</span>
+</div>
+<div>
+  <button type="submit"></button><span class="reverse">There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-14.html b/mozilla/layout/html/tests/style/bugs/bug302186-14.html
new file mode 100644
index 00000000000..972dde8e4e7
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-14.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+
+<body onload='document.getElementById("foo").setAttribute("type", "submit");'>
+<form>
+<div>
+  <input type="button" id="foo"></button>
+  <span>There should be no red.</span>
+</div>
+<div>
+  <input type="submit"></button><span class="reverse">There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-15.html b/mozilla/layout/html/tests/style/bugs/bug302186-15.html
new file mode 100644
index 00000000000..b9626afc6f8
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-15.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+
+<body onload='var newSubmit = document.createElement("input");
+              newSubmit.setAttribute("type", "submit");
+              var div1 = document.getElementById("div1");
+              div1.insertBefore(newSubmit, div1.firstChild);'>
+<form>
+<div id="div1">
+  <span>There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-16.html b/mozilla/layout/html/tests/style/bugs/bug302186-16.html
new file mode 100644
index 00000000000..c2dc7e9d9c0
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-16.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+
+<body onload='var newSubmit = document.createElement("input");
+              newSubmit.setAttribute("type", "image");
+              var div1 = document.getElementById("div1");
+              div1.insertBefore(newSubmit, div1.firstChild);'>
+<form>
+<div id="div1">
+  <span>There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-2.html b/mozilla/layout/html/tests/style/bugs/bug302186-2.html
new file mode 100644
index 00000000000..d3def2584c9
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+</head>
+<body onload='var but = document.createElement("input");
+              but.setAttribute("type", "submit");
+              var div1 = document.getElementById("div1");
+              div1.insertBefore(but, div1.firstChild);'>
+<form>
+<div id="div1">
+  <span>There should be no red.</span>
+</div>
+<div>
+  <input type="submit"><span class="reverse">There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-3.html b/mozilla/layout/html/tests/style/bugs/bug302186-3.html
new file mode 100644
index 00000000000..c592d457154
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-3.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+</head>
+<body onload='var but = document.createElement("input");
+              but.setAttribute("type", "submit");
+              var div1 = document.getElementById("div1");
+              div1.insertBefore(but, div1.firstChild);'>
+<form>
+<div>
+  <input type="submit"><span>There should be no red.</span>
+</div>
+<div id="div1">
+  <span class="reverse">There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-4.html b/mozilla/layout/html/tests/style/bugs/bug302186-4.html
new file mode 100644
index 00000000000..e3d6cce6887
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-4.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+</head>
+
+<body onload='var but = document.createElement("input");
+              but.setAttribute("type", "image");
+              var div1 = document.getElementById("div1");
+              div1.insertBefore(but, div1.firstChild);'>
+<form>
+<div id="div1">
+  <span>There should be no red.</span>
+</div>
+<div>
+  <input type="image" id="foo"><span class="reverse">There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-5.html b/mozilla/layout/html/tests/style/bugs/bug302186-5.html
new file mode 100644
index 00000000000..c0012fc30a9
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-5.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+</head>
+
+<body onload='var but = document.createElement("input");
+              but.setAttribute("type", "image");
+              var div1 = document.getElementById("div1");
+              div1.insertBefore(but, div1.firstChild);'>
+<form>
+<div>
+  <input type="image"><span>There should be no red.</span>
+</div>
+<div id="div1">
+  <span class="reverse">There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-6.html b/mozilla/layout/html/tests/style/bugs/bug302186-6.html
new file mode 100644
index 00000000000..92c83ecb6a2
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-6.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+</head>
+
+<body onload='var div1 = document.getElementById("div1");
+              var inputs = div1.getElementsByTagName("input");
+              div1.removeChild(inputs[0]);'>
+<form>
+<div id="div1">
+  <input type="submit"><span class="reverse">There should be no red.</span>
+</div>
+<div>
+  <input type="submit"><span>There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-7.html b/mozilla/layout/html/tests/style/bugs/bug302186-7.html
new file mode 100644
index 00000000000..88eb55efbed
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-7.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+</head>
+
+<body onload='var div2 = document.getElementById("div2");
+              var inputs = div2.getElementsByTagName("input");
+              div2.removeChild(inputs[0]);'>
+<form>
+<div id="div1">
+  <input type="submit"><span>There should be no red.</span>
+</div>
+<div id="div2">
+  <input type="submit"><span class="reverse">There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-8.html b/mozilla/layout/html/tests/style/bugs/bug302186-8.html
new file mode 100644
index 00000000000..3381908ffdb
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-8.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+</head>
+
+<body onload='var div1 = document.getElementById("div1");
+              var inputs = div1.getElementsByTagName("input");
+              div1.removeChild(inputs[0]);'>
+<form>
+<div id="div1">
+  <input type="image"><span class="reverse">There should be no red.</span>
+</div>
+<div>
+  <input type="image"><span>There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/bug302186-9.html b/mozilla/layout/html/tests/style/bugs/bug302186-9.html
new file mode 100644
index 00000000000..f37a0955311
--- /dev/null
+++ b/mozilla/layout/html/tests/style/bugs/bug302186-9.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+span { color: red }
+:default + span { color: green }
+span.reverse { color: green }
+:default + span.reverse { color: red }
+input { display: none }
+</style>
+</head>
+
+<body onload='var div2 = document.getElementById("div2");
+              var inputs = div2.getElementsByTagName("input");
+              div2.removeChild(inputs[0]);'>
+<form>
+<div id="div1">
+  <input type="image"><span>There should be no red.</span>
+</div>
+<div id="div2">
+  <input type="image"><span class="reverse">There should be no red.</span>
+</div>
+</form>
+</body>
+</html>
diff --git a/mozilla/layout/html/tests/style/bugs/rtest.lst b/mozilla/layout/html/tests/style/bugs/rtest.lst
index f1e03245a5d..0bd870d94b3 100644
--- a/mozilla/layout/html/tests/style/bugs/rtest.lst
+++ b/mozilla/layout/html/tests/style/bugs/rtest.lst
@@ -4,6 +4,22 @@ bug273719.html
 bug84400-1.html
 bug84400-2.html
 bug84400-3.html
+bug302186-1.html
+bug302186-2.html
+bug302186-3.html
+bug302186-4.html
+bug302186-5.html
+bug302186-6.html
+bug302186-7.html
+bug302186-8.html
+bug302186-9.html
+bug302186-10.html
+bug302186-11.html
+bug302186-12.html
+bug302186-13.html
+bug302186-14.html
+bug302186-15.html
+bug302186-16.html
 bug348809-1.html
 bug348809-2.html
 bug348809-3.html
