summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-parsing
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/css-parsing')
-rw-r--r--layout/reftests/css-parsing/at-rule-013-ref.html25
-rw-r--r--layout/reftests/css-parsing/at-rule-013.html68
-rw-r--r--layout/reftests/css-parsing/at-rule-error-handling-import-1.html5
-rw-r--r--layout/reftests/css-parsing/at-rule-error-handling-media-1.html5
-rw-r--r--layout/reftests/css-parsing/at-rule-error-handling-ref.html3
-rw-r--r--layout/reftests/css-parsing/green-ref.html2
-rw-r--r--layout/reftests/css-parsing/invalid-attr-1-ref.html15
-rw-r--r--layout/reftests/css-parsing/invalid-attr-1.html25
-rw-r--r--layout/reftests/css-parsing/invalid-font-face-descriptor-1-ref.html5
-rw-r--r--layout/reftests/css-parsing/invalid-font-face-descriptor-1.html10
-rw-r--r--layout/reftests/css-parsing/invalid-url-handling-ref.xhtml32
-rw-r--r--layout/reftests/css-parsing/invalid-url-handling.xhtml135
-rw-r--r--layout/reftests/css-parsing/moz-bool-pref.css22
-rw-r--r--layout/reftests/css-parsing/pseudo-elements-1-ref.html22
-rw-r--r--layout/reftests/css-parsing/pseudo-elements-1.html36
-rw-r--r--layout/reftests/css-parsing/reftest.list12
-rw-r--r--layout/reftests/css-parsing/supports-moz-bool-pref-1.html7
-rw-r--r--layout/reftests/css-parsing/supports-moz-bool-pref-2.html7
-rw-r--r--layout/reftests/css-parsing/supports-moz-bool-pref-3.html4
-rw-r--r--layout/reftests/css-parsing/two-dash-identifiers-ref.html12
-rw-r--r--layout/reftests/css-parsing/two-dash-identifiers.html22
21 files changed, 474 insertions, 0 deletions
diff --git a/layout/reftests/css-parsing/at-rule-013-ref.html b/layout/reftests/css-parsing/at-rule-013-ref.html
new file mode 100644
index 0000000000..6574ee5afe
--- /dev/null
+++ b/layout/reftests/css-parsing/at-rule-013-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!--
+ from the CSS 2.1 test suite,
+ http://test.csswg.org/suites/css2.1/20110111/html4/at-rule-013.htm
+
+ See ../css3-namespace/LICENSE .
+ -->
+<html>
+ <head>
+ <title>CSS Test: Ignoring at-rules inside @media blocks</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+ <style type="text/css">
+ p {
+ color: green;
+ background: transparent;
+ }
+ </style>
+ </head>
+ <body>
+ <p>This sentence must be green.</p>
+ <p>This sentence must be green.</p>
+ <p>This sentence must be green.</p>
+ <p>This sentence must be green.</p>
+ </body>
+</html>
diff --git a/layout/reftests/css-parsing/at-rule-013.html b/layout/reftests/css-parsing/at-rule-013.html
new file mode 100644
index 0000000000..fa8981f050
--- /dev/null
+++ b/layout/reftests/css-parsing/at-rule-013.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!--
+ from the CSS 2.1 test suite,
+ http://test.csswg.org/suites/css2.1/20110111/html4/at-rule-013.htm
+
+ See ../css3-namespace/LICENSE .
+ -->
+<html>
+ <head>
+ <title>CSS Test: Ignoring at-rules inside @media blocks</title>
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">
+ <link rel="help" href="http://www.w3.org/TR/CSS21/media.html#at-media-rule">
+ <meta name="flags" content="invalid">
+ <meta name="assert" content="At-rules inside @media blocks are ignored up to up to the end of the block that contains the invalid at-keyword, or up to and including the next semicolon (;) or up to and including the next block ({...}), whichever comes first.">
+ <style type="text/css">
+ p {
+ color: red;
+ background: red;
+ }
+ @media all {
+ #semicolon { background: transparent; }
+ @foo ] & | # $ % test-token \
+ [; # { background: red; } ]
+ (; #semicolon { background: red; } } } } )
+ '; #semicolon { background: red; } } } }',
+ "; #semicolon { background: red; }' } } }"
+ ;
+ #semicolon { color: green; }
+ }
+ @media all {
+ #block { background: transparent; }
+ @foo ] & | # $ % test-token \
+ [; #block { background: red; } ]
+ (; #block { background: red; } )
+ '; #block { background: red; }',
+ "; #block { background: red; }'"
+ {; #block { background: red; }
+ #block { background: red; } }
+ #block { color: green; }
+ }
+ @media all {
+ #eob { background: transparent; }
+ @import "support/import-red.css"
+ }
+ #eob {
+ color: green;
+ }
+ @media all {
+ #eob-complex { background: transparent; }
+ @import "support/import-red.css"
+ [; #eob-complex { background: red; } ]
+ (; #eob-complex { background: red; } )
+ '; #eob-complex { background: red; }',
+ "; #eob-complex { background: red; }'"
+ }
+ #eob-complex {
+ color: green;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="semicolon">This sentence must be green.</p>
+ <p id="block">This sentence must be green.</p>
+ <p id="eob">This sentence must be green.</p>
+ <p id="eob-complex">This sentence must be green.</p>
+ </body>
+</html>
diff --git a/layout/reftests/css-parsing/at-rule-error-handling-import-1.html b/layout/reftests/css-parsing/at-rule-error-handling-import-1.html
new file mode 100644
index 0000000000..5dc0acf945
--- /dev/null
+++ b/layout/reftests/css-parsing/at-rule-error-handling-import-1.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<title>Test for unexpected end of @import</title>
+<style>div { color: red }</style>
+<style>@import ; div { color: green; }</style>
+<div>This should be green</div>
diff --git a/layout/reftests/css-parsing/at-rule-error-handling-media-1.html b/layout/reftests/css-parsing/at-rule-error-handling-media-1.html
new file mode 100644
index 0000000000..349410129e
--- /dev/null
+++ b/layout/reftests/css-parsing/at-rule-error-handling-media-1.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<title>Test for unexpected end of @import</title>
+<style>div { color: red }</style>
+<style>@media ; div { color: green; }</style>
+<div>This should be green</div>
diff --git a/layout/reftests/css-parsing/at-rule-error-handling-ref.html b/layout/reftests/css-parsing/at-rule-error-handling-ref.html
new file mode 100644
index 0000000000..73458df754
--- /dev/null
+++ b/layout/reftests/css-parsing/at-rule-error-handling-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE HTML>
+<title>Test for unexpected end of @import (reference)</title>
+<div style="color: green">This should be green</div>
diff --git a/layout/reftests/css-parsing/green-ref.html b/layout/reftests/css-parsing/green-ref.html
new file mode 100644
index 0000000000..ebd2d860ce
--- /dev/null
+++ b/layout/reftests/css-parsing/green-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 100px; height: 100px; background: green"></div>
diff --git a/layout/reftests/css-parsing/invalid-attr-1-ref.html b/layout/reftests/css-parsing/invalid-attr-1-ref.html
new file mode 100644
index 0000000000..fce005c460
--- /dev/null
+++ b/layout/reftests/css-parsing/invalid-attr-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ p { color: green; }
+ </style>
+ <style>
+ div { color: green; }
+ </style>
+ </head>
+ <body>
+ <p>This text should be green.</p>
+ <div>This text should be green.</p>
+ </body>
+</html>
diff --git a/layout/reftests/css-parsing/invalid-attr-1.html b/layout/reftests/css-parsing/invalid-attr-1.html
new file mode 100644
index 0000000000..b418575bba
--- /dev/null
+++ b/layout/reftests/css-parsing/invalid-attr-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ p { color: red; }
+ [
+ p { color: red !important; }
+ p { color: red !important; }
+ ] p { color: red !important; }
+ p { color: green; }
+ </style>
+ <style>
+ div { color: red; }
+ :not([)
+ div { color: red !important; }
+ div { color: red !important; }
+ ]) div { color: red !important; }
+ div { color: green; }
+ </style>
+ </head>
+ <body>
+ <p>This text should be green.</p>
+ <div>This text should be green.</p>
+ </body>
+</html>
diff --git a/layout/reftests/css-parsing/invalid-font-face-descriptor-1-ref.html b/layout/reftests/css-parsing/invalid-font-face-descriptor-1-ref.html
new file mode 100644
index 0000000000..1e86fba7ea
--- /dev/null
+++ b/layout/reftests/css-parsing/invalid-font-face-descriptor-1-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<style>
+ body { color: green! important; }
+</style>
+There should be no red
diff --git a/layout/reftests/css-parsing/invalid-font-face-descriptor-1.html b/layout/reftests/css-parsing/invalid-font-face-descriptor-1.html
new file mode 100644
index 0000000000..43ab568f34
--- /dev/null
+++ b/layout/reftests/css-parsing/invalid-font-face-descriptor-1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+ body { color: red; }
+ @font-face {
+ src: url(bbb),
+ }
+
+ body { color: green! important; }
+</style>
+There should be no red
diff --git a/layout/reftests/css-parsing/invalid-url-handling-ref.xhtml b/layout/reftests/css-parsing/invalid-url-handling-ref.xhtml
new file mode 100644
index 0000000000..77dc50ba97
--- /dev/null
+++ b/layout/reftests/css-parsing/invalid-url-handling-ref.xhtml
@@ -0,0 +1,32 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: handling of invalid url() functions (reference)</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <style type="text/css">
+ div { background-color: green }
+ </style>
+ </head>
+ <body>
+ <div id="one">This should have a green background</div>
+ <div id="two">This should have a green background</div>
+ <div id="three">This should have a green background</div>
+ <div id="four">This should have a green background</div>
+ <div id="five">This should have a green background</div>
+ <div id="six">This should have a green background</div>
+ <div id="seven">This should have a green background</div>
+ <div id="eight">This should have a green background</div>
+ <div id="nine">This should have a green background</div>
+ <div id="ten">This should have a green background</div>
+ <div id="eleven">This should have a green background</div>
+ <div id="twelve">This should have a green background</div>
+ <div id="thirteen">This should have a green background</div>
+ <div id="fourteen">This should have a green background</div>
+ <div id="fifteen">This should have a green background</div>
+ <div id="sixteen">This should have a green background</div>
+ <div id="seventeen">This should have a green background</div>
+ <div id="eighteen">This should have a green background</div>
+ <div id="nineteen">This should have a green background</div>
+ </body>
+</html>
diff --git a/layout/reftests/css-parsing/invalid-url-handling.xhtml b/layout/reftests/css-parsing/invalid-url-handling.xhtml
new file mode 100644
index 0000000000..e6b85a81c9
--- /dev/null
+++ b/layout/reftests/css-parsing/invalid-url-handling.xhtml
@@ -0,0 +1,135 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: handling of invalid url() functions</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#tokenization" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors" />
+ <meta name="flags" content="invalid" />
+ <style type="text/css">
+ div { background-color: red }
+ </style>
+ <style type="text/css">
+ /* not a URI token, but handled according to rules for parsing errors */
+ #one { background: url(foo"bar") }
+ #one { background-color: green; }
+ </style>
+ <style type="text/css">
+ /* not a URI token, but handled according to rules for parsing errors */
+ #foo { background: url(foo"bar
+ ) }
+ #two { background-color: green; }
+ </style>
+ <style type="text/css">
+ /* not a URI token; bad-url token is consumed until the first closing ) */
+ #foo { background: url(foo"bar) }
+ #three { background-color: green; }
+ </style>
+ <style type="text/css">
+ /* 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: red; }
+ </style>
+ <style type="text/css">
+ /* not a URI token; the unterminated string ends at end of line, so
+ the brace never matches */
+ #five { background-color: green; }
+ #foo { background: url("bar) }
+ #five { background-color: red; }
+ </style>
+ <style type="text/css">
+ /* not a URI token; the unterminated string ends at end of line */
+ #foo { background: url("bar) }
+ ) }
+ #six { background-color: green; }
+ </style>
+ <style type="text/css">
+ /* not a URI token, but brace matching should work */
+ #seven { background: url(()); background-color: green; }
+ </style>
+ <style type="text/css">
+ /* not a URI token, but brace matching should work */
+ #eight { background: url([{}]); background-color: green; }
+ </style>
+ <style type="text/css">
+ /* not a URI token, but brace matching should work */
+ #nine { background: url([)]); background-color: green; }
+ </style>
+ <style type="text/css">
+ /* perfectly good URI token (image is a 404, though) */
+ #ten { background: url({) green; }
+ </style>
+ <style type="text/css">
+ /* perfectly good URI token (image is a 404, though) */
+ #eleven { background: url([) green; }
+ </style>
+ <style type="text/css">
+ /* 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; bad-url token is consumed until the first closing ) */
+ #foo { background: url(() }
+ #fourteen { background-color: green; }
+ </style>
+ <!-- The next three tests test that invalid URI tokens absorb [ and { -->
+ <style type="text/css">
+ #foo { background: url(a()); }
+ #fifteen { background-color: green }
+ </style>
+ <style type="text/css">
+ #foo { background: url([()); }
+ #sixteen { background-color: green }
+ </style>
+ <style type="text/css">
+ #foo { background: url({()); }
+ #seventeen { background-color: green }
+ </style>
+ <!-- Test that url() starting with a quote and without its closing ')' eaten
+ by any of the tokens that come after the initial quote doesn't eat the rest of
+ the stylesheet. In particular, this checks whether, once we reach the end of
+ the string and discover garbage after it, we tokenize the garbage or just skip
+ to the nearest ')'. -->
+ <style type="text/css">
+ #eighteen { background-color: red; }
+ #foo { background: url('('')'); }
+ #eighteen { background-color: green; }
+ </style>
+ <!-- And the same thing with double quotes -->
+ <style type="text/css">
+ #nineteen { background-color: red; }
+ #foo { background: url("("')'); }
+ #nineteen { background-color: green; }
+ </style>
+ </head>
+ <body>
+ <div id="one">This should have a green background</div>
+ <div id="two">This should have a green background</div>
+ <div id="three">This should have a green background</div>
+ <div id="four">This should have a green background</div>
+ <div id="five">This should have a green background</div>
+ <div id="six">This should have a green background</div>
+ <div id="seven">This should have a green background</div>
+ <div id="eight">This should have a green background</div>
+ <div id="nine">This should have a green background</div>
+ <div id="ten">This should have a green background</div>
+ <div id="eleven">This should have a green background</div>
+ <div id="twelve">This should have a green background</div>
+ <div id="thirteen">This should have a green background</div>
+ <div id="fourteen">This should have a green background</div>
+ <div id="fifteen">This should have a green background</div>
+ <div id="sixteen">This should have a green background</div>
+ <div id="seventeen">This should have a green background</div>
+ <div id="eighteen">This should have a green background</div>
+ <div id="nineteen">This should have a green background</div>
+ </body>
+</html>
diff --git a/layout/reftests/css-parsing/moz-bool-pref.css b/layout/reftests/css-parsing/moz-bool-pref.css
new file mode 100644
index 0000000000..625906df34
--- /dev/null
+++ b/layout/reftests/css-parsing/moz-bool-pref.css
@@ -0,0 +1,22 @@
+#test {
+ width: 100px;
+ height: 100px;
+}
+
+.enabled {
+ background: red;
+}
+
+.disabled {
+ background: green;
+}
+
+@supports -moz-bool-pref("testing.supports.moz-bool-pref") {
+ .enabled {
+ background: green;
+ }
+
+ .disabled {
+ background: red;
+ }
+}
diff --git a/layout/reftests/css-parsing/pseudo-elements-1-ref.html b/layout/reftests/css-parsing/pseudo-elements-1-ref.html
new file mode 100644
index 0000000000..df626f9c68
--- /dev/null
+++ b/layout/reftests/css-parsing/pseudo-elements-1-ref.html
@@ -0,0 +1,22 @@
+<!doctype html><style>
+ div { color: green; float: left }
+</style><div
+><div>T</div
+><div>h</div
+><div>e</div
+><div>r</div
+><div>e</div
+><div>s</div
+><div>h</div
+><div>o</div
+><div>u</div
+><div>l</div
+><div>d</div
+><div>b</div
+><div>e</div
+><div>n</div
+><div>o</div
+><div>r</div
+><div>e</div
+><div>d</div
+></div>
diff --git a/layout/reftests/css-parsing/pseudo-elements-1.html b/layout/reftests/css-parsing/pseudo-elements-1.html
new file mode 100644
index 0000000000..43690f862e
--- /dev/null
+++ b/layout/reftests/css-parsing/pseudo-elements-1.html
@@ -0,0 +1,36 @@
+<!doctype html><style>
+ div { float: left }
+ /* Pseudo elements can appear only at the end of the selector. */
+ .good { color: red }
+ .bad { color: green }
+ #good1::first-letter { color: green }
+ #good2::first-letter, #good3 { color: green }
+ #good4, #good5::first-letter { color: green }
+ div > #good6::first-letter, #good7 { color:green }
+ div #good7 > ::first-letter, #good8 { color:green }
+
+ #bad1::first-letter *, #bad2 { color: red }
+ #bad4, #bad3::first-letter * { color: red }
+ div::first-line #bad5, #bad6 { color: red }
+ #bad7, div::first-line #bad8 { color: red }
+ #bad9, div ::first-line>#bad10 { color:red }
+</style><div
+><div class="good" id="good1">T</div
+><div class="good" id="good2">h</div
+><div class="good" id="good3">e</div
+><div class="good" id="good4">r</div
+><div class="good" id="good5">e</div
+><div class="good" id="good6">s</div
+><div class="good" id="good7">h</div
+><div class="good" id="good8">o</div
+><div class="bad" id="bad1" >u</div
+><div class="bad" id="bad2" >l</div
+><div class="bad" id="bad3" >d</div
+><div class="bad" id="bad4" >b</div
+><div class="bad" id="bad5" >e</div
+><div class="bad" id="bad6" >n</div
+><div class="bad" id="bad7" >o</div
+><div class="bad" id="bad8" >r</div
+><div class="bad" id="bad9" >e</div
+><div class="bad" id="bad10">d</div
+></div>
diff --git a/layout/reftests/css-parsing/reftest.list b/layout/reftests/css-parsing/reftest.list
new file mode 100644
index 0000000000..774186e0b9
--- /dev/null
+++ b/layout/reftests/css-parsing/reftest.list
@@ -0,0 +1,12 @@
+== at-rule-013.html at-rule-013-ref.html
+== invalid-url-handling.xhtml invalid-url-handling-ref.xhtml
+== pseudo-elements-1.html pseudo-elements-1-ref.html
+== invalid-attr-1.html invalid-attr-1-ref.html
+== at-rule-error-handling-import-1.html at-rule-error-handling-ref.html
+== at-rule-error-handling-media-1.html at-rule-error-handling-ref.html
+== invalid-font-face-descriptor-1.html invalid-font-face-descriptor-1-ref.html
+== two-dash-identifiers.html two-dash-identifiers-ref.html
+
+test-pref(testing.supports.moz-bool-pref,true) == supports-moz-bool-pref-1.html green-ref.html
+test-pref(testing.supports.moz-bool-pref,false) == supports-moz-bool-pref-2.html green-ref.html
+test-pref(testing.supports.moz-bool-pref,true) == supports-moz-bool-pref-3.html green-ref.html
diff --git a/layout/reftests/css-parsing/supports-moz-bool-pref-1.html b/layout/reftests/css-parsing/supports-moz-bool-pref-1.html
new file mode 100644
index 0000000000..80b2f27c4f
--- /dev/null
+++ b/layout/reftests/css-parsing/supports-moz-bool-pref-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<!-- The query part here is necessary because chrome stylesheets are
+ cached after first parse, so the -moz-bool-pref() wouldn't be
+ re-evaluated if we use the same url as the other test. -->
+<link rel="stylesheet" href="chrome://reftest/content/moz-bool-pref.css?1">
+<!-- testing.supports.moz-bool-pref = true -->
+<div id="test" class="enabled"></div>
diff --git a/layout/reftests/css-parsing/supports-moz-bool-pref-2.html b/layout/reftests/css-parsing/supports-moz-bool-pref-2.html
new file mode 100644
index 0000000000..324cd0d585
--- /dev/null
+++ b/layout/reftests/css-parsing/supports-moz-bool-pref-2.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<!-- The query part here is necessary because chrome stylesheets are
+ cached after first parse, so the -moz-bool-pref() wouldn't be
+ re-evaluated if we use the same url as the other test. -->
+<link rel="stylesheet" href="chrome://reftest/content/moz-bool-pref.css?2">
+<!-- testing.supports.moz-bool-pref = false -->
+<div id="test" class="disabled"></div>
diff --git a/layout/reftests/css-parsing/supports-moz-bool-pref-3.html b/layout/reftests/css-parsing/supports-moz-bool-pref-3.html
new file mode 100644
index 0000000000..b8dc055193
--- /dev/null
+++ b/layout/reftests/css-parsing/supports-moz-bool-pref-3.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="moz-bool-pref.css">
+<!-- not valid outside chrome / ua stylesheets -->
+<div id="test" class="disabled"></div>
diff --git a/layout/reftests/css-parsing/two-dash-identifiers-ref.html b/layout/reftests/css-parsing/two-dash-identifiers-ref.html
new file mode 100644
index 0000000000..b6ffdbb01e
--- /dev/null
+++ b/layout/reftests/css-parsing/two-dash-identifiers-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+ div { color: green; }
+</style>
+<div>This should be green.</div>
+<div>This should be green.</div>
+<div>This should be green.</div>
+<div>This should be green.</div>
+<div>This should be green.</div>
+<div>This should be green.</div>
+<div>This should be green.</div>
+<div>This should be green.</div>
diff --git a/layout/reftests/css-parsing/two-dash-identifiers.html b/layout/reftests/css-parsing/two-dash-identifiers.html
new file mode 100644
index 0000000000..9ea7854b92
--- /dev/null
+++ b/layout/reftests/css-parsing/two-dash-identifiers.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+ .ok { color: red; }
+ #-- { color: green; }
+ #-foo { color: green }
+ #--foo { color: green; }
+ .-- { color: green; }
+ .-foo { color: green; }
+ .--foo { color: green; }
+
+ .fail { color: green; }
+ #- { color: red; }
+ .- { color: red; }
+</style>
+<div class="ok" id="--">This should be green.</div>
+<div class="ok" id="-foo">This should be green.</div>
+<div class="ok" id="--foo">This should be green.</div>
+<div class="ok --">This should be green.</div>
+<div class="ok -foo">This should be green.</div>
+<div class="ok --foo">This should be green.</div>
+<div class="fail" id="-">This should be green.</div>
+<div class="fail -">This should be green.</div>