Fix incorrect background-clip style after color:linear-gradient removed

[Copilot]

Problem

When a color: linear-gradient(...) style is removed and replaced with a normal color, the transform function incorrectly sets background-clip: initial and -webkit-background-clip: initial. This causes background colors to not display properly because the default value for background-clip should be border-box, not initial.

Root Cause

In transformLynxStyles.ts, the valueProcessor functions for background-clip and -webkit-background-clip were returning 'initial' for non-gradient colors:

// Before (buggy)
{
  name: 'background-clip',
  valueProcessor(value) {
    return value.includes('gradient')
      ? 'text'
      : 'initial';  // ❌ Wrong - should be 'border-box'
  },
}

This affected elements like:

<x-input style="background-color: red" />
<x-textarea style="background-color: yellow" />

Solution

Changed the valueProcessor functions to return 'border-box' (the CSS default) instead of 'initial' when the color value doesn't contain 'gradient':

// After (fixed)
{
  name: 'background-clip',
  valueProcessor(value) {
    return value.includes('gradient')
      ? 'text'
      : 'border-box';  // ✅ Correct default value
  },
}

This ensures that:

1. Gradient text continues to work correctly (background-clip: text)
2. Normal colors properly display their background colors (background-clip: border-box)
3. Elements transition correctly from gradient to normal colors

Testing

• Added comprehensive test suite covering gradient colors, normal colors, edge cases, and transition scenarios
• Verified existing test cases (like style-background-color.html and background-color-inherit.html) work correctly
• Browser testing confirms background colors display properly with the fix

The screenshot shows the fix working correctly - elements with normal colors now properly display their background colors.

Files Changed

• packages/web-platform/web-style-transformer/src/transformLynxStyles.ts: Fixed background-clip reset logic
• packages/web-platform/web-style-transformer/src/__tests__/transformLynxStyles.test.js: Added comprehensive test coverage

Fixes #1165.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[changeset-bot]

⚠️ No Changeset found

Latest commit: d969954

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}