Add m-esr52 at 52.6.0

117 files changed, 1277 insertions, 0 deletions

diff --git a/layout/reftests/scoped-style/reftest-stylo.list b/layout/reftests/scoped-style/reftest-stylo.list
new file mode 100644
index 000000000..52e136b94
--- /dev/null
+++ b/layout/reftests/scoped-style/reftest-stylo.list
@@ -0,0 +1,58 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== scoped-style-001.html scoped-style-001.html
+== scoped-style-002.html scoped-style-002.html
+== scoped-style-003.html scoped-style-003.html
+== scoped-style-004.html scoped-style-004.html
+== scoped-style-005.html scoped-style-005.html
+== scoped-style-006.html scoped-style-006.html
+== scoped-style-007.html scoped-style-007.html
+== scoped-style-008.html scoped-style-008.html
+== scoped-style-009.html scoped-style-009.html
+== scoped-style-010.html scoped-style-010.html
+== scoped-style-011.html scoped-style-011.html
+== scoped-style-012.html scoped-style-012.html
+== scoped-style-013.html scoped-style-013.html
+== scoped-style-014.html scoped-style-014.html
+== scoped-style-015.html scoped-style-015.html
+== scoped-style-016.html scoped-style-016.html
+== scoped-style-017.html scoped-style-017.html
+== scoped-style-018.html scoped-style-018.html
+== scoped-style-019.svg scoped-style-019.svg
+== scoped-style-020.html scoped-style-020.html
+== scoped-style-021.html scoped-style-021.html
+== scoped-style-022.html scoped-style-022.html
+== scoped-style-023.html scoped-style-023.html
+== scoped-style-024.html scoped-style-024.html
+skip == scoped-style-important-001.html scoped-style-important-001.html
+== scoped-style-important-002.html scoped-style-important-002.html
+== scoped-style-important-003.html scoped-style-important-003.html
+== scoped-style-important-004.html scoped-style-important-004.html
+== scoped-style-important-005.html scoped-style-important-005.html
+== scoped-style-important-006.html scoped-style-important-006.html
+== scoped-style-important-007.html scoped-style-important-007.html
+== scoped-style-dynamic-001.html scoped-style-dynamic-001.html
+== scoped-style-dynamic-002.html scoped-style-dynamic-002.html
+== scoped-style-dynamic-003.html scoped-style-dynamic-003.html
+== scoped-style-dynamic-004.html scoped-style-dynamic-004.html
+== scoped-style-dynamic-005.html scoped-style-dynamic-005.html
+== scoped-style-dynamic-006.html scoped-style-dynamic-006.html
+== scoped-style-dynamic-007.html scoped-style-dynamic-007.html
+== scoped-style-dynamic-008.html scoped-style-dynamic-008.html
+== scoped-style-dynamic-009.html scoped-style-dynamic-009.html
+== scoped-style-dynamic-010.html scoped-style-dynamic-010.html
+== scoped-style-dynamic-011.html scoped-style-dynamic-011.html
+== scoped-style-dynamic-012.svg scoped-style-dynamic-012.svg
+== scoped-style-dynamic-013.svg scoped-style-dynamic-013.svg
+== scoped-style-dynamic-014.svg scoped-style-dynamic-014.svg
+== scoped-style-dynamic-015.svg scoped-style-dynamic-015.svg
+== scoped-style-import.html scoped-style-import.html
+== scoped-style-media.html scoped-style-media.html
+== scoped-style-namespace.html scoped-style-namespace.html
+== scoped-style-charset.html scoped-style-charset.html
+== scoped-style-document.html scoped-style-document.html
+HTTP(..) == scoped-style-font-face.html scoped-style-font-face.html
+== scoped-style-keyframes.html scoped-style-keyframes.html
+== scoped-style-supports.html scoped-style-supports.html
+pref(layout.css.scope-pseudo.enabled,true) == scoped-style-pseudo-001.html scoped-style-pseudo-001.html
+pref(layout.css.scope-pseudo.enabled,true) == scoped-style-pseudo-002.html scoped-style-pseudo-002.html
+pref(layout.css.scope-pseudo.enabled,true) == scoped-style-pseudo-003.html scoped-style-pseudo-003.html
diff --git a/layout/reftests/scoped-style/reftest.list b/layout/reftests/scoped-style/reftest.list
new file mode 100644
index 000000000..e1eba9544
--- /dev/null
+++ b/layout/reftests/scoped-style/reftest.list
@@ -0,0 +1,57 @@
+== scoped-style-001.html scoped-style-001-ref.html
+== scoped-style-002.html scoped-style-002-ref.html
+== scoped-style-003.html scoped-style-003-ref.html
+== scoped-style-004.html scoped-style-004-ref.html
+== scoped-style-005.html scoped-style-005-ref.html
+== scoped-style-006.html scoped-style-006-ref.html
+== scoped-style-007.html scoped-style-007-ref.html
+== scoped-style-008.html scoped-style-008-ref.html
+== scoped-style-009.html scoped-style-009-ref.html
+== scoped-style-010.html scoped-style-010-ref.html
+== scoped-style-011.html scoped-style-011-ref.html
+== scoped-style-012.html scoped-style-012-ref.html
+== scoped-style-013.html scoped-style-013-ref.html
+== scoped-style-014.html scoped-style-014-ref.html
+== scoped-style-015.html scoped-style-015-ref.html
+== scoped-style-016.html scoped-style-016-ref.html
+== scoped-style-017.html scoped-style-017-ref.html
+== scoped-style-018.html scoped-style-018-ref.html
+== scoped-style-019.svg scoped-style-019-ref.svg
+== scoped-style-020.html scoped-style-020-ref.html
+== scoped-style-021.html scoped-style-021-ref.html
+== scoped-style-022.html scoped-style-022-ref.html
+== scoped-style-023.html scoped-style-023-ref.html
+== scoped-style-024.html scoped-style-024-ref.html
+== scoped-style-important-001.html scoped-style-important-001-ref.html
+== scoped-style-important-002.html scoped-style-important-002-ref.html
+== scoped-style-important-003.html scoped-style-important-003-ref.html
+== scoped-style-important-004.html scoped-style-important-004-ref.html
+== scoped-style-important-005.html scoped-style-important-005-ref.html
+== scoped-style-important-006.html scoped-style-important-006-ref.html
+== scoped-style-important-007.html scoped-style-important-007-ref.html
+== scoped-style-dynamic-001.html scoped-style-dynamic-001-ref.html
+== scoped-style-dynamic-002.html scoped-style-dynamic-002-ref.html
+== scoped-style-dynamic-003.html scoped-style-dynamic-003-ref.html
+== scoped-style-dynamic-004.html scoped-style-dynamic-004-ref.html
+== scoped-style-dynamic-005.html scoped-style-dynamic-005-ref.html
+== scoped-style-dynamic-006.html scoped-style-dynamic-006-ref.html
+== scoped-style-dynamic-007.html scoped-style-dynamic-007-ref.html
+== scoped-style-dynamic-008.html scoped-style-dynamic-008-ref.html
+== scoped-style-dynamic-009.html scoped-style-dynamic-009-ref.html
+== scoped-style-dynamic-010.html scoped-style-dynamic-010-ref.html
+== scoped-style-dynamic-011.html scoped-style-dynamic-011-ref.html
+== scoped-style-dynamic-012.svg scoped-style-dynamic-012-ref.svg
+== scoped-style-dynamic-013.svg scoped-style-dynamic-013-ref.svg
+== scoped-style-dynamic-014.svg scoped-style-dynamic-014-ref.svg
+== scoped-style-dynamic-015.svg scoped-style-dynamic-015-ref.svg
+== scoped-style-import.html scoped-style-import-ref.html
+== scoped-style-media.html scoped-style-media-ref.html
+== scoped-style-namespace.html scoped-style-namespace-ref.html
+== scoped-style-charset.html scoped-style-charset-ref.html
+== scoped-style-document.html scoped-style-document-ref.html
+HTTP(..) == scoped-style-font-face.html scoped-style-font-face-ref.html
+== scoped-style-keyframes.html scoped-style-keyframes-ref.html
+== scoped-style-supports.html scoped-style-supports-ref.html
+pref(layout.css.scope-pseudo.enabled,true) == scoped-style-pseudo-001.html scoped-style-pseudo-001-ref.html
+pref(layout.css.scope-pseudo.enabled,true) == scoped-style-pseudo-002.html scoped-style-pseudo-002-ref.html
+pref(layout.css.scope-pseudo.enabled,true) == scoped-style-pseudo-003.html scoped-style-pseudo-003-ref.html
diff --git a/layout/reftests/scoped-style/scoped-style-001-ref.html b/layout/reftests/scoped-style/scoped-style-001-ref.html
new file mode 100644
index 000000000..3f763ef4b
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-001-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: green">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-001.html b/layout/reftests/scoped-style/scoped-style-001.html
new file mode 100644
index 000000000..0ecefa21a
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-001.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { color: green }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-002-ref.html b/layout/reftests/scoped-style/scoped-style-002-ref.html
new file mode 100644
index 000000000..9b30be20f
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-002-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: blue">First</p>
+  <p style="color: green">Second</p>
+  <p style="color: blue">Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-002.html b/layout/reftests/scoped-style/scoped-style-002.html
new file mode 100644
index 000000000..0acaa4dfb
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-002.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<body>
+  <style>
+    p { color: blue }
+  </style>
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { color: green }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-003-ref.html b/layout/reftests/scoped-style/scoped-style-003-ref.html
new file mode 100644
index 000000000..9b30be20f
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-003-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: blue">First</p>
+  <p style="color: green">Second</p>
+  <p style="color: blue">Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-003.html b/layout/reftests/scoped-style/scoped-style-003.html
new file mode 100644
index 000000000..b1db050db
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-003.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { color: green }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+  <style>
+    p { color: blue }
+  </style>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-004-ref.html b/layout/reftests/scoped-style/scoped-style-004-ref.html
new file mode 100644
index 000000000..9b30be20f
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-004-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: blue">First</p>
+  <p style="color: green">Second</p>
+  <p style="color: blue">Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-004.html b/layout/reftests/scoped-style/scoped-style-004.html
new file mode 100644
index 000000000..61f05c18a
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-004.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<body>
+  <style>
+    body p { color: blue }
+  </style>
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { color: green }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-005-ref.html b/layout/reftests/scoped-style/scoped-style-005-ref.html
new file mode 100644
index 000000000..9b30be20f
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-005-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: blue">First</p>
+  <p style="color: green">Second</p>
+  <p style="color: blue">Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-005.html b/layout/reftests/scoped-style/scoped-style-005.html
new file mode 100644
index 000000000..b555dfd3c
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-005.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { color: green }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+  <style>
+    body p { color: blue }
+  </style>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-006-ref.html b/layout/reftests/scoped-style/scoped-style-006-ref.html
new file mode 100644
index 000000000..9b30be20f
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-006-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: blue">First</p>
+  <p style="color: green">Second</p>
+  <p style="color: blue">Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-006.html b/layout/reftests/scoped-style/scoped-style-006.html
new file mode 100644
index 000000000..9789c510e
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-006.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<body>
+  <style>
+    p { color: blue }
+  </style>
+  <p>First</p>
+  <p id=a>
+    <style scoped>
+      #a { color: green }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-007-ref.html b/layout/reftests/scoped-style/scoped-style-007-ref.html
new file mode 100644
index 000000000..9b30be20f
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-007-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: blue">First</p>
+  <p style="color: green">Second</p>
+  <p style="color: blue">Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-007.html b/layout/reftests/scoped-style/scoped-style-007.html
new file mode 100644
index 000000000..5f3185cea
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-007.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p id=a>
+    <style scoped>
+      #a { color: green }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+  <style>
+    p { color: blue }
+  </style>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-008-ref.html b/layout/reftests/scoped-style/scoped-style-008-ref.html
new file mode 100644
index 000000000..6e7f33bf4
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-008-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-008.html b/layout/reftests/scoped-style/scoped-style-008.html
new file mode 100644
index 000000000..99fa4300e
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-008.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      body p { color: green }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-009-ref.html b/layout/reftests/scoped-style/scoped-style-009-ref.html
new file mode 100644
index 000000000..6e7f33bf4
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-009-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-009.html b/layout/reftests/scoped-style/scoped-style-009.html
new file mode 100644
index 000000000..48528c368
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-009.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      p + p { color: red }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-010-ref.html b/layout/reftests/scoped-style/scoped-style-010-ref.html
new file mode 100644
index 000000000..4f6e81bc5
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-010-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: green; text-decoration: underline">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-010.html b/layout/reftests/scoped-style/scoped-style-010.html
new file mode 100644
index 000000000..d99650345
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-010.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { color: red }
+    </style>
+    <style scoped>
+      p { text-decoration: underline }
+    </style>
+    Second
+    <style scoped>
+      p { color: green }
+    </style>
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-011-ref.html b/layout/reftests/scoped-style/scoped-style-011-ref.html
new file mode 100644
index 000000000..57f7c5377
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-011-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p><div style="color: green">Second</div></p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-011.html b/layout/reftests/scoped-style/scoped-style-011.html
new file mode 100644
index 000000000..778a9dbd7
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-011.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <div>
+    <style scoped>
+      p { color: green }
+    </style>
+    <p>
+      Second
+    </p>
+  </div>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-012-ref.html b/layout/reftests/scoped-style/scoped-style-012-ref.html
new file mode 100644
index 000000000..f4bc63d09
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-012-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<body>
+  <div>First</div>
+  <div style="color: green">
+    Second
+    <div style="text-decoration: underline">Third</div>
+  </div>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-012.html b/layout/reftests/scoped-style/scoped-style-012.html
new file mode 100644
index 000000000..5803e9dc4
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-012.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<body>
+  <div>First</div>
+  <div>
+    <style scoped>
+      div { color: green }
+    </style>
+    Second
+    <div>
+      <style scoped>
+        div { text-decoration: underline }
+      </style>
+      Third
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-013-ref.html b/layout/reftests/scoped-style/scoped-style-013-ref.html
new file mode 100644
index 000000000..7a2f780e0
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-013-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<body>
+  <div>
+    <p>First</p>
+  </div>
+  <div>
+    <p style="color: green">Second</p>
+  </div>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-013.html b/layout/reftests/scoped-style/scoped-style-013.html
new file mode 100644
index 000000000..7b9f97f51
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-013.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<body>
+  <div>
+    <p>First</p>
+  </div>
+  <div>
+    <style scoped>
+      div p { color: green }
+    </style>
+    <p>Second</p>
+  </div>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-014-ref.html b/layout/reftests/scoped-style/scoped-style-014-ref.html
new file mode 100644
index 000000000..54cab8795
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-014-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<body>
+  <div>
+    <p>First</p>
+  </div>
+  <blockquote>
+    <div>
+      <div>
+        <div>
+          <p style="color: green">Second</p>
+        </div>
+      </div>
+    </div>
+  </blockquote>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-014.html b/layout/reftests/scoped-style/scoped-style-014.html
new file mode 100644
index 000000000..9c2fb8816
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-014.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<body>
+  <div>
+    <p>First</p>
+  </div>
+  <blockquote>
+    <style scoped>
+      blockquote p { color: green }
+    </style>
+    <div>
+      <div>
+        <div>
+          <p>Second</p>
+        </div>
+      </div>
+    </div>
+  </blockquote>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-015-ref.html b/layout/reftests/scoped-style/scoped-style-015-ref.html
new file mode 100644
index 000000000..109d19798
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-015-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <div>
+    <p style="color: green">Second</p>
+  </div>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-015.html b/layout/reftests/scoped-style/scoped-style-015.html
new file mode 100644
index 000000000..8948f58f1
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-015.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <div>
+    <style scoped>
+      p { color: red }
+    </style>
+    <p style="color: green">Second</p>
+  </div>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-016-ref.html b/layout/reftests/scoped-style/scoped-style-016-ref.html
new file mode 100644
index 000000000..28f64c59a
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-016-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <div>
+    <p>Second</p>
+    <p style="color: green">Third</p>
+  </div>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-016.html b/layout/reftests/scoped-style/scoped-style-016.html
new file mode 100644
index 000000000..658140c4e
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-016.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <div>
+    <style scoped>
+      p + p { color: green }
+    </style>
+    <p>Second</p>
+    <p>Third</p>
+  </div>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-017-ref.html b/layout/reftests/scoped-style/scoped-style-017-ref.html
new file mode 100644
index 000000000..902861abb
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-017-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <div style="text-decoration: underline">
+    <p>Second</p>
+    <p>Third</p>
+  </div>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-017.html b/layout/reftests/scoped-style/scoped-style-017.html
new file mode 100644
index 000000000..eb35174db
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-017.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <div>
+    <style scoped>
+      div { text-decoration: underline }
+    </style>
+    <p>
+      <style scoped>
+        div { color: red }
+      </style>
+      Second
+    </p>
+    <p>Third</p>
+  </div>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-018-ref.html b/layout/reftests/scoped-style/scoped-style-018-ref.html
new file mode 100644
index 000000000..ea87d4a7a
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-018-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<body>
+  <div>
+    <div>
+      <p style="color: green">This should be green.</p>
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-018.html b/layout/reftests/scoped-style/scoped-style-018.html
new file mode 100644
index 000000000..f51d3b30c
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-018.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<body>
+  <div>
+    <div>
+      <p>This should be green.</p>
+      <style scoped>
+        p { color: green }
+      </style>
+    </div>
+    <style scoped>
+      p { color: red }
+    </style>
+  </div>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-019-ref.svg b/layout/reftests/scoped-style/scoped-style-019-ref.svg
new file mode 100644
index 000000000..4f7297947
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-019-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect width="50" height="50"/>
+  <g>
+    <rect x="60" width="50" height="50" fill="blue"/>
+  </g>
+  <rect x="120" width="50" height="50"/>
+</svg>
diff --git a/layout/reftests/scoped-style/scoped-style-019.svg b/layout/reftests/scoped-style/scoped-style-019.svg
new file mode 100644
index 000000000..161ebc7e7
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-019.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect width="50" height="50"/>
+  <g>
+    <style scoped="">
+      rect { fill: blue }
+    </style>
+    <rect x="60" width="50" height="50"/>
+  </g>
+  <rect x="120" width="50" height="50"/>
+</svg>
diff --git a/layout/reftests/scoped-style/scoped-style-020-ref.html b/layout/reftests/scoped-style/scoped-style-020-ref.html
new file mode 100644
index 000000000..ef5bf0cb0
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-020-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: green">Hello</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-020.html b/layout/reftests/scoped-style/scoped-style-020.html
new file mode 100644
index 000000000..818e8da05
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-020.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: green">
+    <style scoped>
+      p { color: red }
+    </style>
+    Hello
+  </p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-021-ref.html b/layout/reftests/scoped-style/scoped-style-021-ref.html
new file mode 100644
index 000000000..ef5bf0cb0
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-021-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: green">Hello</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-021.html b/layout/reftests/scoped-style/scoped-style-021.html
new file mode 100644
index 000000000..406bd9e28
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-021.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<body>
+  <style scoped>
+    p { color: red }
+  </style>
+  <p style="color: green">Hello</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-022-ref.html b/layout/reftests/scoped-style/scoped-style-022-ref.html
new file mode 100644
index 000000000..1a02cd7e3
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-022-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <div>
+    <p style="color: green">Hello</p>
+  </div>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-022.html b/layout/reftests/scoped-style/scoped-style-022.html
new file mode 100644
index 000000000..18a2845e9
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-022.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<body>
+  <style scoped>
+    body > div p { color: green; }
+  </style>
+  <div>
+    <p>Hello</p>
+  </div>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-023-ref.html b/layout/reftests/scoped-style/scoped-style-023-ref.html
new file mode 100644
index 000000000..b961cd059
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-023-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body>
+  <p><span style="color: green">First line</span><br><span style="color: blue">Second line</span></p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-023.html b/layout/reftests/scoped-style/scoped-style-023.html
new file mode 100644
index 000000000..ef311693b
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-023.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<body>
+  <style scoped>
+    p::first-line { color: green; }
+    span { color: blue; }
+  </style>
+  <p>First line<br><span>Second line</span></p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-024-ref.html b/layout/reftests/scoped-style/scoped-style-024-ref.html
new file mode 100644
index 000000000..d3edb084f
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-024-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: green">Hello.</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-024.html b/layout/reftests/scoped-style/scoped-style-024.html
new file mode 100644
index 000000000..c193958e6
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-024.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<body>
+  <style scoped>
+    p[data-test] { color: green; }
+  </style>
+  <p>Hello.</p>
+  <script>
+    document.body.offsetHeight;
+    document.querySelector("p").setAttribute("data-test", "");
+  </script>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-charset-ref.html b/layout/reftests/scoped-style/scoped-style-charset-ref.html
new file mode 100644
index 000000000..f1d8460a1
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-charset-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: blue">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-charset.html b/layout/reftests/scoped-style/scoped-style-charset.html
new file mode 100644
index 000000000..921148692
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-charset.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      @charset "UTF-16";
+      p { color: blue }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-document-ref.html b/layout/reftests/scoped-style/scoped-style-document-ref.html
new file mode 100644
index 000000000..f1d8460a1
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-document-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: blue">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-document.html b/layout/reftests/scoped-style/scoped-style-document.html
new file mode 100644
index 000000000..cb02becd6
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-document.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      @-moz-document regexp("^.*scoped-style-document\\.html$") {
+        p { color: blue }
+      }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-001-ref.html b/layout/reftests/scoped-style/scoped-style-dynamic-001-ref.html
new file mode 100644
index 000000000..3f763ef4b
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-001-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: green">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-001.html b/layout/reftests/scoped-style/scoped-style-dynamic-001.html
new file mode 100644
index 000000000..08251ea81
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-001.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<body onload="f()">
+  <p>First</p>
+  <p>Second</p>
+  <p>Third</p>
+  <script>
+    function f() {
+      var p = document.getElementsByTagName("p")[1];
+      var style = document.createElement("style");
+      style.setAttribute("scoped", "");
+      style.textContent = "p { color: green }";
+      p.appendChild(style);
+    }
+  </script>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-002-ref.html b/layout/reftests/scoped-style/scoped-style-dynamic-002-ref.html
new file mode 100644
index 000000000..4f6e81bc5
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-002-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: green; text-decoration: underline">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-002.html b/layout/reftests/scoped-style/scoped-style-dynamic-002.html
new file mode 100644
index 000000000..6d96511a1
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-002.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<body onload="f()">
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { text-decoration: underline }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+  <script>
+    function f() {
+      var p = document.getElementsByTagName("p")[1];
+      var style = document.createElement("style");
+      style.setAttribute("scoped", "");
+      style.textContent = "p { color: green }";
+      p.appendChild(style);
+    }
+  </script>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-003-ref.html b/layout/reftests/scoped-style/scoped-style-dynamic-003-ref.html
new file mode 100644
index 000000000..3f763ef4b
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-003-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: green">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-003.html b/layout/reftests/scoped-style/scoped-style-dynamic-003.html
new file mode 100644
index 000000000..048688cdf
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-003.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<body onload="f()">
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { color: green }
+    </style>
+    <style scoped>
+      p { text-decoration: underline }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+  <script>
+    function f() {
+      var style = document.getElementsByTagName("style")[1];
+      style.parentNode.removeChild(style);
+    }
+  </script>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-004-ref.html b/layout/reftests/scoped-style/scoped-style-dynamic-004-ref.html
new file mode 100644
index 000000000..c0b77f52a
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-004-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: green; background-color: yellow">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-004.html b/layout/reftests/scoped-style/scoped-style-dynamic-004.html
new file mode 100644
index 000000000..de11bf928
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-004.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<body onload="f()">
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { color: green }
+    </style>
+    <style scoped>
+      p { text-decoration: underline }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+  <script>
+    function f() {
+      var style = document.getElementsByTagName("style")[1];
+      style.textContent = "p { background-color: yellow }";
+    }
+  </script>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-005-ref.html b/layout/reftests/scoped-style/scoped-style-dynamic-005-ref.html
new file mode 100644
index 000000000..9993e6f31
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-005-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: green">First</p>
+  <p style="color: green">Second</p>
+  <p style="color: green">Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-005.html b/layout/reftests/scoped-style/scoped-style-dynamic-005.html
new file mode 100644
index 000000000..38e8b56d2
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-005.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<body onload="f()">
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { color: green }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+  <script>
+    function f() {
+      var style = document.getElementsByTagName("style")[0];
+      style.removeAttribute("scoped");
+    }
+  </script>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-006-ref.html b/layout/reftests/scoped-style/scoped-style-dynamic-006-ref.html
new file mode 100644
index 000000000..3f763ef4b
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-006-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: green">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-006.html b/layout/reftests/scoped-style/scoped-style-dynamic-006.html
new file mode 100644
index 000000000..8947b08aa
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-006.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<body onload="f()">
+  <p>First</p>
+  <p>
+    <style>
+      p { color: green }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+  <script>
+    function f() {
+      var style = document.getElementsByTagName("style")[0];
+      style.setAttribute("scoped", "");
+    }
+  </script>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-007-ref.html b/layout/reftests/scoped-style/scoped-style-dynamic-007-ref.html
new file mode 100644
index 000000000..52e5060f8
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-007-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <div></div>
+  <p>Second</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-007.html b/layout/reftests/scoped-style/scoped-style-dynamic-007.html
new file mode 100644
index 000000000..6403cc529
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-007.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<body onload="f()">
+  <p>First</p>
+  <div>
+    <style scoped>
+      p { color: green }
+    </style>
+    <p>Second</p>
+  </div>
+  <script>
+    function f() {
+      var p = document.getElementsByTagName("p")[1];
+      document.body.appendChild(p);
+    }
+  </script>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-008-ref.html b/layout/reftests/scoped-style/scoped-style-dynamic-008-ref.html
new file mode 100644
index 000000000..9ce53f891
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-008-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<body>
+  <div>
+    <p style="color: green">First</p>
+  </div>
+  <p>Second</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-008.html b/layout/reftests/scoped-style/scoped-style-dynamic-008.html
new file mode 100644
index 000000000..a19ebeb82
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-008.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<body onload="f()">
+  <p>First</p>
+  <div>
+    <style scoped>
+      p { color: green }
+    </style>
+  </div>
+  <p>Second</p>
+  <script>
+    function f() {
+      var p = document.getElementsByTagName("p")[0];
+      var div = document.getElementsByTagName("div")[0];
+      div.appendChild(p);
+    }
+  </script>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-009-ref.html b/layout/reftests/scoped-style/scoped-style-dynamic-009-ref.html
new file mode 100644
index 000000000..3f763ef4b
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-009-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: green">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-009.html b/layout/reftests/scoped-style/scoped-style-dynamic-009.html
new file mode 100644
index 000000000..726cf672f
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-009.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<body onload="f()">
+  <p>First</p>
+  <p>
+    <style>
+      p { color: green }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+  <script>
+    function f() {
+      var style = document.getElementsByTagName("style")[0];
+      style.scoped = true;
+    }
+  </script>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-010-ref.html b/layout/reftests/scoped-style/scoped-style-dynamic-010-ref.html
new file mode 100644
index 000000000..9993e6f31
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-010-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: green">First</p>
+  <p style="color: green">Second</p>
+  <p style="color: green">Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-010.html b/layout/reftests/scoped-style/scoped-style-dynamic-010.html
new file mode 100644
index 000000000..940cc717c
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-010.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<body onload="f()">
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { color: green }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+  <script>
+    function f() {
+      var style = document.getElementsByTagName("style")[0];
+      style.scoped = false;
+    }
+  </script>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-011-ref.html b/layout/reftests/scoped-style/scoped-style-dynamic-011-ref.html
new file mode 100644
index 000000000..aa6dce1a4
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-011-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: green">Second</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-011.html b/layout/reftests/scoped-style/scoped-style-dynamic-011.html
new file mode 100644
index 000000000..e5223e19d
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-011.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<body onload="f()">
+  <p>
+    <style scoped>
+      p { color: green }
+    </style>
+    First
+  </p>
+  <p>Second</p>
+  <script>
+    function f() {
+      var style = document.getElementsByTagName("style")[0];
+      var p = document.getElementsByTagName("p")[1];
+      p.appendChild(style);
+    }
+  </script>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-012-ref.svg b/layout/reftests/scoped-style/scoped-style-dynamic-012-ref.svg
new file mode 100644
index 000000000..5a1db3c2c
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-012-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect width="50" height="50" fill="blue"/>
+  <g>
+    <rect x="60" width="50" height="50" fill="blue"/>
+  </g>
+  <rect x="120" width="50" height="50" fill="blue"/>
+</svg>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-012.svg b/layout/reftests/scoped-style/scoped-style-dynamic-012.svg
new file mode 100644
index 000000000..1ecfb0e4c
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-012.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" onload="f()">
+  <rect width="50" height="50"/>
+  <g>
+    <style scoped="">
+      rect { fill: blue }
+    </style>
+    <rect x="60" width="50" height="50"/>
+  </g>
+  <rect x="120" width="50" height="50"/>
+  <script>
+    function f() {
+      document.getElementsByTagName("style")[0].removeAttribute("scoped");
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-013-ref.svg b/layout/reftests/scoped-style/scoped-style-dynamic-013-ref.svg
new file mode 100644
index 000000000..4f7297947
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-013-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect width="50" height="50"/>
+  <g>
+    <rect x="60" width="50" height="50" fill="blue"/>
+  </g>
+  <rect x="120" width="50" height="50"/>
+</svg>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-013.svg b/layout/reftests/scoped-style/scoped-style-dynamic-013.svg
new file mode 100644
index 000000000..fc5f00111
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-013.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" onload="f()">
+  <rect width="50" height="50"/>
+  <g>
+    <style>
+      rect { fill: blue }
+    </style>
+    <rect x="60" width="50" height="50"/>
+  </g>
+  <rect x="120" width="50" height="50"/>
+  <script>
+    function f() {
+      document.getElementsByTagName("style")[0].setAttribute("scoped", "");
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-014-ref.svg b/layout/reftests/scoped-style/scoped-style-dynamic-014-ref.svg
new file mode 100644
index 000000000..5a1db3c2c
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-014-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect width="50" height="50" fill="blue"/>
+  <g>
+    <rect x="60" width="50" height="50" fill="blue"/>
+  </g>
+  <rect x="120" width="50" height="50" fill="blue"/>
+</svg>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-014.svg b/layout/reftests/scoped-style/scoped-style-dynamic-014.svg
new file mode 100644
index 000000000..b19318ca4
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-014.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" onload="f()">
+  <rect width="50" height="50"/>
+  <g>
+    <style scoped="">
+      rect { fill: blue }
+    </style>
+    <rect x="60" width="50" height="50"/>
+  </g>
+  <rect x="120" width="50" height="50"/>
+  <script>
+    function f() {
+      document.getElementsByTagName("style")[0].scoped = false;
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-015-ref.svg b/layout/reftests/scoped-style/scoped-style-dynamic-015-ref.svg
new file mode 100644
index 000000000..4f7297947
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-015-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect width="50" height="50"/>
+  <g>
+    <rect x="60" width="50" height="50" fill="blue"/>
+  </g>
+  <rect x="120" width="50" height="50"/>
+</svg>
diff --git a/layout/reftests/scoped-style/scoped-style-dynamic-015.svg b/layout/reftests/scoped-style/scoped-style-dynamic-015.svg
new file mode 100644
index 000000000..f6d2c7a57
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-dynamic-015.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" onload="f()">
+  <rect width="50" height="50"/>
+  <g>
+    <style>
+      rect { fill: blue }
+    </style>
+    <rect x="60" width="50" height="50"/>
+  </g>
+  <rect x="120" width="50" height="50"/>
+  <script>
+    function f() {
+      document.getElementsByTagName("style")[0].scoped = true;
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/scoped-style/scoped-style-font-face-ref.html b/layout/reftests/scoped-style/scoped-style-font-face-ref.html
new file mode 100644
index 000000000..02d6971e0
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-font-face-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<body>
+  <style>
+    @font-face {
+      font-family: Ahem;
+      src: url(../fonts/Ahem.ttf);
+    }
+    #a { font-family: Ahem }
+  </style>
+  <p id=a>First</p>
+  <p style="color: blue">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-font-face.html b/layout/reftests/scoped-style/scoped-style-font-face.html
new file mode 100644
index 000000000..e79e255f7
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-font-face.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<body>
+  <style>
+    @font-face {
+      font-family: Ahem;
+      src: url(../fonts/Ahem.ttf);
+    }
+    #a { font-family: Ahem }
+    #c { font-family: Ahem2 }
+  </style>
+  <p id=a>First</p>
+  <p>
+    <style scoped>
+      @font-face {
+        font-family: Ahem2;
+        src: url(../fonts/Ahem.ttf);
+      }
+      p { font-family: Ahem2; color: blue }
+    </style>
+    Second
+  </p>
+  <p id=c>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-import-ref.html b/layout/reftests/scoped-style/scoped-style-import-ref.html
new file mode 100644
index 000000000..f1d8460a1
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-import-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: blue">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-import.html b/layout/reftests/scoped-style/scoped-style-import.html
new file mode 100644
index 000000000..414b4b157
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-import.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      @import url(scoped-style-imported.css);
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-001-ref.html b/layout/reftests/scoped-style/scoped-style-important-001-ref.html
new file mode 100644
index 000000000..eadaf600d
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-001-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: blue">First</p>
+  <p style="color: blue">Second</p>
+  <p style="color: blue">Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-001.html b/layout/reftests/scoped-style/scoped-style-important-001.html
new file mode 100644
index 000000000..1fd9f202e
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-001.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { color: red }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+  <style>
+    p { color: blue !important }
+  </style>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-002-ref.html b/layout/reftests/scoped-style/scoped-style-important-002-ref.html
new file mode 100644
index 000000000..f1d8460a1
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-002-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: blue">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-002.html b/layout/reftests/scoped-style/scoped-style-important-002.html
new file mode 100644
index 000000000..3e2d1526e
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-002.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: red">
+    <style scoped>
+      p { color: blue !important }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-003-ref.html b/layout/reftests/scoped-style/scoped-style-important-003-ref.html
new file mode 100644
index 000000000..9993e6f31
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-003-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: green">First</p>
+  <p style="color: green">Second</p>
+  <p style="color: green">Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-003.html b/layout/reftests/scoped-style/scoped-style-important-003.html
new file mode 100644
index 000000000..410867d49
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-003.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { color: red !important }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+  <style>
+    p { color: green !important }
+  </style>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-004-ref.html b/layout/reftests/scoped-style/scoped-style-important-004-ref.html
new file mode 100644
index 000000000..9993e6f31
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-004-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: green">First</p>
+  <p style="color: green">Second</p>
+  <p style="color: green">Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-004.html b/layout/reftests/scoped-style/scoped-style-important-004.html
new file mode 100644
index 000000000..546a8748c
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-004.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      p { color: red !important }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+  <style scoped>
+    p { color: green !important }
+  </style>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-005-ref.html b/layout/reftests/scoped-style/scoped-style-important-005-ref.html
new file mode 100644
index 000000000..ef5bf0cb0
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-005-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: green">Hello</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-005.html b/layout/reftests/scoped-style/scoped-style-important-005.html
new file mode 100644
index 000000000..de5b3bd6f
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-005.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<body>
+  <style scoped>
+    p { color: green !important }
+  </style>
+  <p style="color: red">Hello</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-006-ref.html b/layout/reftests/scoped-style/scoped-style-important-006-ref.html
new file mode 100644
index 000000000..ef5bf0cb0
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-006-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: green">Hello</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-006.html b/layout/reftests/scoped-style/scoped-style-important-006.html
new file mode 100644
index 000000000..352bd6c9b
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-006.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: red">
+    <style scoped>
+      p { color: green !important }
+    </style>
+    Hello
+  </p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-007-ref.html b/layout/reftests/scoped-style/scoped-style-important-007-ref.html
new file mode 100644
index 000000000..ef5bf0cb0
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-007-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: green">Hello</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-important-007.html b/layout/reftests/scoped-style/scoped-style-important-007.html
new file mode 100644
index 000000000..fe69a6b63
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-important-007.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<body>
+  <style scoped>
+    p { color: red !important }
+  </style>
+  <p style="color: green !important">Hello</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-imported.css b/layout/reftests/scoped-style/scoped-style-imported.css
new file mode 100644
index 000000000..d964925b6
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-imported.css
@@ -0,0 +1 @@
+p { color: blue }
diff --git a/layout/reftests/scoped-style/scoped-style-keyframes-ref.html b/layout/reftests/scoped-style/scoped-style-keyframes-ref.html
new file mode 100644
index 000000000..af12e6108
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-keyframes-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p style="color: green">First</p>
+  <p>Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-keyframes.html b/layout/reftests/scoped-style/scoped-style-keyframes.html
new file mode 100644
index 000000000..18e9c6670
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-keyframes.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<body>
+  <style>
+    @keyframes a {
+      from { color: green }
+      to { color: green }
+    }
+    p { animation-duration: 1s; animation-fill-mode: both }
+    #a { animation-name: a }
+    #c { animation-name: b }
+  </style>
+  <p id=a>First</p>
+  <p>
+    <style scoped>
+      @keyframes a {
+        from { color: blue }
+        to { color: blue }
+      }
+      @keyframes b {
+        from { color: red }
+        to { color: red }
+      }
+      p { animation-name: b }
+    </style>
+    Second
+  </p>
+  <p id=c>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-media-ref.html b/layout/reftests/scoped-style/scoped-style-media-ref.html
new file mode 100644
index 000000000..f1d8460a1
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-media-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: blue">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-media.html b/layout/reftests/scoped-style/scoped-style-media.html
new file mode 100644
index 000000000..6cebeb6da
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-media.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      @media not all {
+        p { text-decoration: underline }
+      }
+      @media all {
+        p { color: blue }
+      }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-namespace-ref.html b/layout/reftests/scoped-style/scoped-style-namespace-ref.html
new file mode 100644
index 000000000..f1d8460a1
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-namespace-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: blue">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-namespace.html b/layout/reftests/scoped-style/scoped-style-namespace.html
new file mode 100644
index 000000000..714fea5e4
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-namespace.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      @namespace html url(http://www.w3.org/1999/xhtml);
+      html|p { color: blue }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-pseudo-001-ref.html b/layout/reftests/scoped-style/scoped-style-pseudo-001-ref.html
new file mode 100644
index 000000000..3f763ef4b
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-pseudo-001-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: green">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-pseudo-001.html b/layout/reftests/scoped-style/scoped-style-pseudo-001.html
new file mode 100644
index 000000000..1eea542d4
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-pseudo-001.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      :scope { color: green }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-pseudo-002-ref.html b/layout/reftests/scoped-style/scoped-style-pseudo-002-ref.html
new file mode 100644
index 000000000..c6cd0178f
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-pseudo-002-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: green">
+    <div style="border: 2px solid black">Second</div>
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-pseudo-002.html b/layout/reftests/scoped-style/scoped-style-pseudo-002.html
new file mode 100644
index 000000000..409d792ce
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-pseudo-002.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      :scope { color: green }
+    </style>
+    <div>
+      <style scoped>
+        :scope { border: 2px solid black }
+      </style>
+      Second
+    </div>
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-pseudo-003-ref.html b/layout/reftests/scoped-style/scoped-style-pseudo-003-ref.html
new file mode 100644
index 000000000..04371a8ef
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-pseudo-003-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p><span>Second</span></p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-pseudo-003.html b/layout/reftests/scoped-style/scoped-style-pseudo-003.html
new file mode 100644
index 000000000..d24b9402d
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-pseudo-003.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      p :scope { color: red }
+    </style>
+    <span>Second</span>
+  </p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-supports-ref.html b/layout/reftests/scoped-style/scoped-style-supports-ref.html
new file mode 100644
index 000000000..f1d8460a1
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-supports-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p style="color: blue">Second</p>
+  <p>Third</p>
+</body>
diff --git a/layout/reftests/scoped-style/scoped-style-supports.html b/layout/reftests/scoped-style/scoped-style-supports.html
new file mode 100644
index 000000000..2e2534058
--- /dev/null
+++ b/layout/reftests/scoped-style/scoped-style-supports.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<body>
+  <p>First</p>
+  <p>
+    <style scoped>
+      @supports (color: rainbow) {
+        p { text-decoration: underline }
+      }
+      @supports (color: blue) {
+        p { color: blue }
+      }
+    </style>
+    Second
+  </p>
+  <p>Third</p>
+</body>