fix: Trim whitespace from CSS ownerNode innerText (#406)

* test: Push failing test for CSSOM white space

* fix: Trim whitespace from CSS ownerNode innerText

Otherwise, we might incorrectly assume this style element has valid CSS
content.

In the future we might want to regex check the content?

src/percy-agent-client/dom.ts

@@ -172,8 +172,8 @@ class DOM {
       function isCSSOM() {
         const hasHref = styleSheet.href
         const ownerNode = styleSheet.ownerNode as HTMLElement
-        const hasStyleInDom =
-          ownerNode.innerText && ownerNode.innerText.length > 0
+        const ownerNodeInnerContent = ownerNode.innerText && ownerNode.innerText.trim()
+        const hasStyleInDom = ownerNodeInnerContent.length > 0
 
         return !hasHref && !hasStyleInDom && styleSheet.cssRules
       }

test/percy-agent-client/dom.test.ts

@@ -30,11 +30,17 @@ function createExample(dom: string) {
 }
 
 // create a stylesheet in the DOM and add rules using the CSSOM
-function createCSSOM() {
+function createCSSOM(options = {} as any) {
+  const { whiteSpace } = options
   const style = document.createElement('style')
   const testingContainer = document.querySelector('.test-container') as HTMLElement
 
   style.type = 'text/css'
+
+  if (whiteSpace) {
+    style.innerText = '    '
+  }
+
   testingContainer.appendChild(style)
 
   const cssomStyleSheet = document.styleSheets[0] as CSSStyleSheet
@@ -138,6 +144,23 @@ describe('DOM -', () => {
             .equal('.box { height: 200px; width: 200px; background-color: blue; }')
         })
       })
+
+      describe('with white space in the style ownerNode', () => {
+        beforeEach(() => {
+          const exampleDOM = createExample('<div class="box"></div>')
+
+          createCSSOM({ whiteSpace: true })
+          dom = new DOM(exampleDOM)
+        })
+
+        it('does not break the CSSOM', () => {
+          const serializedCSSOM = dom.clonedDOM.querySelectorAll('[data-percy-cssom-serialized]') as HTMLElement[]
+
+          expect(serializedCSSOM.length).to.equal(1)
+          expect(serializedCSSOM[0].innerText)
+            .to.equal('.box { height: 500px; width: 500px; background-color: green; }')
+        })
+      })
     })
 
     describe('CSSOM with JS enabled', () => {