mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-10 18:19:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

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

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 {