Auto merge of #19902 - emilio:quirks-invalidation, r=SimonSapin

style: Fix sheet invalidation in quirks mode documents.

Bug: 1433589

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19902)
<!-- Reviewable:end -->

components/style/invalidation/stylesheets.rs

@@ -10,7 +10,7 @@
 use Atom;
 use CaseSensitivityExt;
 use LocalName as SelectorLocalName;
-use dom::{TElement, TNode};
+use dom::{TDocument, TElement, TNode};
 use fnv::FnvHashSet;
 use invalidation::element::element_wrapper::{ElementSnapshot, ElementWrapper};
 use invalidation::element::restyle_hints::RestyleHint;
@@ -45,15 +45,15 @@ impl Invalidation {
         matches!(*self, Invalidation::ID(..) | Invalidation::Class(..))
     }
 
-    fn matches<E>(&self, element: E, snapshot: Option<&Snapshot>) -> bool
+    fn matches<E>(
+        &self,
+        element: E,
+        snapshot: Option<&Snapshot>,
+        case_sensitivity: CaseSensitivity,
+    ) -> bool
     where
         E: TElement,
     {
-        // FIXME This should look at the quirks mode of the document to
-        // determine case sensitivity.
-        //
-        // FIXME(emilio): Actually write a test and fix this.
-        let case_sensitivity = CaseSensitivity::CaseSensitive;
         match *self {
             Invalidation::Class(ref class) => {
                 if element.has_class(class, case_sensitivity) {
@@ -222,7 +222,9 @@ impl StylesheetInvalidationSet {
             return false;
         }
 
-        self.process_invalidations_in_subtree(element, snapshots)
+        let case_sensitivity =
+            element.as_node().owner_doc().quirks_mode().classes_and_ids_case_sensitivity();
+        self.process_invalidations_in_subtree(element, snapshots, case_sensitivity)
     }
 
     /// Process style invalidations in a given subtree. This traverses the
@@ -235,6 +237,7 @@ impl StylesheetInvalidationSet {
         &self,
         element: E,
         snapshots: Option<&SnapshotMap>,
+        case_sensitivity: CaseSensitivity,
     ) -> bool
     where
         E: TElement,
@@ -258,7 +261,7 @@ impl StylesheetInvalidationSet {
         let element_wrapper = snapshots.map(|s| ElementWrapper::new(element, s));
         let snapshot = element_wrapper.as_ref().and_then(|e| e.snapshot());
         for invalidation in &self.invalid_scopes {
-            if invalidation.matches(element, snapshot) {
+            if invalidation.matches(element, snapshot, case_sensitivity) {
                 debug!("process_invalidations_in_subtree: {:?} matched subtree {:?}",
                        element, invalidation);
                 data.hint.insert(RestyleHint::restyle_subtree());
@@ -270,7 +273,7 @@ impl StylesheetInvalidationSet {
 
         if !data.hint.contains(RestyleHint::RESTYLE_SELF) {
             for invalidation in &self.invalid_elements {
-                if invalidation.matches(element, snapshot) {
+                if invalidation.matches(element, snapshot, case_sensitivity) {
                     debug!("process_invalidations_in_subtree: {:?} matched self {:?}",
                            element, invalidation);
                     data.hint.insert(RestyleHint::RESTYLE_SELF);
@@ -289,7 +292,7 @@ impl StylesheetInvalidationSet {
             };
 
             any_children_invalid |=
-                self.process_invalidations_in_subtree(child, snapshots);
+                self.process_invalidations_in_subtree(child, snapshots, case_sensitivity);
         }
 
         if any_children_invalid {

tests/wpt/metadata/MANIFEST.json

@@ -312035,6 +312035,12 @@
      {}
     ]
    ],
+   "css/selectors/invalidation/quirks-mode-stylesheet-dynamic-add-001.html": [
+    [
+     "/css/selectors/invalidation/quirks-mode-stylesheet-dynamic-add-001.html",
+     {}
+    ]
+   ],
    "css/selectors/missing-right-token.html": [
     [
      "/css/selectors/missing-right-token.html",
@@ -523734,6 +523740,10 @@
    "7c0c602803f2de72e1c0ee4977a04c5054fb03c5",
    "testharness"
   ],
+  "css/selectors/invalidation/quirks-mode-stylesheet-dynamic-add-001.html": [
+   "de0d6f774f67362551ca7448d06ab6b264ecaa29",
+   "testharness"
+  ],
   "css/selectors/missing-right-token.html": [
    "d961e801f7df57161cd8c7b5a4b26ae24013c3e9",
    "testharness"

tests/wpt/web-platform-tests/css/selectors/invalidation/quirks-mode-stylesheet-dynamic-add-001.html

@@ -0,0 +1,27 @@
+<!-- Quirks mode -->
+<meta charset="utf-8">
+<title>Invalidation of style due to a dynamic stylesheet change in quirks mode</title>
+<link rel="help" href="https://html.spec.whatwg.org/#case-sensitivity-of-selectors">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1433589">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #foo {
+    width: 100px;
+    height: 100px;
+    background: red;
+  }
+</style>
+Should see a green square below.
+<div id="foo"></div>
+<script>
+test(function() {
+  let foo = document.getElementById('foo');
+  assert_equals(getComputedStyle(foo).backgroundColor, "rgb(255, 0, 0)");
+  let style = document.createElement('style');
+  style.textContent = "#FoO { background: green; }";
+  document.body.appendChild(style);
+  assert_equals(getComputedStyle(foo).backgroundColor, "rgb(0, 128, 0)");
+}, "Style should've changed to a green background");
+</script>