Remove stylesheet from document when <link> is removed

jsdom · Jan 22, 2023 · 980c6f6 · 980c6f6
1 parent ecce8bc
commit 980c6f6
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/lib/jsdom/living/helpers/stylesheets.js b/lib/jsdom/living/helpers/stylesheets.js
@@ -65,6 +65,11 @@ function fetchStylesheetInternal(elementImpl, urlString, parsedURL) {
   }
 
   function onStylesheetLoad(data) {
+    // if the element was detached before the load could finish, don't process the data
+    if (!elementImpl._attached) {
+      return;
+    }
+
     const css = whatwgEncoding.decode(data, defaultEncoding);
 
     // TODO: MIME type checking?

diff --git a/lib/jsdom/living/nodes/HTMLLinkElement-impl.js b/lib/jsdom/living/nodes/HTMLLinkElement-impl.js
@@ -2,7 +2,7 @@
 const DOMTokenList = require("../generated/DOMTokenList");
 const HTMLElementImpl = require("./HTMLElement-impl").implementation;
 const idlUtils = require("../generated/utils");
-const { fetchStylesheet } = require("../helpers/stylesheets");
+const { fetchStylesheet, removeStylesheet } = require("../helpers/stylesheets");
 const { parseURLToResultingURLRecord } = require("../helpers/document-base-url");
 const whatwgURL = require("whatwg-url");
 
@@ -32,6 +32,13 @@ class HTMLLinkElementImpl extends HTMLElementImpl {
     maybeFetchAndProcess(this);
   }
 
+  _detach() {
+    super._detach();
+    if (this.sheet) {
+      removeStylesheet(this.sheet, this);
+    }
+  }
+
   _attrModified(name, value, oldValue) {
     super._attrModified(name, value, oldValue);
 

diff --git a/test/web-platform-tests/to-upstream/cssom/getComputedStyle-style-element-updates.html b/test/web-platform-tests/to-upstream/cssom/getComputedStyle-style-element-updates.html
@@ -36,4 +36,10 @@ <h1 class="my-class">Hello world</h1>
 
   assert_equals(getComputedStyle(el).fontSize, "3em");
 }, "Updating the inserted CSS element changes the computed style");
+
+test(() => {
+  document.head.removeChild(insertedStyle);
+
+  assert_equals(getComputedStyle(el).fontSize, "1.5em");
+}, "Removing the inserted CSS element updates the computed style back to original value");
 </script>
diff --git a/...l/semantics/document-metadata/the-link-element/stylesheet-appropriate-time-to-obtain.html b/...l/semantics/document-metadata/the-link-element/stylesheet-appropriate-time-to-obtain.html
@@ -14,7 +14,7 @@
 <script>
 "use strict";
 
-promise_test(() => {
+promise_test(t => {
 
   let resolve;
   const promise = new Promise(r => {
@@ -32,13 +32,15 @@
   link.href = "stylesheet-appropriate-time-to-obtain-1.css";
 
   document.body.appendChild(link);
+  t.add_cleanup(() => link.remove());
 
+  assert_equals(window.getComputedStyle(document.body).color, "");
 
   return promise;
 
 }, "adding a href attribute before inserting the link into the document causes the stylesheet to load and apply");
 
-promise_test(() => {
+promise_test(t => {
 
   let resolve;
   const promise = new Promise(r => {
@@ -48,6 +50,7 @@
   const link = document.createElement("link");
   link.rel = "stylesheet";
   document.body.appendChild(link);
+  t.add_cleanup(() => link.remove());
 
   link.onload = () => {
     assert_equals(window.getComputedStyle(document.body).color, "rgb(0, 0, 2)");
@@ -56,11 +59,13 @@
 
   link.href = "stylesheet-appropriate-time-to-obtain-2.css";
 
+  assert_equals(window.getComputedStyle(document.body).color, "");
+
   return promise;
 
 }, "adding a href attribute after inserting the link into the document causes the stylesheet to load and apply");
 
-promise_test(() => {
+promise_test(t => {
 
   let resolve;
   const promise = new Promise(r => {
@@ -70,6 +75,7 @@
   const link = document.createElement("link");
   link.rel = "stylesheet";
   document.body.appendChild(link);
+  t.add_cleanup(() => link.remove());
 
   link.onload = () => {
     assert_equals(window.getComputedStyle(document.body).color, "rgb(0, 0, 2)");
@@ -84,6 +90,8 @@
 
   link.href = "stylesheet-appropriate-time-to-obtain-2.css";
 
+  assert_equals(window.getComputedStyle(document.body).color, "");
+
   return promise;
 
 }, "changing the href attribute after inserting the link into the document causes the stylesheet to load again");