@depup/jsdom 28.1.0-depup.1

package/lib/jsdom/living/helpers/style-rules.js

@@ -0,0 +1,404 @@
+"use strict";
+
+const fs = require("node:fs");
+const path = require("node:path");
+const cssom = require("@acemir/cssom");
+const Specificity = require("@bramus/specificity").default;
+const { CSSStyleDeclaration } = require("cssstyle");
+const { wrapperForImpl } = require("../../../generated/idl/utils");
+const { getSpecifiedColor, getComputedOrUsedColor } = require("./colors");
+const { asciiLowercase } = require("./strings");
+const { deprecatedAliases, systemColors } = require("./system-colors");
+
+const defaultStyleSheet = fs.readFileSync(
+  path.resolve(__dirname, "../../browser/default-stylesheet.css"),
+  { encoding: "utf-8" }
+);
+let parsedDefaultStyleSheet;
+
+// Properties for which getResolvedValue is implemented. This is less than
+// every supported property.
+// https://drafts.csswg.org/indexes/#properties
+const propertiesWithResolvedValueImplemented = {
+  "__proto__": null,
+
+  // https://drafts.csswg.org/css2/visufx.html#visibility
+  "visibility": {
+    inherited: true,
+    initial: "visible",
+    computedValue: "as-specified"
+  },
+  // https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty
+  "pointer-events": {
+    inherited: true,
+    initial: "auto",
+    computedValue: "as-specified"
+  },
+  // https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color
+  "background-color": {
+    inherited: false,
+    initial: "transparent",
+    computedValue: "computed-color"
+  },
+  // https://drafts.csswg.org/css-logical-1/#propdef-border-block-end-color
+  "border-block-start-color": {
+    inherited: false,
+    initial: "currentcolor",
+    computedValue: "computed-color"
+  },
+  "border-block-end-color": {
+    inherited: false,
+    initial: "currentcolor",
+    computedValue: "computed-color"
+  },
+  "border-inline-start-color": {
+    inherited: false,
+    initial: "currentcolor",
+    computedValue: "computed-color"
+  },
+  "border-inline-end-color": {
+    inherited: false,
+    initial: "currentcolor",
+    computedValue: "computed-color"
+  },
+  // https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color
+  "border-top-color": {
+    inherited: false,
+    initial: "currentcolor",
+    computedValue: "computed-color"
+  },
+  "border-right-color": {
+    inherited: false,
+    initial: "currentcolor",
+    computedValue: "computed-color"
+  },
+  "border-bottom-color": {
+    inherited: false,
+    initial: "currentcolor",
+    computedValue: "computed-color"
+  },
+  "border-left-color": {
+    inherited: false,
+    initial: "currentcolor",
+    computedValue: "computed-color"
+  },
+  // https://drafts.csswg.org/css-ui-4/#propdef-caret-color
+  "caret-color": {
+    inherited: true,
+    initial: "auto",
+    computedValue: "computed-color"
+  },
+  // https://drafts.csswg.org/css-color-4/#propdef-color
+  "color": {
+    inherited: true,
+    initial: "canvastext",
+    computedValue: "computed-color"
+  },
+  // https://drafts.csswg.org/css-ui-4/#propdef-outline-color
+  "outline-color": {
+    inherited: false,
+    initial: "invert",
+    computedValue: "computed-color"
+  },
+  // https://drafts.csswg.org/css-display/#the-display-properties
+  // Currently only "as-specified" is supported as a computed value
+  "display": {
+    inherited: false,
+    initial: "inline",
+    computedValue: "as-specified"
+  }
+};
+const implementedProperties = Object.keys(propertiesWithResolvedValueImplemented);
+
+function getComputedStyleDeclaration(elementImpl) {
+  const styleCache = elementImpl._ownerDocument._styleCache;
+  const cachedDeclaration = styleCache.get(elementImpl);
+  if (cachedDeclaration) {
+    const opts = prepareCssstyleOpts(elementImpl);
+    const clonedDeclaration = new CSSStyleDeclaration(null, opts);
+    // TODO: Remove when cssstyle options are ready.
+    clonedDeclaration._global = elementImpl._globalObject;
+    clonedDeclaration._computed = true;
+
+    for (let i = 0; i < cachedDeclaration.length; i++) {
+      const property = cachedDeclaration.item(i);
+      const value = cachedDeclaration.getPropertyValue(property);
+      const priority = cachedDeclaration.getPropertyPriority(property);
+      clonedDeclaration.setProperty(property, value, priority);
+    }
+
+    return clonedDeclaration;
+  }
+
+  const declaration = prepareComputedStyleDeclaration(elementImpl, { styleCache });
+
+  // TODO: Remove later.
+  for (const property of implementedProperties) {
+    declaration.setProperty(property, getResolvedValue(elementImpl, property));
+  }
+  declaration._readonly = true;
+
+  return declaration;
+}
+
+function prepareComputedStyleDeclaration(elementImpl, { styleCache }) {
+  const opts = prepareCssstyleOpts(elementImpl);
+  const declaration = new CSSStyleDeclaration(null, opts);
+  // TODO: Remove when cssstyle options are ready.
+  declaration._global = elementImpl._globalObject;
+  declaration._computed = true;
+
+  applyStyleSheetRules(elementImpl, declaration);
+
+  for (let i = 0; i < elementImpl.style.length; i++) {
+    const { style } = elementImpl;
+    handlePropertyForInlineStyle(style.item(i), declaration, style);
+  }
+
+  styleCache.set(elementImpl, declaration);
+
+  return declaration;
+}
+
+function prepareCssstyleOpts(elementImpl) {
+  // TODO: Prepare options for cssstyle.
+  const opts = {
+    context: wrapperForImpl(elementImpl)
+  };
+
+  return opts;
+}
+
+function applyStyleSheetRules(elementImpl, declaration) {
+  if (!parsedDefaultStyleSheet) {
+    parsedDefaultStyleSheet = cssom.parse(defaultStyleSheet);
+  }
+
+  const specificities = new Map();
+  handleSheet(parsedDefaultStyleSheet, elementImpl, declaration, specificities);
+  for (const sheet of elementImpl._ownerDocument.styleSheets._list) {
+    handleSheet(sheet, elementImpl, declaration, specificities);
+  }
+}
+
+function handleSheet(sheet, elementImpl, declaration, specificities) {
+  for (const rule of sheet.cssRules) {
+    if (rule.media) {
+      let hasMediaScreen = false;
+      for (let i = 0; i < rule.media.length; i++) {
+        const mediaType = rule.media[i];
+        hasMediaScreen = mediaType === "screen";
+        if (hasMediaScreen) {
+          break;
+        }
+      }
+      if (rule.constructor.name === "CSSImportRule") {
+        // Handle @import rules if:
+        // - imported sheet loaded successfully
+        // - media is empty or matches "screen"
+        if (rule.styleSheet !== null && (rule.media.length === 0 || hasMediaScreen)) {
+          for (const innerRule of rule.styleSheet.cssRules) {
+            const { ast, match } = matches(innerRule, elementImpl);
+            if (match) {
+              handleRule(innerRule, declaration, specificities, ast);
+            }
+          }
+        }
+        // Keep handling @media rules only if media matches "screen"
+      } else if (hasMediaScreen) {
+        for (const innerRule of rule.cssRules) {
+          const { ast, match } = matches(innerRule, elementImpl);
+          if (match) {
+            handleRule(innerRule, declaration, specificities, ast);
+          }
+        }
+      }
+    } else {
+      const { ast, match } = matches(rule, elementImpl);
+      if (match) {
+        handleRule(rule, declaration, specificities, ast);
+      }
+    }
+  }
+}
+
+function handleRule(rule, declaration, specificities, ast) {
+  const { style } = rule;
+  for (let i = 0; i < style.length; i++) {
+    const property = style[i];
+    handleProperty(property, declaration, style, specificities, ast);
+  }
+}
+
+function handleProperty(property, declaration, style, specificities, ast) {
+  const value = style.getPropertyValue(property);
+  const priority = style.getPropertyPriority(property);
+  if (priority) {
+    declaration.setProperty(property, value, priority);
+  } else if (!declaration.getPropertyPriority(property)) {
+    const { value: specificity } = Specificity.max(...Specificity.calculate(ast));
+    if (specificities.has(property)) {
+      if (Specificity.compare(specificity, specificities.get(property)) >= 0) {
+        specificities.set(property, specificity);
+        declaration.setProperty(property, value);
+      }
+    } else {
+      specificities.set(property, specificity);
+      declaration.setProperty(property, value);
+    }
+  }
+}
+
+function handlePropertyForInlineStyle(property, declaration, style) {
+  const value = style.getPropertyValue(property);
+  const priority = style.getPropertyPriority(property);
+  if (!declaration.getPropertyPriority(property) || priority) {
+    declaration.setProperty(property, value, priority);
+  }
+}
+
+function matches(rule, elementImpl) {
+  try {
+    const { selectorText } = rule;
+    const domSelector = elementImpl._ownerDocument._domSelector;
+    const { ast, match, pseudoElement } = domSelector.check(selectorText, elementImpl);
+    // `pseudoElement` is a pseudo-element selector (e.g. `::before`).
+    // However, we do not support getComputedStyle(element, pseudoElement), so `match` is set to `false`.
+    if (pseudoElement) {
+      return {
+        match: false
+      };
+    }
+    return { ast, match, pseudoElement };
+  } catch {
+    // fall through
+  }
+  return {
+    match: false
+  };
+}
+
+// Naive implementation of https://drafts.csswg.org/css-cascade-4/#cascading
+// based on the previous jsdom implementation of getComputedStyle.
+// Does not implement https://drafts.csswg.org/css-cascade-4/#cascade-specificity,
+// or rather specificity is only implemented by the order in which the matching
+// rules appear. The last rule is the most specific while the first rule is
+// the least specific.
+function getCascadedPropertyValue(element, property) {
+  return getComputedStyleDeclaration(element).getPropertyValue(property);
+}
+
+// https://drafts.csswg.org/css-cascade-4/#specified-value
+function getSpecifiedValue(element, property) {
+  const { initial, inherited, computedValue } = propertiesWithResolvedValueImplemented[property];
+  const cascade = getCascadedPropertyValue(element, property);
+
+  if (cascade !== "") {
+    if (computedValue === "computed-color") {
+      return getSpecifiedColor(cascade);
+    }
+
+    return cascade;
+  }
+
+  // Defaulting
+  if (inherited && element.parentElement !== null) {
+    return getComputedValue(element.parentElement, property);
+  }
+
+  // root element without parent element or inherited property
+  return initial;
+}
+
+// https://drafts.csswg.org/css-cascade-4/#computed-value
+function getComputedValue(element, property) {
+  const { computedValue, inherited, initial } = propertiesWithResolvedValueImplemented[property];
+  let specifiedValue = getSpecifiedValue(element, property);
+  // https://drafts.csswg.org/css-cascade/#defaulting-keywords
+  switch (specifiedValue) {
+    case "initial": {
+      specifiedValue = initial;
+      break;
+    }
+    case "inherit": {
+      if (element.parentElement !== null) {
+        specifiedValue = getComputedValue(element.parentElement, property);
+      } else {
+        specifiedValue = initial;
+      }
+      break;
+    }
+    case "unset": {
+      if (inherited && element.parentElement !== null) {
+        specifiedValue = getComputedValue(element.parentElement, property);
+      } else {
+        specifiedValue = initial;
+      }
+      break;
+    }
+    // TODO: https://drafts.csswg.org/css-cascade-5/#revert-layer
+    case "revert-layer": {
+      break;
+    }
+    // TODO: https://drafts.csswg.org/css-cascade-5/#default
+    case "revert": {
+      break;
+    }
+    default: {
+      // fall through; specifiedValue is not a CSS-wide keyword.
+    }
+  }
+  if (computedValue === "as-specified") {
+    return specifiedValue;
+  } else if (computedValue === "computed-color") {
+    let value = asciiLowercase(specifiedValue);
+    // https://drafts.csswg.org/css-color-4/#resolving-other-colors
+    if (specifiedValue === "currentcolor") {
+      if (property === "color") {
+        if (element.parentElement !== null) {
+          return getComputedValue(element.parentElement, "color");
+        }
+        value = initial;
+      } else {
+        return getComputedValue(element, "color");
+      }
+    }
+    if (systemColors.has(value) || deprecatedAliases.has(value)) {
+      let key = value;
+      if (deprecatedAliases.has(value)) {
+        key = deprecatedAliases.get(value);
+      }
+      const { light, dark } = systemColors.get(key);
+      const colorScheme = getCascadedPropertyValue(element, "color-scheme");
+      if (colorScheme === "dark") {
+        return dark;
+      }
+      return light;
+    }
+    return getComputedOrUsedColor(specifiedValue);
+  }
+
+  throw new TypeError(`Internal error: unrecognized computed value instruction '${computedValue}'`);
+}
+
+// https://drafts.csswg.org/cssom/#resolved-value
+// Only implements the properties that are defined in propertiesWithResolvedValueImplemented.
+function getResolvedValue(element, property) {
+  // We can always use the computed value with the current set of propertiesWithResolvedValueImplemented:
+  // * Color properties end up with the used value, but we don't implement any actual differences between used and
+  //   computed that https://drafts.csswg.org/css-cascade-5/#used-value gestures at.
+  // * The other properties fall back to the "any other property: The resolved value is the computed value." case.
+  return getComputedValue(element, property);
+}
+
+function invalidateStyleCache(elementImpl) {
+  if (elementImpl._attached) {
+    elementImpl._ownerDocument._styleCache = new WeakMap();
+  }
+}
+
+module.exports = {
+  SHADOW_DOM_PSEUDO_REGEXP: /^::(?:part|slotted)\(/i,
+  getComputedStyleDeclaration,
+  invalidateStyleCache
+};

package/lib/jsdom/living/helpers/stylesheets.js

@@ -0,0 +1,148 @@
+"use strict";
+const cssom = require("@acemir/cssom");
+const { legacyHookDecode } = require("@exodus/bytes/encoding.js");
+const whatwgURL = require("whatwg-url");
+const { invalidateStyleCache } = require("./style-rules");
+
+// TODO: this should really implement https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet
+// It (and the things it calls) is nowhere close right now.
+exports.fetchStylesheet = (elementImpl, urlString, importRule) => {
+  const document = elementImpl._ownerDocument;
+  let defaultEncodingLabel = document._encoding;
+  const resourceLoader = document._resourceLoader;
+
+  if (elementImpl.localName === "link" && elementImpl.hasAttributeNS(null, "charset")) {
+    defaultEncodingLabel = elementImpl.getAttributeNS(null, "charset");
+  }
+
+  function onStylesheetLoad(data, response) {
+    if (!response.ok) {
+      throw new Error("Status code: " + response.status);
+    }
+
+    // if the element was detached before the load could finish, don't process the data
+    if (!elementImpl._attached) {
+      return;
+    }
+
+    const css = legacyHookDecode(data, defaultEncodingLabel);
+
+    // TODO: MIME type checking?
+    if (!importRule && elementImpl.sheet) {
+      exports.removeStylesheet(elementImpl.sheet, elementImpl);
+    }
+
+    if (importRule) {
+      // According to the spec, we don't add the stylesheet to the document's
+      // stylesheet list when it's loaded via an @import rule.
+      exports.createStylesheet(css, elementImpl, urlString, {
+        ownerRule: importRule,
+        styleSheet: importRule.styleSheet
+      });
+    } else {
+      const createdSheet = exports.createStylesheet(css, elementImpl, urlString, {
+        ownerNode: elementImpl
+      });
+      exports.addStylesheet(createdSheet, elementImpl);
+    }
+  }
+
+  resourceLoader.fetch(urlString, {
+    element: elementImpl,
+    onLoad: onStylesheetLoad
+  });
+};
+
+// https://drafts.csswg.org/cssom/#remove-a-css-style-sheet
+exports.removeStylesheet = (sheet, elementImpl) => {
+  const { styleSheets } = elementImpl._ownerDocument;
+  styleSheets._remove(sheet);
+
+  // Remove the association explicitly; in the spec it's implicit so this step doesn't exist.
+  elementImpl.sheet = null;
+
+  invalidateStyleCache(elementImpl);
+
+  // TODO: "Set the CSS style sheet’s parent CSS style sheet, owner node and owner CSS rule to null."
+  // Probably when we have a real CSSOM implementation.
+};
+
+// https://drafts.csswg.org/cssom/#create-a-css-style-sheet kinda:
+// - Parsing failures are now handled gracefully
+// - Like the browser's behaviour, when css.parse() passes trough some invalid CSS
+//   it will try it's best to ignore the invalid parts without blocking the parsing operations
+//   returning a stylesheet with the valid parts only.
+// - css.parse() now receives a funcion that we can use to handle the error as it's second argument
+// - The import rules stuff seems out of place, and probably should affect the load event...
+exports.createStylesheet = (sheetText, elementImpl, baseURLString, parserOptions) => {
+  const sheet = cssom.parse(sheetText, {
+    globalObject: elementImpl._globalObject,
+    ...parserOptions
+  }, err => {
+    if (elementImpl._ownerDocument._defaultView) {
+      const error = new Error("Could not parse CSS stylesheet", { cause: err });
+      error.sheetText = sheetText;
+      error.type = "css-parsing";
+
+      elementImpl._ownerDocument._defaultView._virtualConsole.emit("jsdomError", error);
+    }
+  });
+
+  scanForImportRules(elementImpl, sheet.cssRules, baseURLString);
+
+  return sheet;
+};
+
+// https://drafts.csswg.org/cssom/#add-a-css-style-sheet
+exports.addStylesheet = (sheet, elementImpl) => {
+  elementImpl._ownerDocument.styleSheets._add(sheet);
+
+  // Set the association explicitly; in the spec it's implicit.
+  elementImpl.sheet = sheet;
+
+  invalidateStyleCache(elementImpl);
+
+  // TODO: title and disabled stuff
+};
+
+// Tracking in https://github.com/jsdom/jsdom/issues/2124
+function scanForImportRules(elementImpl, cssRules, baseURLString) {
+  if (!cssRules) {
+    return;
+  }
+
+  for (let i = 0; i < cssRules.length; ++i) {
+    if (cssRules[i].cssRules) {
+      // @media rule: keep searching inside it.
+      scanForImportRules(elementImpl, cssRules[i].cssRules, baseURLString);
+    } else if (cssRules[i].href) {
+      // @import rule: fetch the resource and evaluate it.
+      // See http://dev.w3.org/csswg/cssom/#css-import-rule
+      //     If loading of the style sheet fails its cssRules list is simply
+      //     empty. I.e. an @import rule always has an associated style sheet.
+
+      // Use whatwgURL.URL instead of whatwgURL.parseURL so that we get an error we can use as the cause if the URL
+      // doesn't parse.
+      let parsed;
+      try {
+        parsed = new whatwgURL.URL(cssRules[i].href, baseURLString);
+      } catch (cause) {
+        const window = elementImpl._ownerDocument._defaultView;
+        if (window) {
+          // Synthetic cause to ensure that all resource loading errors have causes.
+          const error = new Error(
+            `Could not parse CSS @import URL "${cssRules[i].href}" relative to base URL "${baseURLString}"`,
+            { cause }
+          );
+          error.type = "resource-loading";
+          error.url = cssRules[i].href;
+          window._virtualConsole.emit("jsdomError", error);
+        }
+      }
+
+      if (parsed) {
+        exports.fetchStylesheet(elementImpl, parsed.href, cssRules[i]);
+      }
+    }
+  }
+}

package/lib/jsdom/living/helpers/svg/basic-types.js

@@ -0,0 +1,41 @@
+"use strict";
+
+// https://svgwg.org/svg2-draft/types.html#TermDetach
+function detach(value) {
+  if (typeof value === "string") {
+    return;
+  }
+
+  throw new TypeError(`jsdom internal error: detaching object of wrong type ${value}`);
+}
+exports.detach = detach;
+
+// https://svgwg.org/svg2-draft/types.html#TermAttach
+// listObject corresponds to the parameter taken by the algorithm in the spec, but is currently unused because only
+// DOMString type is supported by jsdom (and this function) right now.
+// eslint-disable-next-line no-unused-vars
+function attach(value, listObject) {
+  if (typeof value === "string") {
+    return;
+  }
+
+  throw new TypeError(`jsdom internal error: attaching object of wrong type ${value}`);
+}
+exports.attach = attach;
+
+// https://svgwg.org/svg2-draft/types.html#TermReserialize for DOMString.
+function reserializeSpaceSeparatedTokens(elements) {
+  return elements.join(" ");
+}
+exports.reserializeSpaceSeparatedTokens = reserializeSpaceSeparatedTokens;
+
+// Used for systemLanguage attribute, whose value is a set of comma-separated tokens:
+// https://svgwg.org/svg2-draft/struct.html#SystemLanguageAttribute
+// SVG 2 spec (https://svgwg.org/svg2-draft/types.html#TermReserialize) says any SVGStringList should reserialize the
+// same way, as space-separated tokens, but doing so for systemLanguage is illogical and contradicts the Firefox
+// behavior.
+// I cannot find a description of reserialization of SVGStringList in the SVG 1.1 spec.
+function reserializeCommaSeparatedTokens(elements) {
+  return elements.join(", ");
+}
+exports.reserializeCommaSeparatedTokens = reserializeCommaSeparatedTokens;

package/lib/jsdom/living/helpers/svg/render.js

@@ -0,0 +1,46 @@
+"use strict";
+const { SVG_NS } = require("../namespaces");
+
+// https://svgwg.org/svg2-draft/render.html#TermNeverRenderedElement
+const neverRenderedElements = new Set([
+  "clipPath",
+  "defs",
+  "desc",
+  "linearGradient",
+  "marker",
+  "mask",
+  "metadata",
+  "pattern",
+  "radialGradient",
+  "script",
+  "style",
+  "title",
+  "symbol"
+]);
+
+// https://svgwg.org/svg2-draft/render.html#Rendered-vs-NonRendered
+exports.isRenderedElement = elImpl => {
+  if (neverRenderedElements.has(elImpl._localName)) {
+    return false;
+  }
+
+  // This does not check for elements excluded because of conditional processing attributes or ‘switch’ structures,
+  // because conditional processing is not implemented.
+  // https://svgwg.org/svg2-draft/struct.html#ConditionalProcessing
+
+  // This does not check for computed style of display being none, since that is not yet implemented for HTML
+  // focusability either (and there are no tests yet).
+
+  if (!elImpl.isConnected) {
+    return false;
+  }
+
+  // The spec is unclear about how to deal with non-SVG parents, so we only perform this check for SVG-namespace
+  // parents.
+  if (elImpl.parentElement && elImpl.parentElement._namespaceURI === SVG_NS &&
+                              !exports.isRenderedElement(elImpl.parentNode)) {
+    return false;
+  }
+
+  return true;
+};