cypress-io / cypress

Current behavior

On initial render, everything looks fine:

However when viewing the snapshot (which should be identical to the final state, as the test just loads the page), the background color is gone:

Desired behavior

No response

Test code to reproduce

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .alert {
            --background: blue;
            background: var(--background);
            background-clip: border-box;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="alert"></div>
</body>
</html>

/// <reference types="cypress" />
describe('page', () => {
  it('works', () => {
    cy.visit('http://localhost:3000/')
  })
})

Cypress Version

12.4.0

Node version

v16.18.0

Operating System

Linux 6.1/Manjaro Linux 22.0.0

Debug Logs

No response

Other

I've identified where this issue manifests:

cypress/packages/driver/src/cy/snapshots_css.ts

Lines 82 to 90 in a869d5d

    
           const getInlineCssContents = (stylesheet, $$) => { 
        
             if (!stylesheet.sheet) return $$(stylesheet).text() 
        
             const rules = stylesheet.sheet.cssRules 
        
             return reduceText(rules, (rule) => { 
        
               return rule.cssText 
        
             }) 
        
           }

(linking to inline CSS handling here, though it should ultimately be the same for linked stylesheets as well)

It appears when using a shorthand property (like background) along with one of it's components (like background-clip) and setting the shorthand to a CSS variable, when querying the stylesheet content in the DOM (via stylesheet.sheet.cssRules), the background property (in this case) gets split into its component properties, but these are not properly filled out - even though the browser renders it with the properties there (and they're shown in the devtools/inspector).

I'd imagine that the solution here is for inline stylesheets to use the innerHTML of the style tag and for external stylesheets to have the cypress server query them (due to cross-origin limitations)? The prior I could easily submit a PR for, though I don't know enough about the cypress codebase to know how to address the latter (and I'd want to confirm that this is the correct approach).

	const getInlineCssContents = (stylesheet, $$) => {
	if (!stylesheet.sheet) return $$(stylesheet).text()

	const rules = stylesheet.sheet.cssRules

	return reduceText(rules, (rule) => {
	return rule.cssText
	})
	}

Broken CSS in snapshots mixing longhand and shorthand CSS properties with CSS variables