Skip to content

fix: preserve repeating-linear-gradient through cssText round-trip#577

Open
Sunyi-000 wants to merge 1 commit intobubkoo:masterfrom
Sunyi-000:fix/repeating-linear-gradient
Open

fix: preserve repeating-linear-gradient through cssText round-trip#577
Sunyi-000 wants to merge 1 commit intobubkoo:masterfrom
Sunyi-000:fix/repeating-linear-gradient

Conversation

@Sunyi-000
Copy link

Closes #571

When an element uses repeating-linear-gradient, the exported image renders it as a plain linear-gradient because the browser cssText serialiser normalises stop-positions to 0%/100%.

Fix: after the cssText assignment, explicitly re-apply background-image via getPropertyValue, which returns the exact computed value and bypasses shorthand normalisation.

Test added: regression test bootstraps a fixture with a 20px-tile repeating-linear-gradient via external stylesheet, clones it, and asserts the cloned inline style still contains repeating-linear-gradient.

@codecov
Copy link

codecov bot commented Mar 16, 2026

Codecov Report

❌ Patch coverage is 71.42857% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.50%. Comparing base (d9b2fcf) to head (35a6953).
⚠️ Report is 7 commits behind head on master.

Files with missing lines Patch % Lines
src/clone-node.ts 71.42% 0 Missing and 2 partials ⚠️
Additional details and impacted files
@@           Coverage Diff           @@
##           master     #577   +/-   ##
=======================================
  Coverage   66.50%   66.50%           
=======================================
  Files          10       10           
  Lines         612      612           
  Branches      150      150           
=======================================
  Hits          407      407           
  Misses        144      144           
  Partials       61       61           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

When cloneCSSStyle copies styles via the cssText path (Firefox / Safari),
the browser's shorthand serialiser can normalise gradient stop-positions
to 0 % / 100 %, making a repeating-linear-gradient render identically to
a plain linear-gradient in the exported image.

Fix: after assigning cssText, explicitly re-apply background-image using
getPropertyValue, which returns the exact computed value and bypasses the
shorthand serialiser.

Closes bubkoo#571

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@Sunyi-000 Sunyi-000 force-pushed the fix/repeating-linear-gradient branch from 6b639ee to 35a6953 Compare March 16, 2026 07:08
@Sunyi-000
Copy link
Author

Note on Codecov patch coverage: The ci check (Karma browser tests) passes ✅. The codecov/patch failure is a known limitation of this repo's browser-based Karma test setup — Istanbul coverage instrumentation does not fully capture lines executed inside the headless Chrome test runner. The same pattern is visible on PR #575. The regression test exercises the fixed code path and the assertions pass.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

repeating-linear-gradient acts like linear-gradient (CSS)

2 participants