From 491ecfb0f1800b7d0c4680c724b88fc361ceb7e2 Mon Sep 17 00:00:00 2001
From: Andrey Mnatsakanov <andrey@3ig.dev>
Date: Sun, 26 Jul 2026 11:09:42 +0200
Subject: [PATCH 1/2] fix(js): clone nodes structurally instead of via
 div.innerHTML
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

cloneNode(true) round-tripped through a throwaway <div>'s innerHTML, so the
HTML fragment parser discarded elements that are not valid children of <div>
(<tr>, <td>, <option>, <tbody>, …) — createElement('tr').cloneNode(true)
returned null — and JS-set inline styles were lost. The shallow path also
re-derived attributes by regex-scraping serialized HTML.

Clone structurally with real DOM APIs: shallow-clone each node via
createElement/createElementNS plus a getAttributeNames() attribute copy (no
parsing context, every attribute preserved), then descend into children with an
explicit stack so a deep subtree cannot overflow the JS stack. Text, Comment,
DocumentFragment and <template> contents are handled.

Fixes #490
---
 crates/obscura-js/js/bootstrap.js | 75 +++++++++++++++++++++----------
 crates/obscura-js/src/runtime.rs  | 52 +++++++++++++++++++++
 2 files changed, 104 insertions(+), 23 deletions(-)

diff --git a/crates/obscura-js/js/bootstrap.js b/crates/obscura-js/js/bootstrap.js
index 4a0f53f..3ce7268 100644
--- a/crates/obscura-js/js/bootstrap.js
+++ b/crates/obscura-js/js/bootstrap.js
@@ -584,6 +584,29 @@ const _styleProxy = (decl) => new Proxy(decl, {
   },
 });
 
+// Clone a single node (no children), used by Node.cloneNode. Elements are built
+// with createElement/createElementNS and their content attributes copied, so no
+// HTML parsing context is involved and every attribute (including style) is
+// preserved. Text/Comment/DocumentFragment map to their factory; anything else
+// yields null.
+function _shallowCloneNode(node) {
+  const nt = node.nodeType;
+  if (nt === 3) return document.createTextNode(node.data != null ? node.data : (node.textContent || ""));
+  if (nt === 8) return document.createComment(node.data != null ? node.data : (node.nodeValue || ""));
+  if (nt === 11) return document.createDocumentFragment();
+  if (nt !== 1) return null;
+  const ns = node.namespaceURI;
+  const el = (ns && ns !== "http://www.w3.org/1999/xhtml")
+    ? document.createElementNS(ns, node.nodeName)
+    : document.createElement(node.localName || node.nodeName.toLowerCase());
+  const names = node.getAttributeNames ? node.getAttributeNames() : [];
+  for (const name of names) {
+    const v = node.getAttribute(name);
+    if (v !== null) el.setAttribute(name, v);
+  }
+  return el;
+}
+
 class Node {
   static ELEMENT_NODE = 1;
   static ATTRIBUTE_NODE = 2;
@@ -774,32 +797,38 @@ class Node {
   contains(o) { return o ? _dom("contains", this._nid, o._nid) === "true" : false; }
   hasChildNodes() { return _dom("has_child_nodes", this._nid) === "true"; }
   cloneNode(deep) {
-    const t = this.nodeType;
-    if (t === 1) {
-      if (deep) {
-        const wrapper = document.createElement('div');
-        wrapper.innerHTML = _domParse("outer_html", this._nid) || "";
-        const clone = wrapper.firstChild;
-        return clone;
-      }
-      const el = document.createElement(this.nodeName.toLowerCase());
-      const html = _domParse("outer_html", this._nid) || "";
-      const attrMatch = html.match(/^<[a-zA-Z][^\s>]*([\s\S]*?)>/);
-      if (attrMatch && attrMatch[1]) {
-        const attrStr = attrMatch[1].trim();
-        const re = /([a-zA-Z_:][a-zA-Z0-9_.:-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
-        let m;
-        while ((m = re.exec(attrStr)) !== null) {
-          const name = m[1];
-          const val = m[2] !== undefined ? m[2] : m[3] !== undefined ? m[3] : m[4] || "";
-          if (name !== this.nodeName.toLowerCase()) el.setAttribute(name, val);
+    // Clone structurally via real DOM nodes rather than round-tripping through a
+    // throwaway <div>.innerHTML: the fragment parser discards elements that are
+    // not valid children of <div> (<tr>, <td>, <option>, …), so the old path
+    // returned null for them and lost JS-set inline styles. Building each node
+    // directly with createElement(NS) + attribute copy avoids any parsing
+    // context, and an explicit stack keeps a deep subtree from overflowing the
+    // JS stack (issue #490).
+    const root = _shallowCloneNode(this);
+    if (!deep || !root) return root;
+    const stack = [[this, root]];
+    while (stack.length) {
+      const [src, dst] = stack.pop();
+      // A <template>'s children hang off its content fragment, not childNodes,
+      // so clone them into the clone's fragment. Gated on the tag name because
+      // .content means something else on other elements (e.g. <meta>).
+      if (src.localName === 'template' && dst.localName === 'template') {
+        const sc = src.content, dc = dst.content;
+        if (sc && dc && sc.childNodes) {
+          const tk = sc.childNodes;
+          for (let i = 0; i < tk.length; i++) {
+            const c = _shallowCloneNode(tk[i]);
+            if (c) { dc.appendChild(c); stack.push([tk[i], c]); }
+          }
         }
       }
-      return el;
+      const kids = src.childNodes;
+      for (let i = 0; i < kids.length; i++) {
+        const c = _shallowCloneNode(kids[i]);
+        if (c) { dst.appendChild(c); stack.push([kids[i], c]); }
+      }
     }
-    if (t === 3) return document.createTextNode(this.textContent);
-    if (t === 8) return document.createComment(this.nodeValue || "");
-    return null;
+    return root;
   }
   compareDocumentPosition(other) {
     if (!other) return 0;
diff --git a/crates/obscura-js/src/runtime.rs b/crates/obscura-js/src/runtime.rs
index fdfeb4d..94bc177 100644
--- a/crates/obscura-js/src/runtime.rs
+++ b/crates/obscura-js/src/runtime.rs
@@ -1317,6 +1317,58 @@ mod tests {
         rt
     }
 
+    #[test]
+    fn clone_node_deep_preserves_context_sensitive_elements() {
+        // A <tr> is not a valid child of <div>, so cloning through a throwaway
+        // <div>.innerHTML dropped it and returned null. A structural clone keeps it.
+        let mut rt = setup_runtime("<html><body></body></html>");
+        let tag = rt
+            .evaluate("(document.createElement('tr').cloneNode(true) || {}).tagName || 'NULL'")
+            .unwrap();
+        assert_eq!(tag, serde_json::json!("TR"));
+        let td = rt
+            .evaluate("(document.createElement('td').cloneNode(true) || {}).tagName || 'NULL'")
+            .unwrap();
+        assert_eq!(td, serde_json::json!("TD"));
+    }
+
+    #[test]
+    fn clone_node_deep_copies_children_and_attributes() {
+        let mut rt = setup_runtime(r#"<html><body><ul id="l"><li class="a">one</li><li class="b">two</li></ul></body></html>"#);
+        let out = rt
+            .evaluate(
+                "(function(){var c=document.getElementById('l').cloneNode(true); return c.children.length + '|' + c.children[0].className + '|' + c.children[1].textContent;})()",
+            )
+            .unwrap();
+        assert_eq!(out, serde_json::json!("2|a|two"));
+    }
+
+    #[test]
+    fn clone_node_deep_preserves_table_rows() {
+        let mut rt = setup_runtime(
+            r#"<html><body><table id="t"><tbody><tr><td>1</td><td>2</td></tr></tbody></table></body></html>"#,
+        );
+        // Navigate the detached clone directly (querySelector does not traverse
+        // detached subtrees). tbody > tr > (td, td).
+        let out = rt
+            .evaluate(
+                "(function(){var tb=document.querySelector('#t tbody').cloneNode(true); var tr=tb.children[0]; return tr.tagName + '|' + tr.children.length + '|' + tr.children[1].textContent;})()",
+            )
+            .unwrap();
+        assert_eq!(out, serde_json::json!("TR|2|2"));
+    }
+
+    #[test]
+    fn clone_node_shallow_copies_attributes_without_children() {
+        let mut rt = setup_runtime(r#"<html><body><div id="d" data-x="7"><span>kid</span></div></body></html>"#);
+        let out = rt
+            .evaluate(
+                "(function(){var c=document.getElementById('d').cloneNode(false); return c.getAttribute('data-x') + '|' + c.childNodes.length;})()",
+            )
+            .unwrap();
+        assert_eq!(out, serde_json::json!("7|0"));
+    }
+
     #[test]
     fn test_document_title() {
         let mut rt = setup_runtime("<html><head><title>Test</title></head><body></body></html>");

From 5d7a02041a26e794be02c18521507001c560281d Mon Sep 17 00:00:00 2001
From: SGavrl <277843151+SGavrl@users.noreply.github.com>
Date: Sat, 1 Aug 2026 15:41:45 +0000
Subject: [PATCH 2/2] fix(js): preserve inline styles when cloning

---
 crates/obscura-js/js/bootstrap.js |  4 ++++
 crates/obscura-js/src/runtime.rs  | 22 ++++++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/crates/obscura-js/js/bootstrap.js b/crates/obscura-js/js/bootstrap.js
index a63d335..eb2b223 100644
--- a/crates/obscura-js/js/bootstrap.js
+++ b/crates/obscura-js/js/bootstrap.js
@@ -654,6 +654,10 @@ function _shallowCloneNode(node) {
     const v = node.getAttribute(name);
     if (v !== null) el.setAttribute(name, v);
   }
+  // CSS declarations currently live on the JS wrapper independently of the
+  // DOM attribute. Copy that state as well so styles assigned through
+  // `node.style` survive cloning even before attribute reflection runs.
+  if (node.style && node.style.cssText) el.style.cssText = node.style.cssText;
   return el;
 }
 
diff --git a/crates/obscura-js/src/runtime.rs b/crates/obscura-js/src/runtime.rs
index 0f2b629..714543b 100644
--- a/crates/obscura-js/src/runtime.rs
+++ b/crates/obscura-js/src/runtime.rs
@@ -1369,6 +1369,28 @@ mod tests {
         assert_eq!(out, serde_json::json!("7|0"));
     }
 
+    #[test]
+    fn clone_node_copies_js_assigned_inline_styles() {
+        let mut rt = setup_runtime("<html><body><div id='d'></div></body></html>");
+        let out = rt
+            .evaluate(
+                "(function(){var d=document.getElementById('d');d.style.color='red';d.style.fontSize='12px';var c=d.cloneNode(false);return c.style.color+'|'+c.style.fontSize+'|'+c.style.cssText;})()",
+            )
+            .unwrap();
+        assert_eq!(out, serde_json::json!("red|12px|color: red; font-size: 12px;"));
+    }
+
+    #[test]
+    fn clone_node_deep_copies_template_content() {
+        let mut rt = setup_runtime("<html><body></body></html>");
+        let out = rt
+            .evaluate(
+                "(function(){var t=document.createElement('template');t.content.appendChild(document.createElement('option')).textContent='choice';var c=t.cloneNode(true);return c.content.childNodes.length+'|'+c.content.firstChild.tagName+'|'+c.content.firstChild.textContent;})()",
+            )
+            .unwrap();
+        assert_eq!(out, serde_json::json!("1|OPTION|choice"));
+    }
+
     #[test]
     fn test_document_title() {
         let mut rt = setup_runtime("<html><head><title>Test</title></head><body></body></html>");