diff --git a/layout/style/CSSNestingLowerer.cpp b/layout/style/CSSNestingLowerer.cpp
index 9340c4c5af..2dd45d58a9 100644
--- a/layout/style/CSSNestingLowerer.cpp
+++ b/layout/style/CSSNestingLowerer.cpp
@@ -395,6 +395,7 @@ private:
       case '[':
       case ':':
       case '&':
+      case '|':
       case '>':
       case '+':
       case '~':
diff --git a/layout/style/test/mochitest.ini b/layout/style/test/mochitest.ini
index 13d1b77acc..28b3ab8122 100644
--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -74,6 +74,7 @@ support-files = file_animations_with_disabled_properties.html
 [test_background_blend_mode.html]
 [test_basic_nesting_lowering.html]
 [test_nesting_lowering_parser_edges.html]
+[test_nesting_lowering_recovery.html]
 [test_box_size_keywords.html]
 [test_bug73586.html]
 [test_css_math_functions.html]
diff --git a/layout/style/test/test_nesting_lowering_recovery.html b/layout/style/test/test_nesting_lowering_recovery.html
new file mode 100644
index 0000000000..3e3184931f
--- /dev/null
+++ b/layout/style/test/test_nesting_lowering_recovery.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test CSS Nesting Lowering Recovery Paths</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<div id="recBase" class="rec-base"><span id="recBaseChild"></span></div>
+<div id="recMalformed" class="rec-malformed"></div>
+<div id="recGroup" class="rec-group"></div>
+<div id="recTail" class="rec-tail"></div>
+<pre id="standalone-log"></pre>
+<script>
+"use strict";
+
+function propOf(win, element, property) {
+  return win.getComputedStyle(element).getPropertyValue(property);
+}
+
+function appendTestSheet() {
+  var style = document.createElement("style");
+  style.textContent =
+    ".rec-base {\n" +
+    "  color: rgb(1, 2, 3);\n" +
+    "  |* {\n" +
+    "    color: rgb(4, 5, 6);\n" +
+    "  }\n" +
+    "  background-color: rgb(7, 8, 9);\n" +
+    "}\n" +
+    "\n" +
+    ".rec-malformed {\n" +
+    "  color: rgb(20, 21, 22);\n" +
+    "  : {\n" +
+    "    color: rgb(23, 24, 25);\n" +
+    "  }\n" +
+    "  border-top-style: solid;\n" +
+    "  border-top-color: rgb(26, 27, 28);\n" +
+    "}\n" +
+    "\n" +
+    ".rec-group {\n" +
+    "  color: rgb(32, 33, 34);\n" +
+    "  @counter-style rec-counter {\n" +
+    "    system: fixed;\n" +
+    "    symbols: a;\n" +
+    "  }\n" +
+    "  background-color: rgb(35, 36, 37);\n" +
+    "}\n" +
+    "\n" +
+    ".rec-tail {\n" +
+    "  color: rgb(50, 51, 52);\n" +
+    "}\n";
+  document.head.appendChild(style);
+  return style;
+}
+
+function runChecks(style, report) {
+  var recBase = document.getElementById("recBase");
+  var recBaseChild = document.getElementById("recBaseChild");
+  var recMalformed = document.getElementById("recMalformed");
+  var recGroup = document.getElementById("recGroup");
+  var recTail = document.getElementById("recTail");
+
+  report(propOf(window, recBase, "color") === "rgb(1, 2, 3)",
+         "unsupported nested selector should not wipe earlier declarations",
+         propOf(window, recBase, "color"),
+         "rgb(1, 2, 3)");
+  report(propOf(window, recBase, "background-color") === "rgb(7, 8, 9)",
+         "unsupported nested selector should not wipe later declarations",
+         propOf(window, recBase, "background-color"),
+         "rgb(7, 8, 9)");
+  report(propOf(window, recBaseChild, "color") === "rgb(1, 2, 3)",
+         "unsupported nested selector should not restyle descendants unexpectedly",
+         propOf(window, recBaseChild, "color"),
+         "rgb(1, 2, 3)");
+
+  report(propOf(window, recMalformed, "color") === "rgb(20, 21, 22)",
+         "malformed nested selector should keep declaration before it",
+         propOf(window, recMalformed, "color"),
+         "rgb(20, 21, 22)");
+  report(propOf(window, recMalformed, "border-top-color") === "rgb(26, 27, 28)",
+         "malformed nested selector should keep declaration after it",
+         propOf(window, recMalformed, "border-top-color"),
+         "rgb(26, 27, 28)");
+
+  report(propOf(window, recGroup, "color") === "rgb(32, 33, 34)",
+         "nested unsupported at-rule should keep declaration before it",
+         propOf(window, recGroup, "color"),
+         "rgb(32, 33, 34)");
+  report(propOf(window, recGroup, "background-color") === "rgb(35, 36, 37)",
+         "nested unsupported at-rule should keep declaration after it",
+         propOf(window, recGroup, "background-color"),
+         "rgb(35, 36, 37)");
+
+  report(propOf(window, recTail, "color") === "rgb(50, 51, 52)",
+         "rules after recovery scenarios should still parse",
+         propOf(window, recTail, "color"),
+         "rgb(50, 51, 52)");
+
+  report(style.sheet.cssRules.length >= 4,
+         "stylesheet should remain parseable after recovery scenarios",
+         String(style.sheet.cssRules.length),
+         ">= 4");
+}
+
+function runStandalone() {
+  var log = document.getElementById("standalone-log");
+  var lines = [
+    "Standalone mode.",
+    "This page only demonstrates nesting if layout.css.nesting.enabled is already true in the browser.",
+    ""
+  ];
+  var style = appendTestSheet();
+
+  runChecks(style, function(pass, message, actual, expected) {
+    lines.push((pass ? "PASS" : "FAIL") + ": " + message);
+    if (!pass) {
+      lines.push("  expected: " + expected);
+      lines.push("  actual:   " + actual);
+    }
+  });
+
+  log.textContent = lines.join("\n");
+}
+
+function runMochitest() {
+  SimpleTest.waitForExplicitFinish();
+  SpecialPowers.pushPrefEnv({
+    set: [["layout.css.nesting.enabled", true]]
+  }, function() {
+    var style = appendTestSheet();
+
+    runChecks(style, function(pass, message, actual, expected) {
+      ok(pass, message + " (expected: " + expected + ", actual: " + actual + ")");
+    });
+
+    SimpleTest.finish();
+  });
+}
+
+if (typeof SimpleTest !== "undefined" && typeof SpecialPowers !== "undefined") {
+  runMochitest();
+} else {
+  runStandalone();
+}
+</script>
+</body>
+</html>
