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

fixtures/html/simple.html

@@ -31,8 +31,9 @@
       padding: 0 20px;
       margin: 20px;
       border: 15px solid #e8b51cd8;
-      background-color: #343755d8;
+      background-color: #0f1a93d8;
       background-image: url(https://ar.rokidcdn.com/web-assets/yodaos-jsar/dist/images/a.jpg);
+      background-blend-mode: multiply;
       border-radius: 5px;
       box-sizing: border-box;
       transform: translate3d(0, 0, 15px);

src/client/builtin_scene/web_content_renderer.cpp

@@ -110,6 +110,10 @@ namespace builtin_scene::web_renderer
       if (!fillPaint.has_value())
         fillPaint = make_optional<SkPaint>();
 
+      // Set the blend mode for the paint if the background blend mode is not normal.
+      if (!style.backgroundBlendMode().isNormal())
+        fillPaint->setBlendMode(style.backgroundBlendMode());
+
       const auto &image = style.backgroundImage();
       if (image.isUrl())
       {

src/client/cssom/computed_style.cpp

@@ -14,6 +14,7 @@
 #include "./values/specified/position.hpp"
 #include "./values/specified/time.hpp"
 #include "./values/specified/transform.hpp"
+#include "./values/specified/background.hpp"
 
 namespace client_cssom
 {
@@ -402,6 +403,15 @@ namespace client_cssom
       background_image_ = Parse::ParseSingleValue<values::specified::Image>(value).toComputedValue(context);
       bitfields_.SetHasBackgroundImage(true);
     }
+    else if (name == "background-blend-mode")
+    {
+      background_blend_mode_ = Parse::ParseSingleValue<values::specified::BackgroundBlendMode>(value)
+                                 .toComputedValue(context);
+    }
+    else if (name == "background-clip")
+    {
+      background_clip_ = Parse::ParseSingleValue<values::specified::BackgroundClip>(value).toComputedValue(context);
+    }
 
     // Flexbox
     else if (name == "flex-direction")

src/client/cssom/computed_style.hpp

@@ -384,6 +384,14 @@ namespace client_cssom
     {
       return bitfields_.HasBackgroundImage();
     }
+    inline const values::computed::BackgroundBlendMode &backgroundBlendMode() const
+    {
+      return background_blend_mode_;
+    }
+    inline const values::computed::BackgroundClip &backgroundClip() const
+    {
+      return background_clip_;
+    }
 
     // Visibility utility functions.
     inline bool visibleToHitTesting() const
@@ -515,6 +523,8 @@ namespace client_cssom
     // Background
     values::computed::Color background_color_ = values::computed::Color::Transparent();
     values::computed::Image background_image_ = values::computed::Image::None();
+    values::computed::BackgroundBlendMode background_blend_mode_ = values::computed::BackgroundBlendMode::Normal();
+    values::computed::BackgroundClip background_clip_ = values::computed::BackgroundClip::BorderBox();
 
     // 3D Transforms
     values::computed::Transform transform_;

src/client/cssom/style_traits.hpp

@@ -2,6 +2,7 @@
 
 #include <concepts>
 #include <string>
+#include <vector>
 #include <glm/glm.hpp>
 #include <common/utility.hpp>
 

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

@@ -0,0 +1,65 @@
+#pragma once
+
+#include <client/cssom/values/generics/background.hpp>
+#include <skia/include/core/SkBlendMode.h>
+
+namespace client_cssom::values::specified
+{
+  class BackgroundBlendMode;
+  class BackgroundClip;
+}
+
+namespace client_cssom::values::computed
+{
+  class BackgroundBlendMode : public generics::GenericBackgroundBlendMode<BackgroundBlendMode>
+  {
+    using generics::GenericBackgroundBlendMode<BackgroundBlendMode>::GenericBackgroundBlendMode;
+
+  public:
+    operator SkBlendMode() const
+    {
+      switch (tag_)
+      {
+      case BackgroundBlendMode::kNormal:
+        return SkBlendMode::kSrcOver;
+      case BackgroundBlendMode::kMultiply:
+        return SkBlendMode::kMultiply;
+      case BackgroundBlendMode::kScreen:
+        return SkBlendMode::kScreen;
+      case BackgroundBlendMode::kOverlay:
+        return SkBlendMode::kOverlay;
+      case BackgroundBlendMode::kDarken:
+        return SkBlendMode::kDarken;
+      case BackgroundBlendMode::kLighten:
+        return SkBlendMode::kLighten;
+      case BackgroundBlendMode::kColorDodge:
+        return SkBlendMode::kColorDodge;
+      case BackgroundBlendMode::kColorBurn:
+        return SkBlendMode::kColorBurn;
+      case BackgroundBlendMode::kHardLight:
+        return SkBlendMode::kHardLight;
+      case BackgroundBlendMode::kSoftLight:
+        return SkBlendMode::kSoftLight;
+      case BackgroundBlendMode::kDifference:
+        return SkBlendMode::kDifference;
+      case BackgroundBlendMode::kExclusion:
+        return SkBlendMode::kExclusion;
+      case BackgroundBlendMode::kHue:
+        return SkBlendMode::kHue;
+      case BackgroundBlendMode::kSaturation:
+        return SkBlendMode::kSaturation;
+      case BackgroundBlendMode::kColor:
+        return SkBlendMode::kColor;
+      case BackgroundBlendMode::kLuminosity:
+        return SkBlendMode::kLuminosity;
+      default:
+        return SkBlendMode::kSrcOver; // Default to SrcOver if none match
+      }
+    }
+  };
+
+  class BackgroundClip : public generics::GenericBackgroundClip<BackgroundClip>
+  {
+    using generics::GenericBackgroundClip<BackgroundClip>::GenericBackgroundClip;
+  };
+}

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

@@ -3,6 +3,7 @@
 #include "./align.hpp"
 #include "./angle.hpp"
 #include "./animation.hpp"
+#include "./background.hpp"
 #include "./border.hpp"
 #include "./box.hpp"
 #include "./common.hpp"