diff --git a/layout/reftests/generated-content/reftest.list b/layout/reftests/generated-content/reftest.list
index 7be05edd025d..f0082cc2b9db 100644
--- a/layout/reftests/generated-content/reftest.list
+++ b/layout/reftests/generated-content/reftest.list
@@ -17,3 +17,4 @@ fuzzy-if(OSX==1010,1,10) == quotes-001.xml quotes-001-ref.xml
 fuzzy-if(OSX==1010,1,10) == table-ignoring-whitespace-01.html table-ignoring-whitespace-01-ref.html
 fuzzy-if(OSX==1010,1,10) == table-parts-01.html table-parts-01-ref.html
 == before-style-sharing.html before-style-sharing-ref.html
+== transitive-style-invalidation.html transitive-style-invalidation-ref.html
diff --git a/layout/reftests/generated-content/transitive-style-invalidation-ref.html b/layout/reftests/generated-content/transitive-style-invalidation-ref.html
new file mode 100644
index 000000000000..cf2f70914983
--- /dev/null
+++ b/layout/reftests/generated-content/transitive-style-invalidation-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<style>
+.foo > div::before {
+  display: block;
+  width: 100px;
+  height: 100px;
+  background: green;
+  content: "";
+}
+</style>
+<div class="foo">
+  <div>
+  </div>
+</div>
+<script>
+onload = function() {
+  document.querySelector('.foo').className = 'foo bar';
+}
+</script>
diff --git a/layout/reftests/generated-content/transitive-style-invalidation.html b/layout/reftests/generated-content/transitive-style-invalidation.html
new file mode 100644
index 000000000000..7972b6ea4501
--- /dev/null
+++ b/layout/reftests/generated-content/transitive-style-invalidation.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<style>
+.foo > div::before {
+  display: block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  content: "";
+}
+.foo.bar > div::before {
+  background: green;
+}
+</style>
+<div class="foo">
+  <div>
+  </div>
+</div>
+<script>
+onload = function() {
+  document.querySelector('.foo').className = 'foo bar';
+}
+</script>
