mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-28 05:07:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb/CSS: Implement 'background-blend-mode'

Browse source 
This implements the 'background-blend-mode' CSS property.
This commit is contained in:
Glenn Skrzypczak 2025-03-20 15:36:36 +01:00 • committed by Sam Atkins
commit a73cd88f0c
Notes: github-actions[bot] 2025-03-28 09:42:07 +00:00
27 changed files with 303 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Libraries/LibWeb/CSS/ComputedValues.h
View file

@ -296,6 +296,7 @@ struct BackgroundLayerData {
CSS::LengthPercentage size_y { CSS::Length::make_auto() };
CSS::Repeat repeat_x { CSS::Repeat::Repeat };
CSS::Repeat repeat_y { CSS::Repeat::Repeat };
CSS::MixBlendMode blend_mode { CSS::MixBlendMode::Normal };
};
struct BorderData {

1
Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp
View file

@ -443,6 +443,7 @@ Parser::ParseErrorOr<NonnullRefPtr<CSSStyleValue>> Parser::parse_css_value(Prope
return parsed_value.release_nonnull();
return ParseError::SyntaxError;
case PropertyID::BackgroundAttachment:
case PropertyID::BackgroundBlendMode:
case PropertyID::BackgroundClip:
case PropertyID::BackgroundImage:
case PropertyID::BackgroundOrigin:

8
Libraries/LibWeb/CSS/Properties.json
View file

@ -327,6 +327,14 @@
"background-attachment"
]
},
"background-blend-mode": {
"animation-type": "none",
"inherited": false,
"initial": "normal",
"valid-types": [
"mix-blend-mode"
]
},
"background-clip": {
"affects-layout": false,
"animation-type": "repeatable-list",

3
Libraries/LibWeb/Layout/Node.cpp
View file

@ -397,6 +397,7 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
auto const& y_positions = computed_style.property(CSS::PropertyID::BackgroundPositionY);
auto const& repeats = computed_style.property(CSS::PropertyID::BackgroundRepeat);
auto const& sizes = computed_style.property(CSS::PropertyID::BackgroundSize);
auto const& background_blend_modes = computed_style.property(CSS::PropertyID::BackgroundBlendMode);
auto count_layers = [](auto const& maybe_style_value) -> size_t {
if (maybe_style_value.is_value_list())
@ -510,6 +511,8 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
layer.repeat_y = repeat_value->as_background_repeat().repeat_y();
}
layer.blend_mode = CSS::keyword_to_mix_blend_mode(value_for_layer(background_blend_modes, layer_index)->to_keyword()).value_or(CSS::MixBlendMode::Normal);
layers.append(move(layer));
}

20
Libraries/LibWeb/Painting/BackgroundPainting.cpp
View file

@ -11,6 +11,7 @@
#include <LibWeb/Layout/TextNode.h>
#include <LibWeb/Layout/Viewport.h>
#include <LibWeb/Painting/BackgroundPainting.h>
#include <LibWeb/Painting/Blending.h>
#include <LibWeb/Painting/DisplayListRecorder.h>
#include <LibWeb/Painting/PaintableBox.h>
@ -77,6 +78,11 @@ void paint_background(PaintContext& context, PaintableBox const& paintable_box,
{
auto& display_list_recorder = context.display_list_recorder();
// https://drafts.fxtf.org/compositing/#background-blend-mode
// Background layers must not blend with the content that is behind the element,
// instead they must act as if they are rendered into an isolated group.
display_list_recorder.save_layer();
DisplayListRecorderStateSaver state { display_list_recorder };
if (resolved_background.needs_text_clip) {
auto display_list = compute_text_clip_paths(context, paintable_box, resolved_background.background_rect.location());
@ -267,6 +273,11 @@ void paint_background(PaintContext& context, PaintableBox const& paintable_box,
}
};
Gfx::CompositingAndBlendingOperator compositing_and_blending_operator = mix_blend_mode_to_compositing_and_blending_operator(layer.blend_mode);
if (compositing_and_blending_operator != Gfx::CompositingAndBlendingOperator::Normal) {
display_list_recorder.apply_compositing_and_blending_operator(compositing_and_blending_operator);
}
if (auto color = image.color_if_single_pixel_bitmap(); color.has_value()) {
// OPTIMIZATION: If the image is a single pixel, we can just fill the whole area with it.
// However, we must first figure out the real coverage area, taking repeat etc into account.
@ -289,7 +300,13 @@ void paint_background(PaintContext& context, PaintableBox const& paintable_box,
image.paint(context, image_device_rect, image_rendering);
});
}
if (compositing_and_blending_operator != Gfx::CompositingAndBlendingOperator::Normal) {
display_list_recorder.restore();
}
}
display_list_recorder.restore();
}
ResolvedBackground resolve_background_layers(Vector<CSS::BackgroundLayerData> const& layers, PaintableBox const& paintable_box, Color background_color, CSSPixelRect const& border_rect, BorderRadiiData const& border_radii)
@ -404,7 +421,8 @@ ResolvedBackground resolve_background_layers(Vector<CSS::BackgroundLayerData> co
.background_positioning_area = background_positioning_area,
.image_rect = image_rect,
.repeat_x = layer.repeat_x,
.repeat_y = layer.repeat_y });
.repeat_y = layer.repeat_y,
.blend_mode = layer.blend_mode });
}
return ResolvedBackground {

1
Libraries/LibWeb/Painting/BackgroundPainting.h
View file

@ -24,6 +24,7 @@ struct ResolvedBackgroundLayerData {
CSSPixelRect image_rect;
CSS::Repeat repeat_x;
CSS::Repeat repeat_y;
CSS::MixBlendMode blend_mode;
};
struct BackgroundBox {

48
Libraries/LibWeb/Painting/Blending.h Normal file
View file

@ -0,0 +1,48 @@
/*
* Copyright (c) 2025, Glenn Skrzypczak <glenn.skrzypczak@gmail.com>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <LibGfx/CompositingAndBlendingOperator.h>
#include <LibWeb/CSS/Enums.h>
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)
static Gfx::CompositingAndBlendingOperator mix_blend_mode_to_compositing_and_blending_operator(CSS::MixBlendMode blend_mode)
{
switch (blend_mode) {
#undef __ENUMERATE
#define __ENUMERATE(blend_mode) \
case CSS::MixBlendMode::blend_mode: \
return Gfx::CompositingAndBlendingOperator::blend_mode;
ENUMERATE_MIX_BLEND_MODES(__ENUMERATE)
#undef __ENUMERATE
default:
VERIFY_NOT_REACHED();
}
}
}

12
Libraries/LibWeb/Painting/SVGSVGPaintable.cpp
View file

@ -5,6 +5,7 @@
*/
#include <LibWeb/Layout/ImageBox.h>
#include <LibWeb/Painting/Blending.h>
#include <LibWeb/Painting/DisplayListRecorder.h>
#include <LibWeb/Painting/SVGSVGPaintable.h>
#include <LibWeb/Painting/StackingContext.h>
@ -60,16 +61,7 @@ void SVGSVGPaintable::paint_svg_box(PaintContext& context, PaintableBox const& s
auto const& filter = computed_values.filter();
auto masking_area = svg_box.get_masking_area();
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
}
Gfx::CompositingAndBlendingOperator compositing_and_blending_operator = mix_blend_mode_to_compositing_and_blending_operator(computed_values.mix_blend_mode());
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();

12
Libraries/LibWeb/Painting/StackingContext.cpp
View file

@ -14,6 +14,7 @@
#include <LibWeb/Layout/Box.h>
#include <LibWeb/Layout/ReplacedBox.h>
#include <LibWeb/Layout/Viewport.h>
#include <LibWeb/Painting/Blending.h>
#include <LibWeb/Painting/DisplayListRecorder.h>
#include <LibWeb/Painting/PaintableBox.h>
#include <LibWeb/Painting/SVGSVGPaintable.h>
@ -316,16 +317,7 @@ 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
}
Gfx::CompositingAndBlendingOperator compositing_and_blending_operator = mix_blend_mode_to_compositing_and_blending_operator(paintable_box().computed_values().mix_blend_mode());
DisplayListRecorder::PushStackingContextParams push_stacking_context_params {
.opacity = opacity,

20
Libraries/LibWeb/Painting/StackingContext.h
View file

@ -12,26 +12,6 @@
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;