LibWeb/CSS: Implement mix-blend-mode

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

Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -1433,6 +1433,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 @@ public:
     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 @@ public:
     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 @@ public:
     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 @@ protected:
         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 @@ public:
     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

@@ -2116,6 +2116,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;
 }
 
@@ -1039,6 +1044,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

@@ -124,6 +124,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

@@ -67,6 +67,7 @@ private:
     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

@@ -23,6 +23,8 @@
 #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>
 #include <LibWeb/Painting/DisplayListPlayerSkia.h>
@@ -195,11 +197,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();
     }
@@ -878,6 +884,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

@@ -54,6 +54,7 @@ private:
     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 @@ public:
 
     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 @@ public:
     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);

Libraries/LibWeb/Painting/SVGSVGPaintable.cpp

@@ -6,6 +6,7 @@
 
 #include <LibWeb/Layout/ImageBox.h>
 #include <LibWeb/Painting/SVGSVGPaintable.h>
+#include <LibWeb/Painting/StackingContext.h>
 
 namespace Web::Painting {
 
@@ -55,9 +56,21 @@ void SVGSVGPaintable::paint_svg_box(PaintContext& context, PaintableBox const& s
 {
     auto const& computed_values = svg_box.computed_values();
 
-    auto const& filter = svg_box.computed_values().filter();
+    auto const& filter = computed_values.filter();
     auto masking_area = svg_box.get_masking_area();
-    auto needs_to_save_state = svg_box.has_css_transform() || svg_box.get_masking_area().has_value();
+
+    Gfx::CompositingAndBlendingOperator compositing_and_blending_operator;
+    switch (computed_values.mix_blend_mode()) {
+#undef __ENUMERATE
+#define __ENUMERATE(mix_blend_mode)                                                              \
+    case CSS::MixBlendMode::mix_blend_mode:                                                      \
+        compositing_and_blending_operator = Gfx::CompositingAndBlendingOperator::mix_blend_mode; \
+        break;
+        ENUMERATE_MIX_BLEND_MODES(__ENUMERATE)
+#undef __ENUMERATE
+    }
+
+    auto needs_to_save_state = computed_values.isolation() == CSS::Isolation::Isolate || compositing_and_blending_operator != Gfx::CompositingAndBlendingOperator::Normal || svg_box.has_css_transform() || svg_box.get_masking_area().has_value();
 
     if (needs_to_save_state) {
         context.display_list_recorder().save();
@@ -71,6 +84,10 @@ void SVGSVGPaintable::paint_svg_box(PaintContext& context, PaintableBox const& s
         context.display_list_recorder().apply_filters(filter);
     }
 
+    if (compositing_and_blending_operator != Gfx::CompositingAndBlendingOperator::Normal) {
+        context.display_list_recorder().apply_compositing_and_blending_operator(compositing_and_blending_operator);
+    }
+
     if (svg_box.has_css_transform()) {
         auto transform_matrix = svg_box.transform();
         Gfx::FloatPoint transform_origin = svg_box.transform_origin().template to_type<float>();
@@ -95,6 +112,10 @@ void SVGSVGPaintable::paint_svg_box(PaintContext& context, PaintableBox const& s
 
     paint_descendants(context, svg_box, phase);
 
+    if (compositing_and_blending_operator != Gfx::CompositingAndBlendingOperator::Normal) {
+        context.display_list_recorder().restore();
+    }
+
     if (!filter.is_empty()) {
         context.display_list_recorder().restore();
     }

Libraries/LibWeb/Painting/StackingContext.cpp

@@ -299,8 +299,21 @@ void StackingContext::paint(PaintContext& context) const
     auto transform_matrix = paintable_box().transform();
     auto transform_origin = paintable_box().transform_origin().to_type<float>();
 
+    Gfx::CompositingAndBlendingOperator compositing_and_blending_operator;
+    switch (paintable_box().computed_values().mix_blend_mode()) {
+#undef __ENUMERATE
+#define __ENUMERATE(mix_blend_mode)                                                              \
+    case CSS::MixBlendMode::mix_blend_mode:                                                      \
+        compositing_and_blending_operator = Gfx::CompositingAndBlendingOperator::mix_blend_mode; \
+        break;
+        ENUMERATE_MIX_BLEND_MODES(__ENUMERATE)
+#undef __ENUMERATE
+    }
+
     DisplayListRecorder::PushStackingContextParams push_stacking_context_params {
         .opacity = opacity,
+        .compositing_and_blending_operator = compositing_and_blending_operator,
+        .isolate = paintable_box().computed_values().isolation() == CSS::Isolation::Isolate,
         .is_fixed_position = paintable_box().is_fixed_position(),
         .source_paintable_rect = source_paintable_rect,
         .transform = {

Libraries/LibWeb/Painting/StackingContext.h

@@ -12,6 +12,26 @@
 
 namespace Web::Painting {
 
+#define ENUMERATE_MIX_BLEND_MODES(E) \
+    E(Normal)                        \
+    E(Multiply)                      \
+    E(Screen)                        \
+    E(Overlay)                       \
+    E(Darken)                        \
+    E(Lighten)                       \
+    E(ColorDodge)                    \
+    E(ColorBurn)                     \
+    E(HardLight)                     \
+    E(SoftLight)                     \
+    E(Difference)                    \
+    E(Exclusion)                     \
+    E(Hue)                           \
+    E(Saturation)                    \
+    E(Color)                         \
+    E(Luminosity)                    \
+    E(PlusDarker)                    \
+    E(PlusLighter)
+
 class StackingContext {
     friend class ViewportPaintable;
 

Tests/LibWeb/Ref/expected/wpt-import/css/compositing/mix-blend-mode/reference/green-square.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>CSS Reftest Reference</title>
+        <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com">
+        <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com">
+        <style type="text/css">
+            div {
+                background: #0F0;
+                width: 100px;
+                height: 100px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if you can see a green square on the screen.</p>
+        <div></div>
+    </body>
+</html>

Tests/LibWeb/Ref/expected/wpt-import/css/compositing/mix-blend-mode/reference/mix-blend-mode-svg-ref.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS Test: SVG element is blended.</title>
+        <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com">
+        <style type="text/css">
+            div {
+                width: 100px;
+                height: 100px;
+                background: #0F0;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if you can see a green box.</p>
+        <div></div>
+    </body>
+</html>

Tests/LibWeb/Ref/input/wpt-import/css/compositing/mix-blend-mode/mix-blend-mode-simple.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS Test: An element with mix-blend-mode blends with its parent element.</title>
+        <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com">
+        <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com">
+        <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode">
+        <meta name="assert" content="Test checks that an element with mix-blend-mode blends with its parent element.">
+        <meta name="fuzzy" content="0-1;0-10">
+        <link rel="match" href="../../../../../expected/wpt-import/css/compositing/mix-blend-mode/reference/green-square.html">
+        <style type="text/css">
+            div {
+                width: 100px;
+                height: 100px;
+            }
+            .parent {
+                background: #FF0;
+            }
+            .child {
+                background: #F00;
+                mix-blend-mode: difference;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if you can see a green square on the screen.</p>
+        <div class="parent">
+            <div class="child"></div>
+        </div>
+    </body>
+</html>

Tests/LibWeb/Ref/input/wpt-import/css/compositing/mix-blend-mode/mix-blend-mode-svg.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS Test: SVG element is blended.</title>
+        <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com">
+        <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode">
+        <meta name="assert" content="Test checks that an SVG element blends with the parent container.">
+        <meta name="flags" content="svg">
+        <meta name="fuzzy" content="0-1;0-10">
+        <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com">
+        <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com">
+        <link rel="match" href="../../../../../expected/wpt-import/css/compositing/mix-blend-mode/reference/mix-blend-mode-svg-ref.html">
+        <style type="text/css">
+            div {
+                width: 100px;
+                height: 100px;
+                background: #FF0;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if you can see a green box.</p>
+        <div>
+            <svg width="100" height="100" style="mix-blend-mode: difference;">
+              <rect width="100" height="100" style="fill: #F00;">
+            </svg>
+        </div>
+    </body>
+</html>

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt

@@ -1,6 +1,6 @@
 All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
 'cssText': ''
-'length': '218'
+'length': '219'
 'parentRule': 'null'
 'cssFloat': 'none'
 'WebkitAlignContent': 'normal'
@@ -455,6 +455,8 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'min-inline-size': '0px'
 'minWidth': 'auto'
 'min-width': 'auto'
+'mixBlendMode': 'normal'
+'mix-blend-mode': 'normal'
 'objectFit': 'fill'
 'object-fit': 'fill'
 'objectPosition': '50% 50%'

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt

@@ -167,57 +167,58 @@ All properties associated with getComputedStyle(document.body):
     "164": "min-height",
     "165": "min-inline-size",
     "166": "min-width",
-    "167": "object-fit",
-    "168": "object-position",
-    "169": "opacity",
-    "170": "order",
-    "171": "outline-color",
-    "172": "outline-offset",
-    "173": "outline-style",
-    "174": "outline-width",
-    "175": "overflow-x",
-    "176": "overflow-y",
-    "177": "padding-block-end",
-    "178": "padding-block-start",
-    "179": "padding-bottom",
-    "180": "padding-inline-end",
-    "181": "padding-inline-start",
-    "182": "padding-left",
-    "183": "padding-right",
-    "184": "padding-top",
-    "185": "position",
-    "186": "r",
-    "187": "right",
-    "188": "rotate",
-    "189": "row-gap",
-    "190": "rx",
-    "191": "ry",
-    "192": "scale",
-    "193": "scrollbar-gutter",
-    "194": "scrollbar-width",
-    "195": "stop-color",
-    "196": "stop-opacity",
-    "197": "table-layout",
-    "198": "text-decoration-color",
-    "199": "text-decoration-style",
-    "200": "text-decoration-thickness",
-    "201": "text-overflow",
-    "202": "top",
-    "203": "transform",
-    "204": "transform-box",
-    "205": "transform-origin",
-    "206": "transition-delay",
-    "207": "transition-duration",
-    "208": "transition-property",
-    "209": "transition-timing-function",
-    "210": "translate",
-    "211": "unicode-bidi",
-    "212": "user-select",
-    "213": "vertical-align",
-    "214": "width",
-    "215": "x",
-    "216": "y",
-    "217": "z-index"
+    "167": "mix-blend-mode",
+    "168": "object-fit",
+    "169": "object-position",
+    "170": "opacity",
+    "171": "order",
+    "172": "outline-color",
+    "173": "outline-offset",
+    "174": "outline-style",
+    "175": "outline-width",
+    "176": "overflow-x",
+    "177": "overflow-y",
+    "178": "padding-block-end",
+    "179": "padding-block-start",
+    "180": "padding-bottom",
+    "181": "padding-inline-end",
+    "182": "padding-inline-start",
+    "183": "padding-left",
+    "184": "padding-right",
+    "185": "padding-top",
+    "186": "position",
+    "187": "r",
+    "188": "right",
+    "189": "rotate",
+    "190": "row-gap",
+    "191": "rx",
+    "192": "ry",
+    "193": "scale",
+    "194": "scrollbar-gutter",
+    "195": "scrollbar-width",
+    "196": "stop-color",
+    "197": "stop-opacity",
+    "198": "table-layout",
+    "199": "text-decoration-color",
+    "200": "text-decoration-style",
+    "201": "text-decoration-thickness",
+    "202": "text-overflow",
+    "203": "top",
+    "204": "transform",
+    "205": "transform-box",
+    "206": "transform-origin",
+    "207": "transition-delay",
+    "208": "transition-duration",
+    "209": "transition-property",
+    "210": "transition-timing-function",
+    "211": "translate",
+    "212": "unicode-bidi",
+    "213": "user-select",
+    "214": "vertical-align",
+    "215": "width",
+    "216": "x",
+    "217": "y",
+    "218": "z-index"
 }
 All properties associated with document.body.style by default:
 {}

Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt

@@ -165,6 +165,7 @@ min-block-size: 0px
 min-height: auto
 min-inline-size: 0px
 min-width: auto
+mix-blend-mode: normal
 object-fit: fill
 object-position: 50% 50%
 opacity: 1