Auto merge of #14930 - zaynetro:remove-stylesheets, r=emilio

Implement support for removing stylesheets from their document

<!-- Please describe your changes on the following line: -->
This pull request implements removing styles from the document when

* `<link>` element with associated styles is removed
* `<style>` element is removed

Additionally, it tests that when `<style>` element is changed. Styles are being reapplied correctly.

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix #14886 (github issue number if applicable).

<!-- Either: -->
- [x] There are tests for these changes

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- 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/14930)
<!-- Reviewable:end -->

components/script/dom/htmllinkelement.rs

@@ -18,7 +18,7 @@ use dom::element::{AttributeMutation, Element, ElementCreator};
 use dom::element::{cors_setting_for_element, reflect_cross_origin_attribute, set_cross_origin_attribute};
 use dom::globalscope::GlobalScope;
 use dom::htmlelement::HTMLElement;
-use dom::node::{Node, document_from_node, window_from_node};
+use dom::node::{Node, UnbindContext, document_from_node, window_from_node};
 use dom::stylesheet::StyleSheet as DOMStyleSheet;
 use dom::virtualmethods::VirtualMethods;
 use html5ever_atoms::LocalName;
@@ -228,6 +228,15 @@ impl VirtualMethods for HTMLLinkElement {
             }
         }
     }
+
+    fn unbind_from_tree(&self, context: &UnbindContext) {
+        if let Some(ref s) = self.super_type() {
+            s.unbind_from_tree(context);
+        }
+
+        let document = document_from_node(self);
+        document.invalidate_stylesheets();
+    }
 }
 
 

components/script/dom/htmlstyleelement.rs

@@ -15,7 +15,7 @@ use dom::document::Document;
 use dom::element::{Element, ElementCreator};
 use dom::eventtarget::EventTarget;
 use dom::htmlelement::HTMLElement;
-use dom::node::{ChildrenMutation, Node, document_from_node, window_from_node};
+use dom::node::{ChildrenMutation, Node, UnbindContext, document_from_node, window_from_node};
 use dom::stylesheet::StyleSheet as DOMStyleSheet;
 use dom::virtualmethods::VirtualMethods;
 use html5ever_atoms::LocalName;
@@ -161,6 +161,15 @@ impl VirtualMethods for HTMLStyleElement {
             self.parse_own_css();
         }
     }
+
+    fn unbind_from_tree(&self, context: &UnbindContext) {
+        if let Some(ref s) = self.super_type() {
+            s.unbind_from_tree(context);
+        }
+
+        let doc = document_from_node(self);
+        doc.invalidate_stylesheets();
+    }
 }
 
 impl StylesheetOwner for HTMLStyleElement {

tests/wpt/metadata/subresource-integrity/subresource-integrity.sub.html.ini

@@ -3,25 +3,3 @@
   expected: OK
   [Style: Same-origin with correct sha256 and sha512 hash, rel='alternate stylesheet' enabled]
     expected: FAIL
-
-  [Style: Same-origin with incorrect hash.]
-    expected: FAIL
-
-  [Style: Same-origin with sha256 match, sha512 mismatch]
-    expected: FAIL
-
-  [Style: <crossorigin='anonymous'> with CORS-ineligible resource]
-    expected: FAIL
-
-  [Style: Cross-origin, not CORS request, with correct hash]
-    expected: FAIL
-
-  [Style: Cross-origin, not CORS request, with hash mismatch]
-    expected: FAIL
-
-  [Style: <crossorigin='use-credentials'> with incorrect hash CORS-eligible]
-    expected: FAIL
-
-  [Style: <crossorigin='anonymous'> with incorrect hash, ACAO: *]
-    expected: FAIL
-

tests/wpt/mozilla/meta/MANIFEST.json

@@ -6474,6 +6474,42 @@
             "url": "/_mozilla/mozilla/iframe/resize_after_load.html"
           }
         ],
+        "mozilla/remove_link_styles.html": [
+          {
+            "path": "mozilla/remove_link_styles.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/remove_link_styles_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/remove_link_styles.html"
+          }
+        ],
+        "mozilla/remove_style_styles.html": [
+          {
+            "path": "mozilla/remove_style_styles.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/remove_style_styles_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/remove_style_styles.html"
+          }
+        ],
+        "mozilla/reparse_style_elements.html": [
+          {
+            "path": "mozilla/reparse_style_elements.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/reparse_style_elements_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/reparse_style_elements.html"
+          }
+        ],
         "mozilla/restyle-out-of-document.html": [
           {
             "path": "mozilla/restyle-out-of-document.html",
@@ -21876,6 +21912,42 @@
           "url": "/_mozilla/mozilla/iframe/resize_after_load.html"
         }
       ],
+      "mozilla/remove_link_styles.html": [
+        {
+          "path": "mozilla/remove_link_styles.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/remove_link_styles_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/remove_link_styles.html"
+        }
+      ],
+      "mozilla/remove_style_styles.html": [
+        {
+          "path": "mozilla/remove_style_styles.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/remove_style_styles_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/remove_style_styles.html"
+        }
+      ],
+      "mozilla/reparse_style_elements.html": [
+        {
+          "path": "mozilla/reparse_style_elements.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/reparse_style_elements_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/reparse_style_elements.html"
+        }
+      ],
       "mozilla/restyle-out-of-document.html": [
         {
           "path": "mozilla/restyle-out-of-document.html",

tests/wpt/mozilla/tests/mozilla/remove_link_styles.css

@@ -0,0 +1,4 @@
+body {
+    background-color: red;
+    color: white !important;
+}

tests/wpt/mozilla/tests/mozilla/remove_link_styles.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Removing link tag should remove associated styles</title>
+<link rel="stylesheet" type="text/css" href="remove_link_styles.css">
+<link rel="match" href="remove_link_styles_ref.html">
+<body>
+    <style>
+        body {
+            color: green;
+        }
+    </style>
+
+    This text should be green and the background should not be red.
+
+    <script>
+        var l = document.querySelector('link[rel="stylesheet"]');
+        l.parentNode.removeChild(l);
+    </script>
+</body>

tests/wpt/mozilla/tests/mozilla/remove_link_styles_ref.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset="utf-8">
+<body>
+    <style>
+        body {
+            color: green;
+        }
+    </style>
+
+    This text should be green and the background should not be red.
+</body>

tests/wpt/mozilla/tests/mozilla/remove_style_styles.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Removing style element should remove all associated styles</title>
+<link rel="match" href="remove_style_styles_ref.html">
+<body>
+    <style>
+        body {
+            background-color: red;
+        }
+    </style>
+
+    This text should be black and the background should not be red.
+
+    <script>
+        // Force restyling
+        window.getComputedStyle(document.body);
+        var s = document.querySelector('style');
+        s.parentNode.removeChild(s);
+    </script>
+</body>

tests/wpt/mozilla/tests/mozilla/remove_style_styles_ref.html

@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset="utf-8">
+<body>
+    This text should be black and the background should not be red.
+</body>

tests/wpt/mozilla/tests/mozilla/reparse_style_elements.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Style elements should be reparsed on change</title>
+<link rel="match" href="reparse_style_elements_ref.html">
+<body>
+    <style>
+        body {
+            background-color: red;
+        }
+    </style>
+
+    This text should be green and the background should not be red.
+
+    <script>
+        var s = document.querySelector('body > style');
+        s.textContent = 'body { color: green; }';
+    </script>
+</body>

tests/wpt/mozilla/tests/mozilla/reparse_style_elements_ref.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset="utf-8">
+<body>
+    <style>
+        body {
+            color: green;
+        }
+    </style>
+
+    This text should be green and the background should not be red.
+</body>