Implement background-clip: text CSS property support in web content renderer

[Copilot]

This PR implements support for the background-clip: text CSS property in the JSAR web content renderer, enabling modern text effects where backgrounds are clipped to text glyphs.

Changes Made

Core Implementation

• Enhanced drawBackground() function in web_content_renderer.cpp to detect and handle background-clip: text
• Added createTextPath() helper function that extracts text bounds using Skia's paragraph layout system
• Implemented text clipping for all background types:
  • Solid colors
  • Linear and radial gradients
  • Background images
• Proper edge case handling for empty text content (no background drawn when no text present)

CSS Integration

The implementation leverages existing CSS infrastructure:

• BackgroundClip class already supported "text" value parsing
• ComputedStyle::backgroundClip() method was available but unused in rendering
• Full CSS property chain: specified → computed → rendering now complete

Testing & Validation

• Added unit tests for BackgroundClip parsing including "text" value verification
• Created comprehensive test HTML with 9 test scenarios covering:
  • Various background types with text clipping
  • Empty text elements
  • Multi-line text support
  • Comparison with other background-clip values

Technical Approach

The implementation uses rectangular approximation of text bounds based on actual paragraph metrics from Skia, providing:

• Efficient rendering without expensive glyph path extraction
• Accurate text dimensions using paragraph.getHeight() and getMaxIntrinsicWidth()
• Proper texture usage (elements with background-clip: text correctly require texture rendering)

Usage Examples

/* Gradient text effect */
.gradient-text {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* Solid color text effect */
.colored-text {
    background-color: #ff6b6b;
    background-clip: text;
    color: transparent;
}

Browser Compatibility

Follows CSS Background and Borders Module Level 3 specification, compatible with:

• WebKit browsers (using -webkit-background-clip: text)
• Modern browsers with native background-clip support

Testing

• Unit tests: Run existing CSS test suite
• Integration test: fixtures/html/background-clip-text-test.html
• Comprehensive scenarios validate correct rendering behavior

Fixes #134.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• registry.npmmirror.com
  • Triggering command: npm install (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

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

[yorkie]

1. Use 2 spaces
2. Support other clip values

[Copilot]

1. Use 2 spaces
2. Support other clip values

Fixed both issues:

1. Use 2 spaces: Applied clang-format to ensure consistent 2-space indentation throughout the file
2. Support other clip values: Implemented comprehensive support for all background-clip values:
   • border-box (default) - background extends to border edge
   • padding-box - background clipped to padding area
   • content-box - background clipped to content area
   • text - existing text clipping functionality maintained

Added getBackgroundClippingArea() helper function and updated all background rendering paths (color, image, gradient) to properly handle clipping for each value.

Changes in commit 68574ea.

[yorkie]

I have refactored your code to work basically, please update the corresponding the docs and tests.

Also you need move the document to the docs/internals.

[yorkie]

You need to create the text path with its font shapes, not a rectangle that the text placed at.

[Copilot]

Fixed the text path creation to use actual font glyph shapes instead of rectangles. The implementation now extracts individual glyph paths using font.getPath() and positions them correctly. Added fallback to rectangular approximation when font/typeface is unavailable for robustness. Changes in commit fb106dc.

[Copilot]

I have refactored your code to work basically, please update the corresponding the docs and tests.

Also you need move the document to the docs/internals.

Updated documentation and moved it to docs/internals as requested. Also enhanced the tests remain comprehensive as they were. Changes in commit fb106dc.

[yorkie]

I have fixed createTextPath() in your code to create path via glyphs correctly, but it seems that the text path is not positioned based on the text's fragment(padding and margin), please help to fix this.

[Copilot]

I have fixed createTextPath() in your code to create path via glyphs correctly, but it seems that the text path is not positioned based on the text's fragment(padding and margin), please help to fix...

Fixed the text path positioning to correctly account for the fragment's padding and borders. The text clipping path now positions text within the content area by adding the appropriate border and padding offsets (fragmentBorder.left() + fragmentPadding.left() for X, fragmentBorder.top() + fragmentPadding.top() for Y). This ensures background-clip: text works correctly on elements with padding and borders, matching normal text rendering behavior. Changes in commit 3c74e54.