smooth-screenshot 1.1.1 → 1.1.3

package/README.md

@@ -6,6 +6,8 @@
 [![types](https://img.shields.io/npm/types/smooth-screenshot)](https://www.npmjs.com/package/smooth-screenshot)
 [![license](https://img.shields.io/npm/l/smooth-screenshot)](./LICENSE)
 
+**[Live demo & docs → luccas-carvalho.github.io/smooth-screenshot](https://luccas-carvalho.github.io/smooth-screenshot/)**
+
 **Capture any DOM element to PNG, JPEG, WebP, SVG, or PDF — without ever freezing the UI.**
 
 Most DOM-to-image libraries do all their work in one synchronous burst: on a large

package/dist/index.cjs

@@ -250,8 +250,25 @@ function createContext(target, options) {
   return context;
 }
 
+// src/util/ns.ts
+var svgNs = null;
+var xhtmlNs = null;
+function svgNamespace(doc) {
+  if (svgNs === null) {
+    const probe = doc.createElement("div");
+    probe.innerHTML = "<svg></svg>";
+    svgNs = probe.firstElementChild.namespaceURI ?? "";
+  }
+  return svgNs;
+}
+function xhtmlNamespace(doc) {
+  if (xhtmlNs === null) {
+    xhtmlNs = doc.createElement("div").namespaceURI ?? "";
+  }
+  return xhtmlNs;
+}
+
 // src/clone/default-style.ts
-var XHTML_NS = "http://www.w3.org/1999/xhtml";
 function ensureSandbox(context) {
   if (context.sandbox?.contentDocument) {
     return context.sandbox.contentDocument;
@@ -267,7 +284,8 @@ function ensureSandbox(context) {
   return doc;
 }
 function getDefaultStyle(context, source) {
-  const namespace = source.namespaceURI ?? XHTML_NS;
+  const xhtmlNs2 = xhtmlNamespace(context.ownerDocument);
+  const namespace = source.namespaceURI ?? xhtmlNs2;
   const key = `${namespace}|${source.localName}`;
   const cached = context.defaultStyleCache.get(key);
   if (cached) return cached;
@@ -278,7 +296,7 @@ function getDefaultStyle(context, source) {
     context.defaultStyleCache.set(key, empty);
     return empty;
   }
-  const element = namespace === XHTML_NS ? doc.createElement(source.localName) : doc.createElementNS(namespace, source.localName);
+  const element = namespace === xhtmlNs2 ? doc.createElement(source.localName) : doc.createElementNS(namespace, source.localName);
   doc.body.appendChild(element);
   const computed = sandboxWindow.getComputedStyle(element);
   const record = {};
@@ -292,15 +310,40 @@ function getDefaultStyle(context, source) {
 }
 
 // src/clone/copy-styles.ts
+var PHYSICAL_BORDER_WIDTHS = [
+  "border-top-width",
+  "border-right-width",
+  "border-bottom-width",
+  "border-left-width"
+];
+function isBorderStyleOrColor(name) {
+  if (!name.startsWith("border")) return false;
+  if (name.startsWith("border-image") || name.startsWith("border-radius")) {
+    return false;
+  }
+  return name.endsWith("style") || name.endsWith("color");
+}
 function copyStyle(source, target, context) {
   const computed = context.ownerWindow.getComputedStyle(source);
   const defaults = getDefaultStyle(context, source);
-  const targetStyle = target.style;
+  const toCopy = /* @__PURE__ */ new Set();
   for (let i = 0; i < computed.length; i++) {
     const name = computed[i];
     if (!name) continue;
     const value = computed.getPropertyValue(name);
     if (value === "" || defaults[name] === value) continue;
+    toCopy.add(name);
+  }
+  if (Array.from(toCopy).some(isBorderStyleOrColor)) {
+    for (const width of PHYSICAL_BORDER_WIDTHS) toCopy.add(width);
+  }
+  if (toCopy.has("outline-style") || toCopy.has("outline-color") || toCopy.has("outline")) {
+    toCopy.add("outline-width");
+  }
+  const targetStyle = target.style;
+  for (const name of toCopy) {
+    const value = computed.getPropertyValue(name);
+    if (value === "") continue;
     targetStyle.setProperty(name, value, computed.getPropertyPriority(name));
   }
 }
@@ -713,8 +756,6 @@ async function embedResources(clone, context) {
 }
 
 // src/serialize/foreign-object-svg.ts
-var SVG_NS = "http://www.w3.org/2000/svg";
-var XHTML_NS2 = "http://www.w3.org/1999/xhtml";
 function buildSvgString(params) {
   const {
     clone,
@@ -728,25 +769,26 @@ function buildSvgString(params) {
   } = params;
   const outW = crop ? crop.width : fullWidth;
   const outH = crop ? crop.height : fullHeight;
-  const svg = doc.createElementNS(SVG_NS, "svg");
-  svg.setAttribute("xmlns", SVG_NS);
+  const svgNs2 = svgNamespace(doc);
+  const svg = doc.createElementNS(svgNs2, "svg");
+  svg.setAttribute("xmlns", svgNs2);
   svg.setAttribute("width", String(outW));
   svg.setAttribute("height", String(outH));
   svg.setAttribute("viewBox", `0 0 ${outW} ${outH}`);
   if (backgroundColor) {
-    const rect = doc.createElementNS(SVG_NS, "rect");
+    const rect = doc.createElementNS(svgNs2, "rect");
     rect.setAttribute("width", "100%");
     rect.setAttribute("height", "100%");
     rect.setAttribute("fill", backgroundColor);
     svg.appendChild(rect);
   }
-  const foreignObject = doc.createElementNS(SVG_NS, "foreignObject");
+  const foreignObject = doc.createElementNS(svgNs2, "foreignObject");
   foreignObject.setAttribute("x", String(crop ? -crop.x : 0));
   foreignObject.setAttribute("y", String(crop ? -crop.y : 0));
   foreignObject.setAttribute("width", String(fullWidth));
   foreignObject.setAttribute("height", String(fullHeight));
   const container = doc.createElement("div");
-  container.setAttribute("xmlns", XHTML_NS2);
+  container.setAttribute("xmlns", xhtmlNamespace(doc));
   if (fontCss || pseudoRules.length > 0) {
     const style = doc.createElement("style");
     style.textContent = `${fontCss}