mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-09 01:29:17 +00:00
LibWeb/CSS: Implement mix-blend-mode
This adds support for the `mix-blend-mode` CSS property.
This commit is contained in:
parent
8575bddfe6
commit
0fe30886f5
Notes:
github-actions[bot]
2025-02-05 11:28:01 +00:00
Author: https://github.com/skyz1
Commit: 0fe30886f5
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3267
Reviewed-by: https://github.com/AtkinsSJ ✅
Reviewed-by: https://github.com/konradekk
24 changed files with 311 additions and 57 deletions
|
@ -1433,6 +1433,12 @@ CSS::Containment ComputedProperties::contain() const
|
||||||
return containment;
|
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
|
Optional<CSS::MaskType> ComputedProperties::mask_type() const
|
||||||
{
|
{
|
||||||
auto const& value = property(CSS::PropertyID::MaskType);
|
auto const& value = property(CSS::PropertyID::MaskType);
|
||||||
|
|
|
@ -162,6 +162,7 @@ public:
|
||||||
Optional<CSS::UserSelect> user_select() const;
|
Optional<CSS::UserSelect> user_select() const;
|
||||||
Optional<CSS::Isolation> isolation() const;
|
Optional<CSS::Isolation> isolation() const;
|
||||||
CSS::Containment contain() const;
|
CSS::Containment contain() const;
|
||||||
|
Optional<CSS::MixBlendMode> mix_blend_mode() const;
|
||||||
|
|
||||||
static Vector<CSS::Transformation> transformations_for_style_value(CSSStyleValue const& value);
|
static Vector<CSS::Transformation> transformations_for_style_value(CSSStyleValue const& value);
|
||||||
Vector<CSS::Transformation> transformations() const;
|
Vector<CSS::Transformation> transformations() const;
|
||||||
|
|
|
@ -185,6 +185,7 @@ public:
|
||||||
static CSS::UserSelect user_select() { return CSS::UserSelect::Auto; }
|
static CSS::UserSelect user_select() { return CSS::UserSelect::Auto; }
|
||||||
static CSS::Isolation isolation() { return CSS::Isolation::Auto; }
|
static CSS::Isolation isolation() { return CSS::Isolation::Auto; }
|
||||||
static CSS::Containment contain() { return {}; }
|
static CSS::Containment contain() { return {}; }
|
||||||
|
static CSS::MixBlendMode mix_blend_mode() { return CSS::MixBlendMode::Normal; }
|
||||||
|
|
||||||
// https://www.w3.org/TR/SVG/geometry.html
|
// https://www.w3.org/TR/SVG/geometry.html
|
||||||
static LengthPercentage cx() { return CSS::Length::make_px(0); }
|
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::UserSelect user_select() const { return m_noninherited.user_select; }
|
||||||
CSS::Isolation isolation() const { return m_noninherited.isolation; }
|
CSS::Isolation isolation() const { return m_noninherited.isolation; }
|
||||||
CSS::Containment const& contain() const { return m_noninherited.contain; }
|
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; }
|
CSS::LengthBox const& inset() const { return m_noninherited.inset; }
|
||||||
const CSS::LengthBox& margin() const { return m_noninherited.margin; }
|
const CSS::LengthBox& margin() const { return m_noninherited.margin; }
|
||||||
|
@ -696,6 +698,7 @@ protected:
|
||||||
CSS::UserSelect user_select { InitialValues::user_select() };
|
CSS::UserSelect user_select { InitialValues::user_select() };
|
||||||
CSS::Isolation isolation { InitialValues::isolation() };
|
CSS::Isolation isolation { InitialValues::isolation() };
|
||||||
CSS::Containment contain { InitialValues::contain() };
|
CSS::Containment contain { InitialValues::contain() };
|
||||||
|
CSS::MixBlendMode mix_blend_mode { InitialValues::mix_blend_mode() };
|
||||||
|
|
||||||
Optional<CSS::Transformation> rotate;
|
Optional<CSS::Transformation> rotate;
|
||||||
Optional<CSS::Transformation> translate;
|
Optional<CSS::Transformation> translate;
|
||||||
|
@ -871,6 +874,7 @@ public:
|
||||||
void set_user_select(CSS::UserSelect value) { m_noninherited.user_select = value; }
|
void set_user_select(CSS::UserSelect value) { m_noninherited.user_select = value; }
|
||||||
void set_isolation(CSS::Isolation value) { m_noninherited.isolation = value; }
|
void set_isolation(CSS::Isolation value) { m_noninherited.isolation = value; }
|
||||||
void set_contain(CSS::Containment value) { m_noninherited.contain = move(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_fill(SVGPaint value) { m_inherited.fill = move(value); }
|
||||||
void set_stroke(SVGPaint value) { m_inherited.stroke = move(value); }
|
void set_stroke(SVGPaint value) { m_inherited.stroke = move(value); }
|
||||||
|
|
|
@ -406,6 +406,26 @@
|
||||||
"normal",
|
"normal",
|
||||||
"compact"
|
"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": [
|
"object-fit": [
|
||||||
"fill",
|
"fill",
|
||||||
"contain",
|
"contain",
|
||||||
|
|
|
@ -114,6 +114,9 @@
|
||||||
"coarse",
|
"coarse",
|
||||||
"col-resize",
|
"col-resize",
|
||||||
"collapse",
|
"collapse",
|
||||||
|
"color",
|
||||||
|
"color-dodge",
|
||||||
|
"color-burn",
|
||||||
"column",
|
"column",
|
||||||
"column-reverse",
|
"column-reverse",
|
||||||
"common-ligatures",
|
"common-ligatures",
|
||||||
|
@ -133,11 +136,13 @@
|
||||||
"cursive",
|
"cursive",
|
||||||
"custom",
|
"custom",
|
||||||
"dark",
|
"dark",
|
||||||
|
"darken",
|
||||||
"dashed",
|
"dashed",
|
||||||
"decimal",
|
"decimal",
|
||||||
"decimal-leading-zero",
|
"decimal-leading-zero",
|
||||||
"default",
|
"default",
|
||||||
"diagonal-fractions",
|
"diagonal-fractions",
|
||||||
|
"difference",
|
||||||
"disc",
|
"disc",
|
||||||
"discretionary-ligatures",
|
"discretionary-ligatures",
|
||||||
"disclosure-closed",
|
"disclosure-closed",
|
||||||
|
@ -158,6 +163,7 @@
|
||||||
"end",
|
"end",
|
||||||
"evenodd",
|
"evenodd",
|
||||||
"ew-resize",
|
"ew-resize",
|
||||||
|
"exclusion",
|
||||||
"expanded",
|
"expanded",
|
||||||
"extra-condensed",
|
"extra-condensed",
|
||||||
"extra-expanded",
|
"extra-expanded",
|
||||||
|
@ -186,6 +192,7 @@
|
||||||
"graytext",
|
"graytext",
|
||||||
"grid",
|
"grid",
|
||||||
"groove",
|
"groove",
|
||||||
|
"hard-light",
|
||||||
"help",
|
"help",
|
||||||
"hidden",
|
"hidden",
|
||||||
"high",
|
"high",
|
||||||
|
@ -196,6 +203,7 @@
|
||||||
"historical-ligatures",
|
"historical-ligatures",
|
||||||
"horizontal-tb",
|
"horizontal-tb",
|
||||||
"hover",
|
"hover",
|
||||||
|
"hue",
|
||||||
"inactiveborder",
|
"inactiveborder",
|
||||||
"inactivecaption",
|
"inactivecaption",
|
||||||
"inactivecaptiontext",
|
"inactivecaptiontext",
|
||||||
|
@ -242,6 +250,7 @@
|
||||||
"less",
|
"less",
|
||||||
"light",
|
"light",
|
||||||
"lighter",
|
"lighter",
|
||||||
|
"lighten",
|
||||||
"line-through",
|
"line-through",
|
||||||
"linear",
|
"linear",
|
||||||
"lining-nums",
|
"lining-nums",
|
||||||
|
@ -255,6 +264,7 @@
|
||||||
"lowercase",
|
"lowercase",
|
||||||
"ltr",
|
"ltr",
|
||||||
"luminance",
|
"luminance",
|
||||||
|
"luminosity",
|
||||||
"mark",
|
"mark",
|
||||||
"marktext",
|
"marktext",
|
||||||
"math",
|
"math",
|
||||||
|
@ -273,6 +283,7 @@
|
||||||
"monospace",
|
"monospace",
|
||||||
"more",
|
"more",
|
||||||
"move",
|
"move",
|
||||||
|
"multiply",
|
||||||
"n-resize",
|
"n-resize",
|
||||||
"ne-resize",
|
"ne-resize",
|
||||||
"nearest",
|
"nearest",
|
||||||
|
@ -306,6 +317,7 @@
|
||||||
"ordinal",
|
"ordinal",
|
||||||
"outset",
|
"outset",
|
||||||
"outside",
|
"outside",
|
||||||
|
"overlay",
|
||||||
"overline",
|
"overline",
|
||||||
"p3",
|
"p3",
|
||||||
"padding-box",
|
"padding-box",
|
||||||
|
@ -315,6 +327,8 @@
|
||||||
"petite-caps",
|
"petite-caps",
|
||||||
"pixelated",
|
"pixelated",
|
||||||
"plaintext",
|
"plaintext",
|
||||||
|
"plus-darker",
|
||||||
|
"plus-lighter",
|
||||||
"pointer",
|
"pointer",
|
||||||
"portrait",
|
"portrait",
|
||||||
"pre",
|
"pre",
|
||||||
|
@ -353,7 +367,9 @@
|
||||||
"s-resize",
|
"s-resize",
|
||||||
"safe",
|
"safe",
|
||||||
"sans-serif",
|
"sans-serif",
|
||||||
|
"saturation",
|
||||||
"scale-down",
|
"scale-down",
|
||||||
|
"screen",
|
||||||
"scroll",
|
"scroll",
|
||||||
"scrollbar",
|
"scrollbar",
|
||||||
"se-resize",
|
"se-resize",
|
||||||
|
@ -377,6 +393,7 @@
|
||||||
"small-caps",
|
"small-caps",
|
||||||
"smaller",
|
"smaller",
|
||||||
"smooth",
|
"smooth",
|
||||||
|
"soft-light",
|
||||||
"solid",
|
"solid",
|
||||||
"space",
|
"space",
|
||||||
"space-around",
|
"space-around",
|
||||||
|
|
|
@ -2116,6 +2116,14 @@
|
||||||
"unitless-length"
|
"unitless-length"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"mix-blend-mode": {
|
||||||
|
"animation-type": "none",
|
||||||
|
"inherited": false,
|
||||||
|
"initial": "normal",
|
||||||
|
"valid-types": [
|
||||||
|
"mix-blend-mode"
|
||||||
|
]
|
||||||
|
},
|
||||||
"object-fit": {
|
"object-fit": {
|
||||||
"animation-type": "discrete",
|
"animation-type": "discrete",
|
||||||
"inherited": false,
|
"inherited": false,
|
||||||
|
|
|
@ -240,6 +240,11 @@ bool Node::establishes_stacking_context() const
|
||||||
return true;
|
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;
|
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())
|
if (auto isolation = computed_style.isolation(); isolation.has_value())
|
||||||
computed_values.set_isolation(isolation.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();
|
propagate_style_to_anonymous_wrappers();
|
||||||
|
|
||||||
if (is<NodeWithStyleAndBoxModelMetrics>(this))
|
if (is<NodeWithStyleAndBoxModelMetrics>(this))
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
#include <AK/Utf8View.h>
|
#include <AK/Utf8View.h>
|
||||||
#include <AK/Vector.h>
|
#include <AK/Vector.h>
|
||||||
#include <LibGfx/Color.h>
|
#include <LibGfx/Color.h>
|
||||||
|
#include <LibGfx/CompositingAndBlendingOperator.h>
|
||||||
#include <LibGfx/Forward.h>
|
#include <LibGfx/Forward.h>
|
||||||
#include <LibGfx/Gradients.h>
|
#include <LibGfx/Gradients.h>
|
||||||
#include <LibGfx/ImmutableBitmap.h>
|
#include <LibGfx/ImmutableBitmap.h>
|
||||||
|
@ -118,6 +119,8 @@ struct StackingContextTransform {
|
||||||
|
|
||||||
struct PushStackingContext {
|
struct PushStackingContext {
|
||||||
float opacity;
|
float opacity;
|
||||||
|
Gfx::CompositingAndBlendingOperator compositing_and_blending_operator;
|
||||||
|
bool isolate;
|
||||||
// The bounding box of the source paintable (pre-transform).
|
// The bounding box of the source paintable (pre-transform).
|
||||||
Gfx::IntRect source_paintable_rect;
|
Gfx::IntRect source_paintable_rect;
|
||||||
// A translation to be applied after the stacking context has been transformed.
|
// A translation to be applied after the stacking context has been transformed.
|
||||||
|
@ -410,6 +413,10 @@ struct ApplyOpacity {
|
||||||
float opacity;
|
float opacity;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
struct ApplyCompositeAndBlendingOperator {
|
||||||
|
Gfx::CompositingAndBlendingOperator compositing_and_blending_operator;
|
||||||
|
};
|
||||||
|
|
||||||
struct ApplyFilters {
|
struct ApplyFilters {
|
||||||
Vector<Gfx::Filter> filter;
|
Vector<Gfx::Filter> filter;
|
||||||
};
|
};
|
||||||
|
@ -469,8 +476,8 @@ using Command = Variant<
|
||||||
PaintNestedDisplayList,
|
PaintNestedDisplayList,
|
||||||
PaintScrollBar,
|
PaintScrollBar,
|
||||||
ApplyOpacity,
|
ApplyOpacity,
|
||||||
|
ApplyCompositeAndBlendingOperator,
|
||||||
ApplyFilters,
|
ApplyFilters,
|
||||||
ApplyTransform,
|
ApplyTransform,
|
||||||
ApplyMaskBitmap>;
|
ApplyMaskBitmap>;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -124,6 +124,7 @@ void DisplayListPlayer::execute(DisplayList& display_list)
|
||||||
else HANDLE_COMMAND(PaintScrollBar, paint_scrollbar)
|
else HANDLE_COMMAND(PaintScrollBar, paint_scrollbar)
|
||||||
else HANDLE_COMMAND(PaintNestedDisplayList, paint_nested_display_list)
|
else HANDLE_COMMAND(PaintNestedDisplayList, paint_nested_display_list)
|
||||||
else HANDLE_COMMAND(ApplyOpacity, apply_opacity)
|
else HANDLE_COMMAND(ApplyOpacity, apply_opacity)
|
||||||
|
else HANDLE_COMMAND(ApplyCompositeAndBlendingOperator, apply_composite_and_blending_operator)
|
||||||
else HANDLE_COMMAND(ApplyFilters, apply_filters)
|
else HANDLE_COMMAND(ApplyFilters, apply_filters)
|
||||||
else HANDLE_COMMAND(ApplyTransform, apply_transform)
|
else HANDLE_COMMAND(ApplyTransform, apply_transform)
|
||||||
else HANDLE_COMMAND(ApplyMaskBitmap, apply_mask_bitmap)
|
else HANDLE_COMMAND(ApplyMaskBitmap, apply_mask_bitmap)
|
||||||
|
|
|
@ -67,6 +67,7 @@ private:
|
||||||
virtual void paint_nested_display_list(PaintNestedDisplayList const&) = 0;
|
virtual void paint_nested_display_list(PaintNestedDisplayList const&) = 0;
|
||||||
virtual void paint_scrollbar(PaintScrollBar const&) = 0;
|
virtual void paint_scrollbar(PaintScrollBar const&) = 0;
|
||||||
virtual void apply_opacity(ApplyOpacity 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_filters(ApplyFilters const&) = 0;
|
||||||
virtual void apply_transform(ApplyTransform const&) = 0;
|
virtual void apply_transform(ApplyTransform const&) = 0;
|
||||||
virtual void apply_mask_bitmap(ApplyMaskBitmap const&) = 0;
|
virtual void apply_mask_bitmap(ApplyMaskBitmap const&) = 0;
|
||||||
|
|
|
@ -23,6 +23,8 @@
|
||||||
#include <pathops/SkPathOps.h>
|
#include <pathops/SkPathOps.h>
|
||||||
|
|
||||||
#include <LibGfx/Font/ScaledFont.h>
|
#include <LibGfx/Font/ScaledFont.h>
|
||||||
|
#include <LibGfx/PainterSkia.h>
|
||||||
|
#include <LibGfx/PathSkia.h>
|
||||||
#include <LibGfx/SkiaUtils.h>
|
#include <LibGfx/SkiaUtils.h>
|
||||||
#include <LibWeb/CSS/ComputedValues.h>
|
#include <LibWeb/CSS/ComputedValues.h>
|
||||||
#include <LibWeb/Painting/DisplayListPlayerSkia.h>
|
#include <LibWeb/Painting/DisplayListPlayerSkia.h>
|
||||||
|
@ -195,11 +197,15 @@ void DisplayListPlayerSkia::push_stacking_context(PushStackingContext const& com
|
||||||
.translate(-command.transform.origin);
|
.translate(-command.transform.origin);
|
||||||
auto matrix = to_skia_matrix(new_transform);
|
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);
|
auto source_paintable_rect = to_skia_rect(command.source_paintable_rect);
|
||||||
SkRect dest;
|
SkRect dest;
|
||||||
matrix.mapRect(&dest, source_paintable_rect);
|
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 {
|
} else {
|
||||||
canvas.save();
|
canvas.save();
|
||||||
}
|
}
|
||||||
|
@ -878,6 +884,14 @@ void DisplayListPlayerSkia::apply_opacity(ApplyOpacity const& command)
|
||||||
canvas.saveLayer(nullptr, &paint);
|
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)
|
void DisplayListPlayerSkia::apply_filters(ApplyFilters const& command)
|
||||||
{
|
{
|
||||||
if (command.filter.is_empty()) {
|
if (command.filter.is_empty()) {
|
||||||
|
|
|
@ -54,6 +54,7 @@ private:
|
||||||
void paint_scrollbar(PaintScrollBar const&) override;
|
void paint_scrollbar(PaintScrollBar const&) override;
|
||||||
void paint_nested_display_list(PaintNestedDisplayList const&) override;
|
void paint_nested_display_list(PaintNestedDisplayList const&) override;
|
||||||
void apply_opacity(ApplyOpacity 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_filters(ApplyFilters const&) override;
|
||||||
void apply_transform(ApplyTransform const&) override;
|
void apply_transform(ApplyTransform const&) override;
|
||||||
void apply_mask_bitmap(ApplyMaskBitmap const&) override;
|
void apply_mask_bitmap(ApplyMaskBitmap const&) override;
|
||||||
|
|
|
@ -299,6 +299,8 @@ void DisplayListRecorder::push_stacking_context(PushStackingContextParams params
|
||||||
{
|
{
|
||||||
append(PushStackingContext {
|
append(PushStackingContext {
|
||||||
.opacity = params.opacity,
|
.opacity = params.opacity,
|
||||||
|
.compositing_and_blending_operator = params.compositing_and_blending_operator,
|
||||||
|
.isolate = params.isolate,
|
||||||
.source_paintable_rect = params.source_paintable_rect,
|
.source_paintable_rect = params.source_paintable_rect,
|
||||||
.transform = {
|
.transform = {
|
||||||
.origin = params.transform.origin,
|
.origin = params.transform.origin,
|
||||||
|
@ -411,6 +413,11 @@ void DisplayListRecorder::apply_opacity(float opacity)
|
||||||
append(ApplyOpacity { .opacity = 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)
|
void DisplayListRecorder::apply_filters(Vector<Gfx::Filter> filter)
|
||||||
{
|
{
|
||||||
append(ApplyFilters { .filter = move(filter) });
|
append(ApplyFilters { .filter = move(filter) });
|
||||||
|
|
|
@ -118,6 +118,8 @@ public:
|
||||||
|
|
||||||
struct PushStackingContextParams {
|
struct PushStackingContextParams {
|
||||||
float opacity;
|
float opacity;
|
||||||
|
Gfx::CompositingAndBlendingOperator compositing_and_blending_operator;
|
||||||
|
bool isolate;
|
||||||
bool is_fixed_position;
|
bool is_fixed_position;
|
||||||
Gfx::IntRect source_paintable_rect;
|
Gfx::IntRect source_paintable_rect;
|
||||||
StackingContextTransform transform;
|
StackingContextTransform transform;
|
||||||
|
@ -146,6 +148,7 @@ public:
|
||||||
void paint_scrollbar(int scroll_frame_id, Gfx::IntRect, CSSPixelFraction scroll_size, bool vertical);
|
void paint_scrollbar(int scroll_frame_id, Gfx::IntRect, CSSPixelFraction scroll_size, bool vertical);
|
||||||
|
|
||||||
void apply_opacity(float opacity);
|
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_filters(Vector<Gfx::Filter> filter);
|
||||||
void apply_transform(Gfx::FloatPoint origin, Gfx::FloatMatrix4x4);
|
void apply_transform(Gfx::FloatPoint origin, Gfx::FloatMatrix4x4);
|
||||||
void apply_mask_bitmap(Gfx::IntPoint origin, Gfx::ImmutableBitmap const&, Gfx::Bitmap::MaskKind);
|
void apply_mask_bitmap(Gfx::IntPoint origin, Gfx::ImmutableBitmap const&, Gfx::Bitmap::MaskKind);
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
#include <LibWeb/Layout/ImageBox.h>
|
#include <LibWeb/Layout/ImageBox.h>
|
||||||
#include <LibWeb/Painting/SVGSVGPaintable.h>
|
#include <LibWeb/Painting/SVGSVGPaintable.h>
|
||||||
|
#include <LibWeb/Painting/StackingContext.h>
|
||||||
|
|
||||||
namespace Web::Painting {
|
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& 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 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) {
|
if (needs_to_save_state) {
|
||||||
context.display_list_recorder().save();
|
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);
|
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()) {
|
if (svg_box.has_css_transform()) {
|
||||||
auto transform_matrix = svg_box.transform();
|
auto transform_matrix = svg_box.transform();
|
||||||
Gfx::FloatPoint transform_origin = svg_box.transform_origin().template to_type<float>();
|
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);
|
paint_descendants(context, svg_box, phase);
|
||||||
|
|
||||||
|
if (compositing_and_blending_operator != Gfx::CompositingAndBlendingOperator::Normal) {
|
||||||
|
context.display_list_recorder().restore();
|
||||||
|
}
|
||||||
|
|
||||||
if (!filter.is_empty()) {
|
if (!filter.is_empty()) {
|
||||||
context.display_list_recorder().restore();
|
context.display_list_recorder().restore();
|
||||||
}
|
}
|
||||||
|
|
|
@ -299,8 +299,21 @@ void StackingContext::paint(PaintContext& context) const
|
||||||
auto transform_matrix = paintable_box().transform();
|
auto transform_matrix = paintable_box().transform();
|
||||||
auto transform_origin = paintable_box().transform_origin().to_type<float>();
|
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 {
|
DisplayListRecorder::PushStackingContextParams push_stacking_context_params {
|
||||||
.opacity = opacity,
|
.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(),
|
.is_fixed_position = paintable_box().is_fixed_position(),
|
||||||
.source_paintable_rect = source_paintable_rect,
|
.source_paintable_rect = source_paintable_rect,
|
||||||
.transform = {
|
.transform = {
|
||||||
|
|
|
@ -12,6 +12,26 @@
|
||||||
|
|
||||||
namespace Web::Painting {
|
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 {
|
class StackingContext {
|
||||||
friend class ViewportPaintable;
|
friend class ViewportPaintable;
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -1,6 +1,6 @@
|
||||||
All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
|
All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
|
||||||
'cssText': ''
|
'cssText': ''
|
||||||
'length': '218'
|
'length': '219'
|
||||||
'parentRule': 'null'
|
'parentRule': 'null'
|
||||||
'cssFloat': 'none'
|
'cssFloat': 'none'
|
||||||
'WebkitAlignContent': 'normal'
|
'WebkitAlignContent': 'normal'
|
||||||
|
@ -455,6 +455,8 @@ All supported properties and their default values exposed from CSSStyleDeclarati
|
||||||
'min-inline-size': '0px'
|
'min-inline-size': '0px'
|
||||||
'minWidth': 'auto'
|
'minWidth': 'auto'
|
||||||
'min-width': 'auto'
|
'min-width': 'auto'
|
||||||
|
'mixBlendMode': 'normal'
|
||||||
|
'mix-blend-mode': 'normal'
|
||||||
'objectFit': 'fill'
|
'objectFit': 'fill'
|
||||||
'object-fit': 'fill'
|
'object-fit': 'fill'
|
||||||
'objectPosition': '50% 50%'
|
'objectPosition': '50% 50%'
|
||||||
|
|
|
@ -167,57 +167,58 @@ All properties associated with getComputedStyle(document.body):
|
||||||
"164": "min-height",
|
"164": "min-height",
|
||||||
"165": "min-inline-size",
|
"165": "min-inline-size",
|
||||||
"166": "min-width",
|
"166": "min-width",
|
||||||
"167": "object-fit",
|
"167": "mix-blend-mode",
|
||||||
"168": "object-position",
|
"168": "object-fit",
|
||||||
"169": "opacity",
|
"169": "object-position",
|
||||||
"170": "order",
|
"170": "opacity",
|
||||||
"171": "outline-color",
|
"171": "order",
|
||||||
"172": "outline-offset",
|
"172": "outline-color",
|
||||||
"173": "outline-style",
|
"173": "outline-offset",
|
||||||
"174": "outline-width",
|
"174": "outline-style",
|
||||||
"175": "overflow-x",
|
"175": "outline-width",
|
||||||
"176": "overflow-y",
|
"176": "overflow-x",
|
||||||
"177": "padding-block-end",
|
"177": "overflow-y",
|
||||||
"178": "padding-block-start",
|
"178": "padding-block-end",
|
||||||
"179": "padding-bottom",
|
"179": "padding-block-start",
|
||||||
"180": "padding-inline-end",
|
"180": "padding-bottom",
|
||||||
"181": "padding-inline-start",
|
"181": "padding-inline-end",
|
||||||
"182": "padding-left",
|
"182": "padding-inline-start",
|
||||||
"183": "padding-right",
|
"183": "padding-left",
|
||||||
"184": "padding-top",
|
"184": "padding-right",
|
||||||
"185": "position",
|
"185": "padding-top",
|
||||||
"186": "r",
|
"186": "position",
|
||||||
"187": "right",
|
"187": "r",
|
||||||
"188": "rotate",
|
"188": "right",
|
||||||
"189": "row-gap",
|
"189": "rotate",
|
||||||
"190": "rx",
|
"190": "row-gap",
|
||||||
"191": "ry",
|
"191": "rx",
|
||||||
"192": "scale",
|
"192": "ry",
|
||||||
"193": "scrollbar-gutter",
|
"193": "scale",
|
||||||
"194": "scrollbar-width",
|
"194": "scrollbar-gutter",
|
||||||
"195": "stop-color",
|
"195": "scrollbar-width",
|
||||||
"196": "stop-opacity",
|
"196": "stop-color",
|
||||||
"197": "table-layout",
|
"197": "stop-opacity",
|
||||||
"198": "text-decoration-color",
|
"198": "table-layout",
|
||||||
"199": "text-decoration-style",
|
"199": "text-decoration-color",
|
||||||
"200": "text-decoration-thickness",
|
"200": "text-decoration-style",
|
||||||
"201": "text-overflow",
|
"201": "text-decoration-thickness",
|
||||||
"202": "top",
|
"202": "text-overflow",
|
||||||
"203": "transform",
|
"203": "top",
|
||||||
"204": "transform-box",
|
"204": "transform",
|
||||||
"205": "transform-origin",
|
"205": "transform-box",
|
||||||
"206": "transition-delay",
|
"206": "transform-origin",
|
||||||
"207": "transition-duration",
|
"207": "transition-delay",
|
||||||
"208": "transition-property",
|
"208": "transition-duration",
|
||||||
"209": "transition-timing-function",
|
"209": "transition-property",
|
||||||
"210": "translate",
|
"210": "transition-timing-function",
|
||||||
"211": "unicode-bidi",
|
"211": "translate",
|
||||||
"212": "user-select",
|
"212": "unicode-bidi",
|
||||||
"213": "vertical-align",
|
"213": "user-select",
|
||||||
"214": "width",
|
"214": "vertical-align",
|
||||||
"215": "x",
|
"215": "width",
|
||||||
"216": "y",
|
"216": "x",
|
||||||
"217": "z-index"
|
"217": "y",
|
||||||
|
"218": "z-index"
|
||||||
}
|
}
|
||||||
All properties associated with document.body.style by default:
|
All properties associated with document.body.style by default:
|
||||||
{}
|
{}
|
||||||
|
|
|
@ -165,6 +165,7 @@ min-block-size: 0px
|
||||||
min-height: auto
|
min-height: auto
|
||||||
min-inline-size: 0px
|
min-inline-size: 0px
|
||||||
min-width: auto
|
min-width: auto
|
||||||
|
mix-blend-mode: normal
|
||||||
object-fit: fill
|
object-fit: fill
|
||||||
object-position: 50% 50%
|
object-position: 50% 50%
|
||||||
opacity: 1
|
opacity: 1
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue