mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-28 05:07:35 +00:00
LibWeb/CSS: Implement 'background-blend-mode'
This implements the 'background-blend-mode' CSS property.
This commit is contained in:
Glenn Skrzypczak
Sam Atkins
parent
1898643ba4
commit
a73cd88f0c
Notes:
github-actions[bot]
2025-03-28 09:42:07 +00:00
Author: https://github.com/skyz1
Commit: a73cd88f0c
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3940
Reviewed-by: https://github.com/AtkinsSJ ✅
27 changed files with 303 additions and 199 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
48
Libraries/LibWeb/Painting/Blending.h
Normal 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();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue