cssom: support parsing background-image and render as a grad effect

cmake/TransmuteClient.cmake

@@ -1,19 +1,23 @@
+file(GLOB_RECURSE TR_CLIENT_LIBRARY_SOURCE
+    "src/bindings/*.cpp"
+    "src/client/animation/*.cpp"
+    "src/client/browser/*.cpp"
+    "src/client/builtin_scene/*.cpp"
+    "src/client/canvas/*.cpp"
+    "src/client/cssom/*.cpp"
+    "src/client/dom/*.cpp"
+    "src/client/graphics/*.cpp"
+    "src/client/html/*.cpp"
+    "src/client/layout/*.cpp"
+    "src/client/media/*.cpp"
+    "src/client/networking/*.cpp"
+    "src/client/scripting_base/*.cpp"
+    "src/client/scroll/*.cpp"
+    "src/client/xr/*.cpp"
+    "src/pugixml/*.cpp"
+)
 file(GLOB TR_CLIENT_SOURCE
-    "src/bindings/browser/*.cpp"
-    "src/bindings/canvas/*.cpp"
-    "src/bindings/cssom/*.cpp"
-    "src/bindings/dom/*.cpp"
-    "src/bindings/dom/**/*.cpp"
-    "src/bindings/env/*.cpp"
-    "src/bindings/math3d/*.cpp"
-    "src/bindings/messaging/*.cpp"
-    "src/bindings/renderer/*.cpp"
-    "src/bindings/webgl/*.cpp"
-    "src/bindings/webxr/*.cpp"
     "src/client/*.cpp"
-    "src/client/**/*.cpp"
-    "src/client/**/**/*.cpp"
-    "src/pugixml/*.cpp"
 )
 
 # Add the client shaders header target
@@ -36,24 +40,30 @@ add_custom_target(TransmuteClientShadersHeader ALL
     DEPENDS ${TR_SHADERS_HEADER}
 )
 
-# Add executable target
-add_executable(TransmuteClient
+# Add client library
+add_library(TransmuteClientLibrary STATIC
     ${TR_COMMON_SOURCE}
-    ${TR_CLIENT_SOURCE}
+    ${TR_CLIENT_LIBRARY_SOURCE}
 )
-add_dependencies(TransmuteClient TransmuteClientShadersHeader)
+add_dependencies(TransmuteClientLibrary TransmuteClientShadersHeader)
+
+# Add executable target
+add_executable(TransmuteClient ${TR_CLIENT_SOURCE})
+add_dependencies(TransmuteClient TransmuteClientLibrary)
+target_link_libraries(TransmuteClient PRIVATE TransmuteClientLibrary)
 
 set(NODE_ADDON_API_HEADERS_PATH ${CMAKE_SOURCE_DIR}/thirdparty/headers/node-addon-api/include)
 target_include_directories(TransmuteClient PRIVATE ${NODE_ADDON_API_HEADERS_PATH})
+target_include_directories(TransmuteClientLibrary PRIVATE ${NODE_ADDON_API_HEADERS_PATH})
 
 # Link libraries
-tr_target_link_library(TransmuteClient ${TR_CRATE_BUILD_PATH} jsar_jsbindings STATIC)
-tr_target_link_thirdparty_library(TransmuteClient node)
-tr_target_link_skia_library(TransmuteClient)
+tr_target_link_library(TransmuteClientLibrary ${TR_CRATE_BUILD_PATH} jsar_jsbindings STATIC)
+tr_target_link_thirdparty_library(TransmuteClientLibrary node)
+tr_target_link_skia_library(TransmuteClientLibrary)
 
 if(APPLE)
-    target_link_libraries(TransmuteClient PRIVATE "-framework CoreFoundation")
-    target_link_libraries(TransmuteClient PRIVATE "-framework Carbon")
+    target_link_libraries(TransmuteClientLibrary PRIVATE "-framework CoreFoundation")
+    target_link_libraries(TransmuteClientLibrary PRIVATE "-framework Carbon")
 endif()
 
 # Set properties

cmake/TransmuteTests.cmake

@@ -6,12 +6,6 @@ file(GLOB TR_CATCH2_SOURCE
 file(GLOB TR_COMMON_TESTS_SOURCE
     "tests/**/*_tests.cpp"
 )
-file(GLOB_RECURSE TR_CLIENT_BUILTIN_SCENE_SOURCE
-    "src/client/builtin_scene/*.cpp"
-)
-file(GLOB_RECURSE TR_PUGIXML_SOURCE
-    "src/pugixml/*.cpp"
-)
 
 # check for TR_BUILD_TESTS
 if (TR_BUILD_TESTS)
@@ -26,8 +20,6 @@ if (TR_BUILD_TESTS)
         ${TR_CATCH2_SOURCE}
         ${TR_COMMON_SOURCE}
         ${TR_COMMON_TESTS_SOURCE}
-        ${TR_CLIENT_BUILTIN_SCENE_SOURCE}
-        ${TR_PUGIXML_SOURCE}
         tests/runtime.cpp
         tests/math.cpp
     )
@@ -36,6 +28,11 @@ if (TR_BUILD_TESTS)
         ${CMAKE_SOURCE_DIR}/tests
         ${CMAKE_SOURCE_DIR}/thirdparty/headers/node-addon-api/include
     )
+    add_dependencies(TransmuteUnitTests TransmuteClientLibrary)
+    target_link_libraries(TransmuteUnitTests
+        PRIVATE
+        TransmuteClientLibrary
+    )
 
     # Add tests
     add_test(NAME CommonTests COMMAND TransmuteCommandBuffersBaseTest)

fixtures/html/simple.html

@@ -26,6 +26,7 @@
       font-size: 80px;
       text-transform: uppercase;
       color: rgb(150, 197, 224);
+      background-image: url(./images/jsar-logo-00.png);
       font-weight: bolder;
       margin: 10px;
       padding: 0 20px;

src/client/builtin_scene/web_content_renderer.cpp

@@ -7,6 +7,7 @@
 #include <skia/include/core/SkColor.h>
 #include <skia/include/core/SkPathEffect.h>
 #include <skia/include/effects/SkDashPathEffect.h>
+#include <skia/include/effects/SkGradientShader.h>
 #include <client/layout/fragment.hpp>
 #include <client/cssom/computed_style.hpp>
 #include <client/cssom/values/generics/border.hpp>
@@ -61,40 +62,75 @@ namespace builtin_scene::web_renderer
   optional<SkPaint> drawBackground(SkCanvas *canvas,
                                    SkRRect &originalRRect,
                                    const client_layout::Fragment &fragment,
-                                   const client_cssom::ComputedStyle &style)
+                                   const client_cssom::ComputedStyle &style,
+                                   bool &textureRequired)
   {
+    optional<SkPaint> fillPaint = nullopt;
+
+    // Mark the texture as not required by default.
+    textureRequired = false;
+
+    // TODO(yorkie): Skip if there is no color or image?
+    SkRRect roundedRect;
+    {
+      const SkRect &originalRect = originalRRect.rect();
+      float insetTop = fragment.border().top();
+      float insetRight = fragment.border().right();
+      float insetBottom = fragment.border().bottom();
+      float insetLeft = fragment.border().left();
+
+      SkRect rect = SkRect::MakeXYWH(originalRect.fLeft + insetLeft,
+                                     originalRect.fTop + insetTop,
+                                     originalRect.width() - insetLeft - insetRight,
+                                     originalRect.height() - insetTop - insetBottom);
+      SkVector radii[4];
+      for (int i = 0; i < 4; i++)
+        radii[i] = originalRRect.radii(static_cast<SkRRect::Corner>(i));
+      roundedRect.setRectRadii(rect, radii);
+    }
+
     if (style.hasBackgroundColor())
     {
       auto color = style.backgroundColor().resolveToAbsoluteColor();
 
-      SkPaint fillPaint;
-      fillPaint.setColor(color);
-      fillPaint.setAntiAlias(true);
-      fillPaint.setStyle(SkPaint::kFill_Style);
-      {
-        const SkRect &originalRect = originalRRect.rect();
-        float insetTop = fragment.border().top();
-        float insetRight = fragment.border().right();
-        float insetBottom = fragment.border().bottom();
-        float insetLeft = fragment.border().left();
-
-        SkRect rect = SkRect::MakeXYWH(originalRect.fLeft + insetLeft,
-                                       originalRect.fTop + insetTop,
-                                       originalRect.width() - insetLeft - insetRight,
-                                       originalRect.height() - insetTop - insetBottom);
-        SkRRect roundedRect;
-        SkVector radii[4];
-        for (int i = 0; i < 4; i++)
-          radii[i] = originalRRect.radii(static_cast<SkRRect::Corner>(i));
-        roundedRect.setRectRadii(rect, radii);
-        canvas->drawRRect(roundedRect, fillPaint);
-      }
-      return fillPaint;
+      fillPaint = make_optional<SkPaint>();
+      fillPaint->setColor(color);
+      fillPaint->setAntiAlias(true);
+      fillPaint->setStyle(SkPaint::kFill_Style);
+      canvas->drawRRect(roundedRect, fillPaint.value());
     }
-    else
+
+    if (style.hasBackgroundImage())
     {
-      return nullopt;
+      // Init the fill paint if it hasn't been set yet.
+      if (!fillPaint.has_value())
+        fillPaint = make_optional<SkPaint>();
+
+      // Defaultly, we draw a linear gradient as a placeholder.
+      {
+        // TODO(yorkie): implement drawing from ComputedStyle's background image.
+        const SkPoint pts[2] = {
+          SkPoint::Make(originalRRect.rect().fLeft, originalRRect.rect().fTop),
+          SkPoint::Make(originalRRect.rect().fRight, originalRRect.rect().fBottom)};
+        const SkColor4f colors[] = {
+          SkColor4f::FromColor(SkColorSetARGB(255, 255, 0, 0)),
+          SkColor4f::FromColor(SkColorSetARGB(255, 0, 0, 255))};
+        const SkScalar pos[] = {0.0f, 1.0f};
+        sk_sp<SkShader> shader = SkGradientShader::MakeLinear(pts,
+                                                              colors,
+                                                              SkColorSpace::MakeSRGB(),
+                                                              pos,
+                                                              2,
+                                                              SkTileMode::kClamp);
+        fillPaint->setShader(shader);
+        fillPaint->setAntiAlias(true);
+        fillPaint->setStyle(SkPaint::kFill_Style);
+      }
+      canvas->drawRRect(roundedRect, fillPaint.value());
+      // Texture is required for background image.
+      textureRequired = true;
     }
+    return fillPaint;
   }
 
   // Compute the radius for a specific corner of the rounded rectangle.
@@ -329,12 +365,12 @@ namespace builtin_scene::web_renderer
     SkRRect &roundedRect = content.rounded_rect_;
     bool drawRoundedRect = shouldDrawRoundedRect(roundedRect, rect, style);
 
-    auto backgroundPaint = drawBackground(canvas, roundedRect, fragment.value(), style);
+    bool textureRequired = false;
+    auto backgroundPaint = drawBackground(canvas, roundedRect, fragment.value(), style, textureRequired);
     if (backgroundPaint.has_value())
     {
       auto fillPaint = backgroundPaint.value();
-      if (fillPaint.getStyle() == SkPaint::kFill_Style &&
-          !drawRoundedRect) // Disable using texture if the background is not rounded.
+      if (!textureRequired && !drawRoundedRect) // Disable using texture if the background is not rounded.
       {
         content.setTextureUsing(false); // Disable using texture to decrease the texture memory usage.
 

src/client/cssom/computed_style.cpp

@@ -397,6 +397,11 @@ namespace client_cssom
       background_color_ = Parse::ParseSingleValue<values::specified::Color>(value).toComputedValue(context);
       bitfields_.SetHasBackgroundColor(true);
     }
+    else if (name == "background-image")
+    {
+      background_image_ = Parse::ParseSingleValue<values::specified::Image>(value).toComputedValue(context);
+      bitfields_.SetHasBackgroundImage(true);
+    }
 
     // Flexbox
     else if (name == "flex-direction")

src/client/cssom/computed_style.hpp

@@ -372,6 +372,14 @@ namespace client_cssom
     {
       return bitfields_.HasBackgroundColor();
     }
+    inline const values::computed::Image &backgroundImage() const
+    {
+      return background_image_;
+    }
+    inline bool hasBackgroundImage() const
+    {
+      return bitfields_.HasBackgroundImage();
+    }
 
     // Visibility utility functions.
     inline bool visibleToHitTesting() const
@@ -499,7 +507,10 @@ namespace client_cssom
 
     // Colors
     values::computed::Color color_ = values::computed::Color::Black();
+
+    // Background
     values::computed::Color background_color_ = values::computed::Color::Transparent();
+    values::computed::Image background_image_ = values::computed::Image::None();
 
     // 3D Transforms
     values::computed::Transform transform_;
@@ -531,12 +542,14 @@ private:                                                \
     public:
       explicit ComputedStyleBitfields()
           : has_transform_(false)
+          , has_background_image_(false)
       {
       }
 
       ADD_BOOLEAN_BITFIELD(has_display_, HasDisplay);
       ADD_BOOLEAN_BITFIELD(has_color_, HasColor);
       ADD_BOOLEAN_BITFIELD(has_background_color_, HasBackgroundColor);
+      ADD_BOOLEAN_BITFIELD(has_background_image_, HasBackgroundImage);
       ADD_BOOLEAN_BITFIELD(has_box_sizing_, HasBoxSizing);
       ADD_BOOLEAN_BITFIELD(has_overflow_x_, HasOverflowX);
       ADD_BOOLEAN_BITFIELD(has_overflow_y_, HasOverflowY);