Add support for background-blend-mode and background-clip CSS properties #119

Copilot · 2025-07-22T14:45:15Z

This PR implements support for the background-blend-mode and background-clip CSS properties in the CSSOM implementation, extending the runtime's CSS capabilities.

Changes Made

New CSS Properties Supported

background-blend-mode - Controls how background images blend with each other and the background color:

normal, multiply, screen, overlay, darken, lighten
color-dodge, color-burn, hard-light, soft-light
difference, exclusion, hue, saturation, color, luminosity

background-clip - Controls how far a background extends within an element:

border-box, padding-box, content-box, text

Implementation Details

Added Files:

src/client/cssom/values/specified/background_blend_mode.hpp - Complete enum-based implementation with all 16 CSS blend modes
src/client/cssom/values/specified/background_clip.hpp - Complete enum-based implementation with all 4 CSS clip modes

Modified Files:

src/client/cssom/computed_style.hpp - Added accessor methods and member variables for the new properties
src/client/cssom/computed_style.cpp - Added CSS parsing logic following existing patterns
src/client/cssom/values/computed/box.hpp - Added computed value type aliases
src/client/cssom/style_traits.hpp - Fixed missing <vector> include

Technical Implementation

The implementation follows the established patterns in the codebase:

Enum-based value types with static constructors (e.g., BackgroundBlendMode::Multiply())
Implements required interfaces: Parse, ToCss, ToComputedValue
Default values match CSS specification (normal for blend-mode, border-box for clip)
Computed values are simple aliases to specified values (no complex computation needed)
CSS parsing integrated into existing property resolution pipeline

Usage Example

.element {
  background-image: url(image1.png), url(image2.png);
  background-blend-mode: multiply, screen;
  background-clip: content-box;
}

The properties were already declared in properties.hpp but lacked implementation. This PR provides the complete value type definitions and integration into the computed style system.

Fixes #118.

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

Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

yorkie · 2025-07-22T15:09:08Z

src/client/cssom/values/computed/box.hpp

  using BoxSizing = specified::BoxSizing;
  using Overflow = specified::Overflow;
+  using BackgroundBlendMode = specified::BackgroundBlendMode;
+  using BackgroundClip = specified::BackgroundClip;


BackgroundBlendMode and BackgroundClip should be in background.hpp

Fixed in commit 905d0dd. Created values/computed/background.hpp with the BackgroundBlendMode and BackgroundClip aliases, and updated computed/box.hpp to include it instead of the specified files directly.

yorkie · 2025-07-22T15:10:05Z

src/client/cssom/values/specified/background_blend_mode.hpp

Move common logic to values/generics/background.hpp

Fixed in commit 905d0dd. Created values/generics/background.hpp with GenericBackgroundBlendMode<T> template containing the common logic. The specified file now inherits from the generic, reducing code from 200+ lines to just 10 lines.

yorkie · 2025-07-22T15:10:25Z

src/client/cssom/values/specified/background_clip.hpp

Move common logic to values/generics/background.hpp

Fixed in commit 905d0dd. Created values/generics/background.hpp with GenericBackgroundClip<T> template containing the common logic. The specified file now inherits from the generic, reducing code from 100+ lines to just 10 lines.

Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Copilot · 2025-07-22T15:24:37Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

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 ci (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 my firewall allow list

yorkie · 2025-07-22T15:27:40Z

src/client/cssom/values/specified/background_clip.hpp

Move this file to values/specified/background.hpp

Fixed in commit 84363b4. Moved both background_clip.hpp and background_blend_mode.hpp into a single consolidated values/specified/background.hpp file.

yorkie · 2025-07-22T15:27:43Z

src/client/cssom/values/specified/background_blend_mode.hpp

Move this file to values/specified/background.hpp

Fixed in commit 84363b4. Moved both background_blend_mode.hpp and background_clip.hpp into a single consolidated values/specified/background.hpp file.

yorkie · 2025-07-22T15:28:21Z

src/client/cssom/values/generics/background.hpp

+namespace client_cssom::values::generics
+{
+  template <typename T>
+  class GenericBackgroundBlendMode : public Parse,


Parse should be implemented in specified class.

Fixed in commit 84363b4. Moved the Parse implementation from the generic class to the BackgroundBlendMode specified class.

The Parse inheritance should move the specified class, too.

Fixed in commit 55ea546. Moved Parse inheritance from GenericBackgroundBlendMode to the BackgroundBlendMode specified class.

yorkie · 2025-07-22T15:28:39Z

src/client/cssom/values/generics/background.hpp

+  };
+
+  template <typename T>
+  class GenericBackgroundClip : public Parse,


Ditto, Parse should be implemented in specified class.

Fixed in commit 84363b4. Moved the Parse implementation from the generic class to the BackgroundClip specified class.

Ditto, the inheritance from Parse should be moved to specified class.

Fixed in commit 55ea546. Moved Parse inheritance from GenericBackgroundClip to the BackgroundClip specified class.

yorkie · 2025-07-22T15:29:04Z

src/client/cssom/values/computed/box.hpp


 #include <client/cssom/values/generics/rect.hpp>
 #include <client/cssom/values/specified/box.hpp>
+#include <client/cssom/values/computed/background.hpp>


Remove this #include, this is unnecessary

Fixed in commit 84363b4. Removed the unnecessary #include from computed/box.hpp.

… implementation to specified classes Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

yorkie · 2025-07-22T15:47:54Z

src/client/cssom/values/generics/background.hpp

+namespace client_cssom::values::generics
+{
+  template <typename T>
+  class GenericBackgroundBlendMode : public Parse,


The Parse inheritance should move the specified class, too.

yorkie · 2025-07-22T15:48:19Z

src/client/cssom/values/generics/background.hpp

+  };
+
+  template <typename T>
+  class GenericBackgroundClip : public Parse,


Ditto, the inheritance from Parse should be moved to specified class.

yorkie · 2025-07-22T15:48:31Z

src/client/cssom/values/generics/background.hpp

+  protected:
+    Tag tag_;
+  };
+}


Fixed in commit 55ea546. The file now ends with the closing brace without extra blank lines.

yorkie · 2025-07-22T15:48:39Z

src/client/cssom/values/specified/background.hpp

+      return true;
+    }
+  };
+}


Remove the EOF

The file structure has been updated and there are no trailing newlines at the end of the file. The EOF issue has been resolved in commit 55ea546.

yorkie · 2025-07-22T15:49:22Z

src/client/cssom/values/computed/background.hpp

+namespace client_cssom::values::computed
+{
+  using BackgroundBlendMode = specified::BackgroundBlendMode;
+  using BackgroundClip = specified::BackgroundClip;


Use generics instead of specified classes in computed.

Fixed in commit 55ea546. Updated computed/background.hpp to use generics::GenericBackgroundBlendMode and generics::GenericBackgroundClip instead of the specified classes.

yorkie · 2025-07-22T15:50:03Z

src/client/cssom/values/generics/background.hpp

+  template <typename T>
+  class GenericBackgroundBlendMode : public Parse,
+                                     public ToCss,
+                                     public ToComputedValue<T>


ToComputeValue should also moved to specified, too.

Fixed in commit 55ea546. Moved ToComputedValue inheritance from GenericBackgroundBlendMode to the BackgroundBlendMode specified class.

yorkie · 2025-07-22T15:50:15Z

src/client/cssom/values/generics/background.hpp

+  template <typename T>
+  class GenericBackgroundClip : public Parse,
+                                public ToCss,
+                                public ToComputedValue<T>


ToComputeValue should also moved to specified, too.

Fixed in commit 55ea546. Moved ToComputedValue inheritance from GenericBackgroundClip to the BackgroundClip specified class.

…ix computed types Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Copilot · 2025-07-22T16:01:14Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

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 my firewall allow list

Initial plan

c168cb8

Copilot AI assigned Copilot and yorkie Jul 22, 2025

Copilot started work on behalf of yorkie July 22, 2025 14:45 View session

Add background-blend-mode and background-clip CSS properties

26bd587

Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] cssom: add background-blend-mode/background-clip in css values~~ Add support for background-blend-mode and background-clip CSS properties Jul 22, 2025

Copilot AI requested a review from yorkie July 22, 2025 15:05

Copilot finished work on behalf of yorkie July 22, 2025 15:05

yorkie requested changes Jul 22, 2025

View reviewed changes

Copilot started work on behalf of yorkie July 22, 2025 15:10 View session

Refactor background CSS properties to use generics pattern

905d0dd

Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Copilot AI requested a review from yorkie July 22, 2025 15:24

Copilot finished work on behalf of yorkie July 22, 2025 15:24

yorkie requested changes Jul 22, 2025

View reviewed changes

Copilot started work on behalf of yorkie July 22, 2025 15:29 View session

Consolidate background CSS properties into single file and move Parse…

84363b4

… implementation to specified classes Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Copilot AI requested a review from yorkie July 22, 2025 15:40

Copilot finished work on behalf of yorkie July 22, 2025 15:40

yorkie requested changes Jul 22, 2025

View reviewed changes

Copilot started work on behalf of yorkie July 22, 2025 15:50 View session

Move Parse and ToComputedValue inheritance to specified classes and f…

55ea546

…ix computed types Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Copilot AI requested a review from yorkie July 22, 2025 16:01

Copilot finished work on behalf of yorkie July 22, 2025 16:01

update

23876fa

yorkie approved these changes Jul 22, 2025

View reviewed changes

yorkie marked this pull request as ready for review July 22, 2025 17:11

yorkie merged commit 1df9830 into main Jul 22, 2025
2 checks passed

yorkie deleted the copilot/fix-118 branch July 22, 2025 17:12

Copilot AI mentioned this pull request Aug 4, 2025

Release 0.9.0: Core technical improvements and feature additions #188

Merged

Add support for background-blend-mode and background-clip CSS properties #119

Add support for background-blend-mode and background-clip CSS properties #119

Uh oh!

Conversation

Copilot AI commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes Made

New CSS Properties Supported

Implementation Details

Technical Implementation

Usage Example

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Jul 22, 2025

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Jul 22, 2025 •

edited

Loading