Part 6 - Implement scoped styles.

Differential Revision: https://phabricator.services.mozilla.com/D207783

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1886441
gecko-commit: bddfdb4b7b6686af36f951455e5b6529052cbdf4
gecko-reviewers: firefox-style-system-reviewers, emilio

css/css-cascade/scope-evaluation.html

@@ -554,7 +554,7 @@
   <div class=a>
     <span id="in"></span>
     <div class=b>
-      <span id="out"</span>
+      <span id="out"></span>
       <div class=c></div>
     </div>
   </div>

css/css-cascade/scope-proximity.html

@@ -121,3 +121,21 @@
   assert_equals(getComputedStyle(item).borderColor, 'rgb(0, 128, 0)');
 }, 'Specificity wins over proximity');
 </script>
+
+<template>
+  <style>
+    @scope (.foo) {
+      .bar span[id] { border-color:green; }
+    }
+  </style>
+  <div class=foo>
+    <div class="foo bar">
+      <span id=item></span>
+    </div>
+  </div>
+</template>
+<script>
+test_scope(document.currentScript, () => {
+  assert_equals(getComputedStyle(item).borderColor, 'rgb(0, 128, 0)');
+}, 'Identical root with further proximity is not ignored');
+</script>