LibWeb/CSS: Implement mix-blend-mode

This adds support for the `mix-blend-mode` CSS property.

Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -1428,6 +1428,12 @@ CSS::Containment ComputedProperties::contain() const
     return containment;
 }
 
+Optional<CSS::MixBlendMode> ComputedProperties::mix_blend_mode() const
+{
+    auto const& value = property(CSS::PropertyID::MixBlendMode);
+    return keyword_to_mix_blend_mode(value.to_keyword());
+}
+
 Optional<CSS::MaskType> ComputedProperties::mask_type() const
 {
     auto const& value = property(CSS::PropertyID::MaskType);

Libraries/LibWeb/CSS/ComputedProperties.h

@@ -162,6 +162,7 @@ class ComputedProperties final : public JS::Cell {
     Optional<CSS::UserSelect> user_select() const;
     Optional<CSS::Isolation> isolation() const;
     CSS::Containment contain() const;
+    Optional<CSS::MixBlendMode> mix_blend_mode() const;
 
     static Vector<CSS::Transformation> transformations_for_style_value(CSSStyleValue const& value);
     Vector<CSS::Transformation> transformations() const;

Libraries/LibWeb/CSS/ComputedValues.h

@@ -185,6 +185,7 @@ class InitialValues {
     static CSS::UserSelect user_select() { return CSS::UserSelect::Auto; }
     static CSS::Isolation isolation() { return CSS::Isolation::Auto; }
     static CSS::Containment contain() { return {}; }
+    static CSS::MixBlendMode mix_blend_mode() { return CSS::MixBlendMode::Normal; }
 
     // https://www.w3.org/TR/SVG/geometry.html
     static LengthPercentage cx() { return CSS::Length::make_px(0); }
@@ -442,6 +443,7 @@ class ComputedValues {
     CSS::UserSelect user_select() const { return m_noninherited.user_select; }
     CSS::Isolation isolation() const { return m_noninherited.isolation; }
     CSS::Containment const& contain() const { return m_noninherited.contain; }
+    CSS::MixBlendMode mix_blend_mode() const { return m_noninherited.mix_blend_mode; }
 
     CSS::LengthBox const& inset() const { return m_noninherited.inset; }
     const CSS::LengthBox& margin() const { return m_noninherited.margin; }
@@ -696,6 +698,7 @@ class ComputedValues {
         CSS::UserSelect user_select { InitialValues::user_select() };
         CSS::Isolation isolation { InitialValues::isolation() };
         CSS::Containment contain { InitialValues::contain() };
+        CSS::MixBlendMode mix_blend_mode { InitialValues::mix_blend_mode() };
 
         Optional<CSS::Transformation> rotate;
         Optional<CSS::Transformation> translate;
@@ -871,6 +874,7 @@ class MutableComputedValues final : public ComputedValues {
     void set_user_select(CSS::UserSelect value) { m_noninherited.user_select = value; }
     void set_isolation(CSS::Isolation value) { m_noninherited.isolation = value; }
     void set_contain(CSS::Containment value) { m_noninherited.contain = move(value); }
+    void set_mix_blend_mode(CSS::MixBlendMode value) { m_noninherited.mix_blend_mode = value; }
 
     void set_fill(SVGPaint value) { m_inherited.fill = move(value); }
     void set_stroke(SVGPaint value) { m_inherited.stroke = move(value); }

Libraries/LibWeb/CSS/Enums.json

@@ -406,6 +406,26 @@
     "normal",
     "compact"
   ],
+  "mix-blend-mode": [
+    "normal", 
+    "multiply", 
+    "screen", 
+    "overlay", 
+    "darken",
+    "lighten",
+    "color-dodge",
+    "color-burn",
+    "hard-light",
+    "soft-light",
+    "difference",
+    "exclusion",
+    "hue",
+    "saturation",
+    "color",
+    "luminosity", 
+    "plus-darker", 
+    "plus-lighter"
+  ],
   "object-fit": [
     "fill",
     "contain",

Libraries/LibWeb/CSS/Keywords.json

@@ -114,6 +114,9 @@
   "coarse",
   "col-resize",
   "collapse",
+  "color",
+  "color-dodge",
+  "color-burn",
   "column",
   "column-reverse",
   "common-ligatures",
@@ -133,11 +136,13 @@
   "cursive",
   "custom",
   "dark",
+  "darken",
   "dashed",
   "decimal",
   "decimal-leading-zero",
   "default",
   "diagonal-fractions",
+  "difference",
   "disc",
   "discretionary-ligatures",
   "disclosure-closed",
@@ -158,6 +163,7 @@
   "end",
   "evenodd",
   "ew-resize",
+  "exclusion",
   "expanded",
   "extra-condensed",
   "extra-expanded",
@@ -186,6 +192,7 @@
   "graytext",
   "grid",
   "groove",
+  "hard-light",
   "help",
   "hidden",
   "high",
@@ -196,6 +203,7 @@
   "historical-ligatures",
   "horizontal-tb",
   "hover",
+  "hue",
   "inactiveborder",
   "inactivecaption",
   "inactivecaptiontext",
@@ -242,6 +250,7 @@
   "less",
   "light",
   "lighter",
+  "lighten",
   "line-through",
   "linear",
   "lining-nums",
@@ -255,6 +264,7 @@
   "lowercase",
   "ltr",
   "luminance",
+  "luminosity",
   "mark",
   "marktext",
   "math",
@@ -273,6 +283,7 @@
   "monospace",
   "more",
   "move",
+  "multiply",
   "n-resize",
   "ne-resize",
   "nearest",
@@ -306,6 +317,7 @@
   "ordinal",
   "outset",
   "outside",
+  "overlay",
   "overline",
   "p3",
   "padding-box",
@@ -315,6 +327,8 @@
   "petite-caps",
   "pixelated",
   "plaintext",
+  "plus-darker",
+  "plus-lighter",
   "pointer",
   "portrait",
   "pre",
@@ -353,7 +367,9 @@
   "s-resize",
   "safe",
   "sans-serif",
+  "saturation",
   "scale-down",
+  "screen",
   "scroll",
   "scrollbar",
   "se-resize",
@@ -377,6 +393,7 @@
   "small-caps",
   "smaller",
   "smooth",
+  "soft-light",
   "solid",
   "space",
   "space-around",

Libraries/LibWeb/CSS/Properties.json

@@ -2092,6 +2092,14 @@
       "unitless-length"
     ]
   },
+  "mix-blend-mode": {
+    "animation-type": "none",
+    "inherited": false,
+    "initial": "normal",
+    "valid-types": [
+      "mix-blend-mode"
+    ]
+  },
   "object-fit": {
     "animation-type": "discrete",
     "inherited": false,

Libraries/LibWeb/Layout/Node.cpp

@@ -240,6 +240,11 @@ bool Node::establishes_stacking_context() const
             return true;
     }
 
+    // https://drafts.fxtf.org/compositing/#mix-blend-mode
+    // Applying a blendmode other than normal to the element must establish a new stacking context.
+    if (computed_values().mix_blend_mode() != CSS::MixBlendMode::Normal)
+        return true;
+
     return computed_values().opacity() < 1.0f;
 }
 
@@ -1033,6 +1038,9 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
     if (auto isolation = computed_style.isolation(); isolation.has_value())
         computed_values.set_isolation(isolation.value());
 
+    if (auto mix_blend_mode = computed_style.mix_blend_mode(); mix_blend_mode.has_value())
+        computed_values.set_mix_blend_mode(mix_blend_mode.value());
+
     propagate_style_to_anonymous_wrappers();
 
     if (is<NodeWithStyleAndBoxModelMetrics>(this))

Libraries/LibWeb/Painting/Command.h

@@ -12,6 +12,7 @@
 #include <AK/Utf8View.h>
 #include <AK/Vector.h>
 #include <LibGfx/Color.h>
+#include <LibGfx/CompositingAndBlendingOperator.h>
 #include <LibGfx/Forward.h>
 #include <LibGfx/Gradients.h>
 #include <LibGfx/ImmutableBitmap.h>
@@ -118,6 +119,8 @@ struct StackingContextTransform {
 
 struct PushStackingContext {
     float opacity;
+    Gfx::CompositingAndBlendingOperator compositing_and_blending_operator;
+    bool isolate;
     // The bounding box of the source paintable (pre-transform).
     Gfx::IntRect source_paintable_rect;
     // A translation to be applied after the stacking context has been transformed.
@@ -410,6 +413,10 @@ struct ApplyOpacity {
     float opacity;
 };
 
+struct ApplyCompositeAndBlendingOperator {
+    Gfx::CompositingAndBlendingOperator compositing_and_blending_operator;
+};
+
 struct ApplyFilters {
     Vector<Gfx::Filter> filter;
 };
@@ -469,8 +476,8 @@ using Command = Variant<
     PaintNestedDisplayList,
     PaintScrollBar,
     ApplyOpacity,
+    ApplyCompositeAndBlendingOperator,
     ApplyFilters,
     ApplyTransform,
     ApplyMaskBitmap>;
-
 }

Libraries/LibWeb/Painting/DisplayList.cpp

@@ -122,6 +122,7 @@ void DisplayListPlayer::execute(DisplayList& display_list)
         else HANDLE_COMMAND(PaintScrollBar, paint_scrollbar)
         else HANDLE_COMMAND(PaintNestedDisplayList, paint_nested_display_list)
         else HANDLE_COMMAND(ApplyOpacity, apply_opacity)
+        else HANDLE_COMMAND(ApplyCompositeAndBlendingOperator, apply_composite_and_blending_operator)
         else HANDLE_COMMAND(ApplyFilters, apply_filters)
         else HANDLE_COMMAND(ApplyTransform, apply_transform)
         else HANDLE_COMMAND(ApplyMaskBitmap, apply_mask_bitmap)

Libraries/LibWeb/Painting/DisplayList.h

@@ -75,6 +75,7 @@ class DisplayListPlayer {
     virtual void paint_nested_display_list(PaintNestedDisplayList const&) = 0;
     virtual void paint_scrollbar(PaintScrollBar const&) = 0;
     virtual void apply_opacity(ApplyOpacity const&) = 0;
+    virtual void apply_composite_and_blending_operator(ApplyCompositeAndBlendingOperator const&) = 0;
     virtual void apply_filters(ApplyFilters const&) = 0;
     virtual void apply_transform(ApplyTransform const&) = 0;
     virtual void apply_mask_bitmap(ApplyMaskBitmap const&) = 0;

Libraries/LibWeb/Painting/DisplayListPlayerSkia.cpp

@@ -25,6 +25,7 @@
 #include <pathops/SkPathOps.h>
 
 #include <LibGfx/Font/ScaledFont.h>
+#include <LibGfx/PainterSkia.h>
 #include <LibGfx/PathSkia.h>
 #include <LibGfx/SkiaUtils.h>
 #include <LibWeb/CSS/ComputedValues.h>
@@ -219,11 +220,15 @@ void DisplayListPlayerSkia::push_stacking_context(PushStackingContext const& com
                              .translate(-command.transform.origin);
     auto matrix = to_skia_matrix(new_transform);
 
-    if (command.opacity < 1) {
+    if (command.opacity < 1 || command.compositing_and_blending_operator != Gfx::CompositingAndBlendingOperator::Normal || command.isolate) {
         auto source_paintable_rect = to_skia_rect(command.source_paintable_rect);
         SkRect dest;
         matrix.mapRect(&dest, source_paintable_rect);
-        canvas.saveLayerAlphaf(&dest, command.opacity);
+
+        SkPaint paint;
+        paint.setAlphaf(command.opacity);
+        paint.setBlender(Gfx::to_skia_blender(command.compositing_and_blending_operator));
+        canvas.saveLayer(&dest, &paint);
     } else {
         canvas.save();
     }
@@ -902,6 +907,14 @@ void DisplayListPlayerSkia::apply_opacity(ApplyOpacity const& command)
     canvas.saveLayer(nullptr, &paint);
 }
 
+void DisplayListPlayerSkia::apply_composite_and_blending_operator(ApplyCompositeAndBlendingOperator const& command)
+{
+    auto& canvas = surface().canvas();
+    SkPaint paint;
+    paint.setBlender(Gfx::to_skia_blender(command.compositing_and_blending_operator));
+    canvas.saveLayer(nullptr, &paint);
+}
+
 void DisplayListPlayerSkia::apply_filters(ApplyFilters const& command)
 {
     if (command.filter.is_empty()) {

Libraries/LibWeb/Painting/DisplayListPlayerSkia.h

@@ -63,6 +63,7 @@ class DisplayListPlayerSkia : public DisplayListPlayer {
     void paint_scrollbar(PaintScrollBar const&) override;
     void paint_nested_display_list(PaintNestedDisplayList const&) override;
     void apply_opacity(ApplyOpacity const&) override;
+    void apply_composite_and_blending_operator(ApplyCompositeAndBlendingOperator const&) override;
     void apply_filters(ApplyFilters const&) override;
     void apply_transform(ApplyTransform const&) override;
     void apply_mask_bitmap(ApplyMaskBitmap const&) override;

Libraries/LibWeb/Painting/DisplayListRecorder.cpp

@@ -299,6 +299,8 @@ void DisplayListRecorder::push_stacking_context(PushStackingContextParams params
 {
     append(PushStackingContext {
         .opacity = params.opacity,
+        .compositing_and_blending_operator = params.compositing_and_blending_operator,
+        .isolate = params.isolate,
         .source_paintable_rect = params.source_paintable_rect,
         .transform = {
             .origin = params.transform.origin,
@@ -411,6 +413,11 @@ void DisplayListRecorder::apply_opacity(float opacity)
     append(ApplyOpacity { .opacity = opacity });
 }
 
+void DisplayListRecorder::apply_compositing_and_blending_operator(Gfx::CompositingAndBlendingOperator compositing_and_blending_operator)
+{
+    append(ApplyCompositeAndBlendingOperator { .compositing_and_blending_operator = compositing_and_blending_operator });
+}
+
 void DisplayListRecorder::apply_filters(Vector<Gfx::Filter> filter)
 {
     append(ApplyFilters { .filter = move(filter) });

Libraries/LibWeb/Painting/DisplayListRecorder.h

@@ -118,6 +118,8 @@ class DisplayListRecorder {
 
     struct PushStackingContextParams {
         float opacity;
+        Gfx::CompositingAndBlendingOperator compositing_and_blending_operator;
+        bool isolate;
         bool is_fixed_position;
         Gfx::IntRect source_paintable_rect;
         StackingContextTransform transform;
@@ -146,6 +148,7 @@ class DisplayListRecorder {
     void paint_scrollbar(int scroll_frame_id, Gfx::IntRect, CSSPixelFraction scroll_size, bool vertical);
 
     void apply_opacity(float opacity);
+    void apply_compositing_and_blending_operator(Gfx::CompositingAndBlendingOperator compositing_and_blending_operator);
     void apply_filters(Vector<Gfx::Filter> filter);
     void apply_transform(Gfx::FloatPoint origin, Gfx::FloatMatrix4x4);
     void apply_mask_bitmap(Gfx::IntPoint origin, Gfx::ImmutableBitmap const&, Gfx::Bitmap::MaskKind);