From e5dbcf93e23ca6651a8ddbc2def0634b3a65444a Mon Sep 17 00:00:00 2001 From: Glenn Skrzypczak Date: Wed, 22 Jan 2025 09:50:49 +0100 Subject: [PATCH] LibWeb/CSS: Implement mix-blend-mode This adds support for the `mix-blend-mode` CSS property. --- Libraries/LibWeb/CSS/ComputedProperties.cpp | 6 + Libraries/LibWeb/CSS/ComputedProperties.h | 1 + Libraries/LibWeb/CSS/ComputedValues.h | 4 + Libraries/LibWeb/CSS/Enums.json | 20 ++++ Libraries/LibWeb/CSS/Keywords.json | 17 +++ Libraries/LibWeb/CSS/Properties.json | 8 ++ Libraries/LibWeb/Layout/Node.cpp | 8 ++ Libraries/LibWeb/Painting/Command.h | 9 +- Libraries/LibWeb/Painting/DisplayList.cpp | 1 + Libraries/LibWeb/Painting/DisplayList.h | 1 + .../LibWeb/Painting/DisplayListPlayerSkia.cpp | 17 ++- .../LibWeb/Painting/DisplayListPlayerSkia.h | 1 + .../LibWeb/Painting/DisplayListRecorder.cpp | 7 ++ .../LibWeb/Painting/DisplayListRecorder.h | 3 + Libraries/LibWeb/Painting/SVGSVGPaintable.cpp | 25 ++++- Libraries/LibWeb/Painting/StackingContext.cpp | 13 +++ Libraries/LibWeb/Painting/StackingContext.h | 20 ++++ .../reference/green-square.html | 20 ++++ .../reference/mix-blend-mode-svg-ref.html | 18 +++ .../mix-blend-mode/mix-blend-mode-simple.html | 31 ++++++ .../mix-blend-mode/mix-blend-mode-svg.html | 29 +++++ ...upported-properties-and-default-values.txt | 4 +- ...eclaration-has-indexed-property-getter.txt | 103 +++++++++--------- .../css/getComputedStyle-print-all.txt | 1 + 24 files changed, 310 insertions(+), 57 deletions(-) create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/compositing/mix-blend-mode/reference/green-square.html create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/compositing/mix-blend-mode/reference/mix-blend-mode-svg-ref.html create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/compositing/mix-blend-mode/mix-blend-mode-simple.html create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/compositing/mix-blend-mode/mix-blend-mode-svg.html diff --git a/Libraries/LibWeb/CSS/ComputedProperties.cpp b/Libraries/LibWeb/CSS/ComputedProperties.cpp index ada580407afce..bc376eb48b6c1 100644 --- a/Libraries/LibWeb/CSS/ComputedProperties.cpp +++ b/Libraries/LibWeb/CSS/ComputedProperties.cpp @@ -1428,6 +1428,12 @@ CSS::Containment ComputedProperties::contain() const return containment; } +Optional ComputedProperties::mix_blend_mode() const +{ + auto const& value = property(CSS::PropertyID::MixBlendMode); + return keyword_to_mix_blend_mode(value.to_keyword()); +} + Optional ComputedProperties::mask_type() const { auto const& value = property(CSS::PropertyID::MaskType); diff --git a/Libraries/LibWeb/CSS/ComputedProperties.h b/Libraries/LibWeb/CSS/ComputedProperties.h index b8f3cf5eb11c3..8e475cb0fbdc6 100644 --- a/Libraries/LibWeb/CSS/ComputedProperties.h +++ b/Libraries/LibWeb/CSS/ComputedProperties.h @@ -162,6 +162,7 @@ class ComputedProperties final : public JS::Cell { Optional user_select() const; Optional isolation() const; CSS::Containment contain() const; + Optional mix_blend_mode() const; static Vector transformations_for_style_value(CSSStyleValue const& value); Vector transformations() const; diff --git a/Libraries/LibWeb/CSS/ComputedValues.h b/Libraries/LibWeb/CSS/ComputedValues.h index b2ee38ed598b3..2027d6e541123 100644 --- a/Libraries/LibWeb/CSS/ComputedValues.h +++ b/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 rotate; Optional 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); } diff --git a/Libraries/LibWeb/CSS/Enums.json b/Libraries/LibWeb/CSS/Enums.json index 1c66608a01b1c..e37f89cede7c3 100644 --- a/Libraries/LibWeb/CSS/Enums.json +++ b/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", diff --git a/Libraries/LibWeb/CSS/Keywords.json b/Libraries/LibWeb/CSS/Keywords.json index c9b30eca83312..e5057a0f7659b 100644 --- a/Libraries/LibWeb/CSS/Keywords.json +++ b/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", diff --git a/Libraries/LibWeb/CSS/Properties.json b/Libraries/LibWeb/CSS/Properties.json index ab1852dfd226f..357897ca0badd 100644 --- a/Libraries/LibWeb/CSS/Properties.json +++ b/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, diff --git a/Libraries/LibWeb/Layout/Node.cpp b/Libraries/LibWeb/Layout/Node.cpp index fe4935e702784..61b93e521d1c3 100644 --- a/Libraries/LibWeb/Layout/Node.cpp +++ b/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(this)) diff --git a/Libraries/LibWeb/Painting/Command.h b/Libraries/LibWeb/Painting/Command.h index 83dbe7c234b47..32ec22471ff62 100644 --- a/Libraries/LibWeb/Painting/Command.h +++ b/Libraries/LibWeb/Painting/Command.h @@ -12,6 +12,7 @@ #include #include #include +#include #include #include #include @@ -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 filter; }; @@ -469,8 +476,8 @@ using Command = Variant< PaintNestedDisplayList, PaintScrollBar, ApplyOpacity, + ApplyCompositeAndBlendingOperator, ApplyFilters, ApplyTransform, ApplyMaskBitmap>; - } diff --git a/Libraries/LibWeb/Painting/DisplayList.cpp b/Libraries/LibWeb/Painting/DisplayList.cpp index ec7ad75e93b69..296cd56ae1a4c 100644 --- a/Libraries/LibWeb/Painting/DisplayList.cpp +++ b/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) diff --git a/Libraries/LibWeb/Painting/DisplayList.h b/Libraries/LibWeb/Painting/DisplayList.h index 358566ba85b74..ead45cd9b2f50 100644 --- a/Libraries/LibWeb/Painting/DisplayList.h +++ b/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; diff --git a/Libraries/LibWeb/Painting/DisplayListPlayerSkia.cpp b/Libraries/LibWeb/Painting/DisplayListPlayerSkia.cpp index b3eedde3d26ef..a28215f789c5d 100644 --- a/Libraries/LibWeb/Painting/DisplayListPlayerSkia.cpp +++ b/Libraries/LibWeb/Painting/DisplayListPlayerSkia.cpp @@ -25,6 +25,7 @@ #include #include +#include #include #include #include @@ -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()) { diff --git a/Libraries/LibWeb/Painting/DisplayListPlayerSkia.h b/Libraries/LibWeb/Painting/DisplayListPlayerSkia.h index 6e1f408cda7e1..0151f0ae08c1c 100644 --- a/Libraries/LibWeb/Painting/DisplayListPlayerSkia.h +++ b/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; diff --git a/Libraries/LibWeb/Painting/DisplayListRecorder.cpp b/Libraries/LibWeb/Painting/DisplayListRecorder.cpp index 82971c4bddb3f..0026b12d3aac3 100644 --- a/Libraries/LibWeb/Painting/DisplayListRecorder.cpp +++ b/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 filter) { append(ApplyFilters { .filter = move(filter) }); diff --git a/Libraries/LibWeb/Painting/DisplayListRecorder.h b/Libraries/LibWeb/Painting/DisplayListRecorder.h index 9265743681947..71e145c7bab70 100644 --- a/Libraries/LibWeb/Painting/DisplayListRecorder.h +++ b/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 filter); void apply_transform(Gfx::FloatPoint origin, Gfx::FloatMatrix4x4); void apply_mask_bitmap(Gfx::IntPoint origin, Gfx::ImmutableBitmap const&, Gfx::Bitmap::MaskKind); diff --git a/Libraries/LibWeb/Painting/SVGSVGPaintable.cpp b/Libraries/LibWeb/Painting/SVGSVGPaintable.cpp index 23e6201483d87..e0db6e41f8f8a 100644 --- a/Libraries/LibWeb/Painting/SVGSVGPaintable.cpp +++ b/Libraries/LibWeb/Painting/SVGSVGPaintable.cpp @@ -6,6 +6,7 @@ #include #include +#include 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(); @@ -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(); } diff --git a/Libraries/LibWeb/Painting/StackingContext.cpp b/Libraries/LibWeb/Painting/StackingContext.cpp index 56dec20390bfc..605396e862b6a 100644 --- a/Libraries/LibWeb/Painting/StackingContext.cpp +++ b/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(); + 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 = { diff --git a/Libraries/LibWeb/Painting/StackingContext.h b/Libraries/LibWeb/Painting/StackingContext.h index 03e995e2c69d8..900298c144d43 100644 --- a/Libraries/LibWeb/Painting/StackingContext.h +++ b/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; diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/compositing/mix-blend-mode/reference/green-square.html b/Tests/LibWeb/Ref/expected/wpt-import/css/compositing/mix-blend-mode/reference/green-square.html new file mode 100644 index 0000000000000..bfc4f715efe57 --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/compositing/mix-blend-mode/reference/green-square.html @@ -0,0 +1,20 @@ + + + + + CSS Reftest Reference + + + + + +

Test passes if you can see a green square on the screen.

+
+ + diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/compositing/mix-blend-mode/reference/mix-blend-mode-svg-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/compositing/mix-blend-mode/reference/mix-blend-mode-svg-ref.html new file mode 100644 index 0000000000000..2ebde9167c63d --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/compositing/mix-blend-mode/reference/mix-blend-mode-svg-ref.html @@ -0,0 +1,18 @@ + + + + CSS Test: SVG element is blended. + + + + +

Test passes if you can see a green box.

+
+ + diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/compositing/mix-blend-mode/mix-blend-mode-simple.html b/Tests/LibWeb/Ref/input/wpt-import/css/compositing/mix-blend-mode/mix-blend-mode-simple.html new file mode 100644 index 0000000000000..4f8b3131828de --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/compositing/mix-blend-mode/mix-blend-mode-simple.html @@ -0,0 +1,31 @@ + + + + CSS Test: An element with mix-blend-mode blends with its parent element. + + + + + + + + + +

Test passes if you can see a green square on the screen.

+
+
+
+ + diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/compositing/mix-blend-mode/mix-blend-mode-svg.html b/Tests/LibWeb/Ref/input/wpt-import/css/compositing/mix-blend-mode/mix-blend-mode-svg.html new file mode 100644 index 0000000000000..1bf1867bf9d08 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/compositing/mix-blend-mode/mix-blend-mode-svg.html @@ -0,0 +1,29 @@ + + + + CSS Test: SVG element is blended. + + + + + + + + + + + +

Test passes if you can see a green box.

+
+ + + +
+ + diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt index 9d75b2c2eb54f..38b4809c43402 100644 --- a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt +++ b/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': '215' +'length': '216' 'parentRule': 'null' 'cssFloat': 'none' 'WebkitAlignContent': 'normal' @@ -449,6 +449,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%' diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt index e475fa85f01e5..40588cc3ef54b 100644 --- a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt +++ b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt @@ -164,57 +164,58 @@ All properties associated with getComputedStyle(document.body): "161": "min-height", "162": "min-inline-size", "163": "min-width", - "164": "object-fit", - "165": "object-position", - "166": "opacity", - "167": "order", - "168": "outline-color", - "169": "outline-offset", - "170": "outline-style", - "171": "outline-width", - "172": "overflow-x", - "173": "overflow-y", - "174": "padding-block-end", - "175": "padding-block-start", - "176": "padding-bottom", - "177": "padding-inline-end", - "178": "padding-inline-start", - "179": "padding-left", - "180": "padding-right", - "181": "padding-top", - "182": "position", - "183": "r", - "184": "right", - "185": "rotate", - "186": "row-gap", - "187": "rx", - "188": "ry", - "189": "scale", - "190": "scrollbar-gutter", - "191": "scrollbar-width", - "192": "stop-color", - "193": "stop-opacity", - "194": "table-layout", - "195": "text-decoration-color", - "196": "text-decoration-style", - "197": "text-decoration-thickness", - "198": "text-overflow", - "199": "top", - "200": "transform", - "201": "transform-box", - "202": "transform-origin", - "203": "transition-delay", - "204": "transition-duration", - "205": "transition-property", - "206": "transition-timing-function", - "207": "translate", - "208": "unicode-bidi", - "209": "user-select", - "210": "vertical-align", - "211": "width", - "212": "x", - "213": "y", - "214": "z-index" + "164": "mix-blend-mode", + "165": "object-fit", + "166": "object-position", + "167": "opacity", + "168": "order", + "169": "outline-color", + "170": "outline-offset", + "171": "outline-style", + "172": "outline-width", + "173": "overflow-x", + "174": "overflow-y", + "175": "padding-block-end", + "176": "padding-block-start", + "177": "padding-bottom", + "178": "padding-inline-end", + "179": "padding-inline-start", + "180": "padding-left", + "181": "padding-right", + "182": "padding-top", + "183": "position", + "184": "r", + "185": "right", + "186": "rotate", + "187": "row-gap", + "188": "rx", + "189": "ry", + "190": "scale", + "191": "scrollbar-gutter", + "192": "scrollbar-width", + "193": "stop-color", + "194": "stop-opacity", + "195": "table-layout", + "196": "text-decoration-color", + "197": "text-decoration-style", + "198": "text-decoration-thickness", + "199": "text-overflow", + "200": "top", + "201": "transform", + "202": "transform-box", + "203": "transform-origin", + "204": "transition-delay", + "205": "transition-duration", + "206": "transition-property", + "207": "transition-timing-function", + "208": "translate", + "209": "unicode-bidi", + "210": "user-select", + "211": "vertical-align", + "212": "width", + "213": "x", + "214": "y", + "215": "z-index" } All properties associated with document.body.style by default: {} diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt index e75ecc5b120e5..9c5c1d67cca37 100644 --- a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt +++ b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt @@ -162,6 +162,7 @@ max-width: none min-height: auto min-inline-size: 0px min-width: auto +mix-blend-mode: normal object-fit: fill object-position: 50% 50% opacity: 1