diff --git a/devtools/shared/css/lexer.js b/devtools/shared/css/lexer.js
index 9013b63ea..192fa95b3 100644
--- a/devtools/shared/css/lexer.js
+++ b/devtools/shared/css/lexer.js
@@ -1067,6 +1067,7 @@ Scanner.prototype = {
     // aToken.mIdent may be "url" at this point; clear that out
     aToken.mIdent.length = 0;
 
+    let hasString = false;
     let ch = this.Peek();
     // Do we have a string?
     if (ch == QUOTATION_MARK || ch == APOSTROPHE) {
@@ -1075,6 +1076,7 @@ Scanner.prototype = {
         aToken.mType = eCSSToken_Bad_URL;
         return;
       }
+      hasString = true;
     } else {
       // Otherwise, this is the start of a non-quoted url (which may be empty).
       aToken.mSymbol = 0;
@@ -1093,6 +1095,25 @@ Scanner.prototype = {
       }
     } else {
       aToken.mType = eCSSToken_Bad_URL;
+      if (!hasString) {
+        // Consume until before the next right parenthesis, which follows
+        // how <bad-url-token> is consumed in CSS Syntax 3 spec.
+        // Note that, we only do this when "url(" is not followed by a
+        // string, because in the spec, "url(" followed by a string is
+        // handled as a url function rather than a <url-token>, so the
+        // rest of content before ")" should be consumed in balance,
+        // which will be done by the parser.
+        // The closing ")" is not consumed here. It is left to the parser
+        // so that the parser can handle both cases.
+        do {
+          if (IsVertSpace(ch)) {
+            this.AdvanceLine();
+          } else {
+            this.Advance();
+          }
+          ch = this.Peek();
+        } while (ch >= 0 && ch != RIGHT_PARENTHESIS);
+      }
     }
   },
 
diff --git a/devtools/shared/tests/unit/test_csslexer.js b/devtools/shared/tests/unit/test_csslexer.js
index 35855640b..b2dfdf5aa 100644
--- a/devtools/shared/tests/unit/test_csslexer.js
+++ b/devtools/shared/tests/unit/test_csslexer.js
@@ -128,8 +128,7 @@ var LEX_TESTS = [
              ["url:http://example.com"]],
   // In CSS Level 3, this is an ordinary URL, not a BAD_URL.
   ["url(http://example.com", ["url:http://example.com"]],
-  // See bug 1153981 to understand why this gets a SYMBOL token.
-  ["url(http://example.com @", ["bad_url:http://example.com", "symbol:@"]],
+  ["url(http://example.com @", ["bad_url:http://example.com"]],
   ["quo\\ting", ["ident:quoting"]],
   ["'bad string\n", ["bad_string:bad string", "whitespace"]],
   ["~=", ["includes"]],
diff --git a/layout/reftests/css-parsing/invalid-url-handling.xhtml b/layout/reftests/css-parsing/invalid-url-handling.xhtml
index da1709b01..e6b85a81c 100644
--- a/layout/reftests/css-parsing/invalid-url-handling.xhtml
+++ b/layout/reftests/css-parsing/invalid-url-handling.xhtml
@@ -22,17 +22,16 @@
   #two { background-color: green; }
   </style>
   <style type="text/css">
-  /* not a URI token; the unterminated string ends at end of line, so
-     the brace never matches */
-  #three { background-color: green; }
+  /* not a URI token; bad-url token is consumed until the first closing ) */
   #foo { background: url(foo"bar) }
-  #three { background-color: red; }
+  #three { background-color: green; }
   </style>
   <style type="text/css">
-  /* not a URI token; the unterminated string ends at end of line */
+  /* not a URI token; bad-url token is consumed until the first closing ) */
+  #four { background-color: green; }
   #foo { background: url(foo"bar) }
   ) }
-  #four { background-color: green; }
+  #four { background-color: red; }
   </style>
   <style type="text/css">
   /* not a URI token; the unterminated string ends at end of line, so
@@ -68,18 +67,19 @@
   #eleven { background: url([) green; }
   </style>
   <style type="text/css">
-  /* not a URI token; brace matching should work only after invalid URI token */
-  #twelve { background: url(}{""{)}); background-color: green; }
+  /* not a URI token; bad-url token is consumed until the first closing )
+     so the brace immediately after it closes the declaration block */
+  #twelve { background-color: green; }
+  #twelve { background: url(}{""{)}); background-color: red; }
   </style>
   <style type="text/css">
   /* invalid URI token absorbs the [ */
   #thirteen { background: url([""); background-color: green; }
   </style>
   <style type="text/css">
-  /* not a URI token; the opening ( is never matched */
-  #fourteen { background-color: green; }
+  /* not a URI token; bad-url token is consumed until the first closing ) */
   #foo { background: url(() }
-  #fourteen { background-color: red; }
+  #fourteen { background-color: green; }
   </style>
   <!-- The next three tests test that invalid URI tokens absorb [ and { -->
   <style type="text/css">
diff --git a/layout/style/nsCSSScanner.cpp b/layout/style/nsCSSScanner.cpp
index 771c8936b..2110be78c 100644
--- a/layout/style/nsCSSScanner.cpp
+++ b/layout/style/nsCSSScanner.cpp
@@ -1164,6 +1164,7 @@ nsCSSScanner::NextURL(nsCSSToken& aToken)
   // aToken.mIdent may be "url" at this point; clear that out
   aToken.mIdent.Truncate();
 
+  bool hasString = false;
   int32_t ch = Peek();
   // Do we have a string?
   if (ch == '"' || ch == '\'') {
@@ -1173,7 +1174,7 @@ nsCSSScanner::NextURL(nsCSSToken& aToken)
       return;
     }
     MOZ_ASSERT(aToken.mType == eCSSToken_String, "unexpected token type");
-
+    hasString = true;
   } else {
     // Otherwise, this is the start of a non-quoted url (which may be empty).
     aToken.mSymbol = char16_t(0);
@@ -1193,6 +1194,25 @@ nsCSSScanner::NextURL(nsCSSToken& aToken)
   } else {
     mSeenBadToken = true;
     aToken.mType = eCSSToken_Bad_URL;
+    if (!hasString) {
+      // Consume until before the next right parenthesis, which follows
+      // how <bad-url-token> is consumed in CSS Syntax 3 spec.
+      // Note that, we only do this when "url(" is not followed by a
+      // string, because in the spec, "url(" followed by a string is
+      // handled as a url function rather than a <url-token>, so the
+      // rest of content before ")" should be consumed in balance,
+      // which will be done by the parser.
+      // The closing ")" is not consumed here. It is left to the parser
+      // so that the parser can handle both cases.
+      do {
+        if (IsVertSpace(ch)) {
+          AdvanceLine();
+        } else {
+          Advance();
+        }
+        ch = Peek();
+      } while (ch >= 0 && ch != ')');
+    }
   }
 }
 
diff --git a/layout/style/test/test_csslexer.js b/layout/style/test/test_csslexer.js
index a71c02d8f..4ba3b9c5c 100644
--- a/layout/style/test/test_csslexer.js
+++ b/layout/style/test/test_csslexer.js
@@ -55,8 +55,7 @@ var LEX_TESTS = [
              ["url:http://example.com"]],
   // In CSS Level 3, this is an ordinary URL, not a BAD_URL.
   ["url(http://example.com", ["url:http://example.com"]],
-  // See bug 1153981 to understand why this gets a SYMBOL token.
-  ["url(http://example.com @", ["bad_url:http://example.com", "symbol:@"]],
+  ["url(http://example.com @", ["bad_url:http://example.com"]],
   ["quo\\ting", ["ident:quoting"]],
   ["'bad string\n", ["bad_string:bad string", "whitespace"]],
   ["~=", ["includes"]],