From 87c2b4ddae6f739043f935e1c444dec5aa85a06d Mon Sep 17 00:00:00 2001
From: Pranav Zinzurde <pranav.z@browserstack.com>
Date: Thu, 20 Aug 2026 17:39:17 +0530
Subject: [PATCH 1/3] fix(dom): stop duplicating authored <style> text in
 cloneNodeAndShadow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

clone-dom.js unconditionally set clone.textContent = cssText for every
<style> tag, including ones with their own authored text — the generic
walkTree call right after then re-cloned the live text node on top of
that, doubling the parsed rule count. This defeats serializeCSSOM's
identity guard (styleSheetsMatch) whenever the doubled clone sheet
doesn't cleanly match the live sheet rule-for-rule (e.g. any unrelated
CSSOM mutation elsewhere in the same stylesheet), forcing a full lossy
re-serialization via cssRules.map(r => r.cssText) that expands
shorthands like `background: var(--x)` into empty longhands.

Only synthesize clone.textContent for CSSOM-only sheets that have no
text node of their own; a <style> with authored text now gets it once,
from walkTree, with no manual assignment.

As a side effect this also removes a false-positive
data-percy-cssom-serialized marking: the old code set that attribute
unconditionally whenever cssText was truthy, even for ordinary <style>
tags that were never actually re-serialized from CSSOM. Updated two
existing serialize-cssom tests that had encoded this over-marking as
expected behavior.

Fixes PER-10567

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 packages/dom/src/clone-dom.js           | 21 ++++++++-----
 packages/dom/test/serialize-css.test.js | 39 +++++++++++++++++++++++--
 2 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/packages/dom/src/clone-dom.js b/packages/dom/src/clone-dom.js
index 89e752986..e267bf518 100644
--- a/packages/dom/src/clone-dom.js
+++ b/packages/dom/src/clone-dom.js
@@ -79,22 +79,27 @@ export function cloneNodeAndShadow(ctx) {
 
       // Handle <style> tag specifically for media queries
       if (node.nodeName === 'STYLE' && !enableJavaScript) {
-        let cssText = node.textContent?.trim() || '';
-        if (!cssText && node.sheet) {
+        let ownText = node.textContent?.trim() || '';
+        // Only synthesize text for CSSOM-only sheets (JS-inserted, no text
+        // node of their own). A <style> that already has its own text gets
+        // it from walkTree below — setting clone.textContent here as well
+        // would duplicate it (walkTree re-clones the live text node right
+        // after), doubling the parsed rule count and defeating
+        // serializeCSSOM's identity guard (styleSheetsMatch).
+        if (!ownText && node.sheet) {
           try {
             const cssRules = node.sheet.cssRules;
             if (cssRules && cssRules.length > 0) {
-              cssText = Array.from(cssRules).map(rule => rule.cssText).join('\n');
+              let cssText = Array.from(cssRules).map(rule => rule.cssText).join('\n');
+              if (cssText) {
+                clone.textContent = cssText;
+                clone.setAttribute('data-percy-cssom-serialized', 'true');
+              }
             }
           } catch (_) {
             // ignore errors
           }
         }
-
-        if (cssText) {
-          clone.textContent = cssText;
-          clone.setAttribute('data-percy-cssom-serialized', 'true');
-        }
       }
 
       // We apply any element transformations here to avoid another treeWalk
diff --git a/packages/dom/test/serialize-css.test.js b/packages/dom/test/serialize-css.test.js
index 6cecac6cb..e35d0fcc1 100644
--- a/packages/dom/test/serialize-css.test.js
+++ b/packages/dom/test/serialize-css.test.js
@@ -44,8 +44,14 @@ describe('serializeCSSOM', () => {
       it(`${platform}: serializes CSSOM and does not mutate the orignal DOM`, () => {
         let $cssom = parseDOM(serializeDOM(), platform)('[data-percy-cssom-serialized]');
 
-        // linked and unmodified stylesheets are not included
-        expect($cssom).toHaveSize(3);
+        // linked and unmodified stylesheets are not included. Plain
+        // authored <style> tags with unchanged content (e.g. `style`
+        // below, `.box { background: green; }`) are cloned via walkTree,
+        // not synthesized from CSSOM, so they never carry this marker
+        // either — clone-dom previously set it unconditionally whenever
+        // it had any text to clone, which falsely flagged every ordinary
+        // <style> as CSSOM-serialized (PER-10567).
+        expect($cssom).toHaveSize(2);
         expect($cssom[0].innerHTML).toBe('.box { height: 500px; }');
         expect($cssom[1].innerHTML).toBe('.box { width: 1000px; }');
 
@@ -83,7 +89,9 @@ describe('serializeCSSOM', () => {
         cssomSheet.deleteRule(0); // Remove all rules to make it empty
         const serialized = serializeDOM();
         let $cssom = parseDOM(serialized, platform)('[data-percy-cssom-serialized]');
-        expect($cssom).toHaveSize(2); // should skip the empty stylesheet
+        // should skip the empty stylesheet; only `mod` (genuinely
+        // CSSOM-mutated) remains marked — see PER-10567 note above.
+        expect($cssom).toHaveSize(1);
       });
 
       it(`${platform}: preserves media queries inside CSSOM`, () => {
@@ -549,5 +557,30 @@ describe('serializeCSSOM', () => {
       expect(reserialized).not.toBeNull();
       expect(reserialized.textContent).toContain('.live-only');
     });
+
+    it('clone-dom does not duplicate authored <style> text end-to-end (preserves `background: var(--x)` shorthand)', () => {
+      // PER-10567: clone-dom previously set clone.textContent = cssText for
+      // every <style> (even ones with their own authored text), and the
+      // subsequent generic walkTree call re-cloned the live text node on
+      // top of that — doubling the parsed rule count. This is the same
+      // failure mode the styleSheetsMatch relaxation above tolerates for a
+      // clean duplicate, but a real page's stylesheet can still fail that
+      // guard (e.g. any unrelated CSSOM mutation elsewhere in the same
+      // sheet), forcing a full lossy re-serialization that expands
+      // shorthands like `background: var(--x)` into empty longhands. The
+      // fix is to never duplicate in the first place: only synthesize
+      // clone.textContent for CSSOM-only sheets that have no text node of
+      // their own.
+      withExample('<style id="var-shorthand">.box { all: initial; background: var(--x); background-clip: text; }</style>', { withShadow: false });
+
+      let liveStyle = document.getElementById('var-shorthand');
+      let liveText = liveStyle.textContent;
+
+      let $ = parseDOM(serializeDOM(), 'plain');
+      let clonedStyle = $('#var-shorthand')[0];
+
+      expect(clonedStyle.innerHTML).toBe(liveText);
+      expect(clonedStyle.getAttribute('data-percy-cssom-serialized')).toBeNull();
+    });
   });
 });

From 9b813431b969d727f391ac7cccc1a4608e39e989 Mon Sep 17 00:00:00 2001
From: Pranav Zinzurde <pranav.z@browserstack.com>
Date: Mon, 24 Aug 2026 02:33:52 +0530
Subject: [PATCH 2/3] refactor(dom): keep the PER-10567 rationale in the PR
 description, not the code

Drops the explanatory comment blocks added with the fix so clone-dom.js and
the tests carry only the behavioural change.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 packages/dom/src/clone-dom.js           |  6 ------
 packages/dom/test/serialize-css.test.js | 26 +++----------------------
 2 files changed, 3 insertions(+), 29 deletions(-)

diff --git a/packages/dom/src/clone-dom.js b/packages/dom/src/clone-dom.js
index e267bf518..2f7c8b491 100644
--- a/packages/dom/src/clone-dom.js
+++ b/packages/dom/src/clone-dom.js
@@ -80,12 +80,6 @@ export function cloneNodeAndShadow(ctx) {
       // Handle <style> tag specifically for media queries
       if (node.nodeName === 'STYLE' && !enableJavaScript) {
         let ownText = node.textContent?.trim() || '';
-        // Only synthesize text for CSSOM-only sheets (JS-inserted, no text
-        // node of their own). A <style> that already has its own text gets
-        // it from walkTree below — setting clone.textContent here as well
-        // would duplicate it (walkTree re-clones the live text node right
-        // after), doubling the parsed rule count and defeating
-        // serializeCSSOM's identity guard (styleSheetsMatch).
         if (!ownText && node.sheet) {
           try {
             const cssRules = node.sheet.cssRules;
diff --git a/packages/dom/test/serialize-css.test.js b/packages/dom/test/serialize-css.test.js
index e35d0fcc1..6050a878a 100644
--- a/packages/dom/test/serialize-css.test.js
+++ b/packages/dom/test/serialize-css.test.js
@@ -44,13 +44,7 @@ describe('serializeCSSOM', () => {
       it(`${platform}: serializes CSSOM and does not mutate the orignal DOM`, () => {
         let $cssom = parseDOM(serializeDOM(), platform)('[data-percy-cssom-serialized]');
 
-        // linked and unmodified stylesheets are not included. Plain
-        // authored <style> tags with unchanged content (e.g. `style`
-        // below, `.box { background: green; }`) are cloned via walkTree,
-        // not synthesized from CSSOM, so they never carry this marker
-        // either — clone-dom previously set it unconditionally whenever
-        // it had any text to clone, which falsely flagged every ordinary
-        // <style> as CSSOM-serialized (PER-10567).
+        // linked, unmodified and plain authored stylesheets are not included
         expect($cssom).toHaveSize(2);
         expect($cssom[0].innerHTML).toBe('.box { height: 500px; }');
         expect($cssom[1].innerHTML).toBe('.box { width: 1000px; }');
@@ -89,9 +83,7 @@ describe('serializeCSSOM', () => {
         cssomSheet.deleteRule(0); // Remove all rules to make it empty
         const serialized = serializeDOM();
         let $cssom = parseDOM(serialized, platform)('[data-percy-cssom-serialized]');
-        // should skip the empty stylesheet; only `mod` (genuinely
-        // CSSOM-mutated) remains marked — see PER-10567 note above.
-        expect($cssom).toHaveSize(1);
+        expect($cssom).toHaveSize(1); // should skip the empty stylesheet
       });
 
       it(`${platform}: preserves media queries inside CSSOM`, () => {
@@ -558,19 +550,7 @@ describe('serializeCSSOM', () => {
       expect(reserialized.textContent).toContain('.live-only');
     });
 
-    it('clone-dom does not duplicate authored <style> text end-to-end (preserves `background: var(--x)` shorthand)', () => {
-      // PER-10567: clone-dom previously set clone.textContent = cssText for
-      // every <style> (even ones with their own authored text), and the
-      // subsequent generic walkTree call re-cloned the live text node on
-      // top of that — doubling the parsed rule count. This is the same
-      // failure mode the styleSheetsMatch relaxation above tolerates for a
-      // clean duplicate, but a real page's stylesheet can still fail that
-      // guard (e.g. any unrelated CSSOM mutation elsewhere in the same
-      // sheet), forcing a full lossy re-serialization that expands
-      // shorthands like `background: var(--x)` into empty longhands. The
-      // fix is to never duplicate in the first place: only synthesize
-      // clone.textContent for CSSOM-only sheets that have no text node of
-      // their own.
+    it('does not duplicate authored <style> text, preserving `background: var(--x)` shorthands', () => {
       withExample('<style id="var-shorthand">.box { all: initial; background: var(--x); background-clip: text; }</style>', { withShadow: false });
 
       let liveStyle = document.getElementById('var-shorthand');

From df9b61e2457f26bdf0a791a422a2493ba5608044 Mon Sep 17 00:00:00 2001
From: Pranav Zinzurde <pranav.z@browserstack.com>
Date: Mon, 24 Aug 2026 02:53:28 +0530
Subject: [PATCH 3/3] docs(dom): drop stale clone-dom duplication references
 from styleSheetsMatch

The lenA > lenB tolerance and its regression test described clone-dom's
<style> text duplication as current behaviour. That duplication is gone,
so the comments now state only what the tolerance is for; the guard and
the test are unchanged.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 packages/dom/src/serialize-cssom.js     |  3 +--
 packages/dom/test/serialize-css.test.js | 28 ++++++++-----------------
 2 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/packages/dom/src/serialize-cssom.js b/packages/dom/src/serialize-cssom.js
index d885829f3..fb8cbc23c 100644
--- a/packages/dom/src/serialize-cssom.js
+++ b/packages/dom/src/serialize-cssom.js
@@ -27,8 +27,7 @@ function styleSheetsMatch(sheetA, sheetB) {
   // Only treat as mismatch when the live sheet has MORE rules than the
   // clone — that signals rules were added via CSSOM (insertRule/adopted)
   // and must be re-serialized. When lenA <= lenB, the clone already
-  // contains all of the live rules (often duplicated by clone-dom's
-  // <style> textContent handling); trust the clone's source text so that
+  // contains all of the live rules; trust the clone's source text so that
   // CSS shorthand semantics (e.g. `all: initial; border-radius: var(...)`)
   // survive — `cssRule.cssText` expansion appends logical longhands like
   // `border-end-end-radius: initial` AFTER the shorthand, which silently
diff --git a/packages/dom/test/serialize-css.test.js b/packages/dom/test/serialize-css.test.js
index 6050a878a..e9edb61ea 100644
--- a/packages/dom/test/serialize-css.test.js
+++ b/packages/dom/test/serialize-css.test.js
@@ -463,23 +463,14 @@ describe('serializeCSSOM', () => {
 
   describe('regression: cloned <style> text-node duplication', () => {
     // serializeCSSOM decides whether to re-serialize each in-memory CSSOM
-    // stylesheet via styleSheetsMatch(liveSheet, cloneSheet). Cloned <style>
-    // elements in real snapshots can end up with the original text node
-    // appended twice (clone-dom assigns clone.textContent = ... and the
-    // subsequent generic walkTree re-clones the original text node). The
-    // parsed cloneSheet then has 2x the rules of liveSheet.
-    //
-    // Strict length equality (`lenA !== lenB`) treats that as a mismatch
-    // and forces re-serialization via Array.from(liveSheet.cssRules).map(
-    // r => r.cssText), which is NOT semantically identity-preserving:
-    // Chromium expands `all: initial` into hundreds of longhands and
-    // emits logical-property longhands (border-end-end-radius: initial,
-    // ...) AFTER the shorthand it sat next to in source, silently
-    // overriding `border-radius: var(--x)` with 0.
-    //
-    // styleSheetsMatch must therefore tolerate lenB > lenA when every
-    // live rule still appears in the clone (re-serialization is only
-    // required when the live sheet has rules the clone is missing).
+    // stylesheet via styleSheetsMatch(liveSheet, cloneSheet). It must
+    // tolerate lenB > lenA when every live rule still appears in the clone:
+    // re-serialization via Array.from(liveSheet.cssRules).map(r => r.cssText)
+    // is NOT semantically identity-preserving — Chromium expands
+    // `all: initial` into hundreds of longhands and emits logical-property
+    // longhands (border-end-end-radius: initial, ...) AFTER the shorthand
+    // it sat next to in source, silently overriding
+    // `border-radius: var(--x)` with 0.
 
     it('skips re-serialization when clone <style> text duplicates the live rules — preserves `all: initial; border-radius: var(--x)` semantics', () => {
       withExample('<div class="box"></div>', { withShadow: false });
@@ -492,8 +483,7 @@ describe('serializeCSSOM', () => {
       const clone = document.createDocumentFragment();
       const cloneOwner = document.createElement('style');
       cloneOwner.setAttribute('data-percy-element-id', 'dup-regression');
-      // Duplicate the source rule — what clone-dom currently produces.
-      // styleSheetFromNode will parse this into a sheet with 2 rules,
+      // styleSheetFromNode parses this into a sheet with 2 rules,
       // while the live sheet has 1.
       cloneOwner.textContent = liveRuleText + '\n' + liveRuleText;
       clone.appendChild(cloneOwner);