RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 15:07:45 +00:00
Code Issues Activity Actions

LibWeb: Convert images to common AbstractImageStyleValue base

Browse source 
This commit moves both the ImageStyleValue and LinearGradientStyleValue
to a common base class of AbstractImageStyleValue. This abstracts
getting the natural_width/height, loading/resolving, and painting
the image.

Now for 'free' you get:

 - Linear gradients working with the various background sizing/repeat
   properties.
 - Linear gradients working as list-markers :^) -- best feature ever!

P.s. This commit is a little large as it's tricky to make this change
incrementally without breaking things.
This commit is contained in:
MacDue 2022-07-31 01:11:59 +01:00 • committed by Andreas Kling
parent 264543b90a
commit 6a6475673f
13 changed files with 140 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

49
Userland/Libraries/LibWeb/Painting/BackgroundPainting.cpp
View file

@ -62,9 +62,7 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
color_box = get_box(background_layers->last().clip);
auto layer_is_paintable = [&](auto& layer) {
return (layer.background_image
&& ((layer.background_image->is_image() && layer.background_image->as_image().bitmap())
|| layer.background_image->is_linear_gradient()));
return layer.background_image && layer.background_image->is_paintable();
};
bool has_paintable_layers = false;
@ -93,19 +91,12 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
// Clip
auto clip_box = get_box(layer.clip);
auto clip_rect = clip_box.rect.to_rounded<int>();
painter.add_clip_rect(clip_rect);
ScopedCornerRadiusClip corner_clip { painter, clip_rect, clip_box.radii };
if (layer.background_image->is_linear_gradient()) {
// FIXME: Support sizing and positioning rules with gradients.
auto& linear_gradient = layer.background_image->as_linear_gradient();
auto data = resolve_linear_gradient_data(layout_node, border_box.rect, linear_gradient);
paint_linear_gradient(context, border_box.rect.to_rounded<int>(), data);
continue;
}
auto& image = *layer.background_image->as_image().bitmap();
auto& image = *layer.background_image;
Gfx::FloatRect background_positioning_area;
// Attachment and Origin
@ -119,21 +110,25 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
break;
}
// FIXME: Implement proper derault sizing algorithm: https://drafts.csswg.org/css-images/#default-sizing
auto natural_image_width = image.natural_width().value_or(background_positioning_area.width());
auto natural_image_height = image.natural_height().value_or(background_positioning_area.height());
// Size
Gfx::FloatRect image_rect;
switch (layer.size_type) {
case CSS::BackgroundSize::Contain: {
float max_width_ratio = background_positioning_area.width() / image.width();
float max_height_ratio = background_positioning_area.height() / image.height();
float max_width_ratio = background_positioning_area.width() / natural_image_width;
float max_height_ratio = background_positioning_area.height() / natural_image_height;
float ratio = min(max_width_ratio, max_height_ratio);
image_rect.set_size(image.width() * ratio, image.height() * ratio);
image_rect.set_size(natural_image_width * ratio, natural_image_height * ratio);
break;
}
case CSS::BackgroundSize::Cover: {
float max_width_ratio = background_positioning_area.width() / image.width();
float max_height_ratio = background_positioning_area.height() / image.height();
float max_width_ratio = background_positioning_area.width() / natural_image_width;
float max_height_ratio = background_positioning_area.height() / natural_image_height;
float ratio = max(max_width_ratio, max_height_ratio);
image_rect.set_size(image.width() * ratio, image.height() * ratio);
image_rect.set_size(natural_image_width * ratio, natural_image_height * ratio);
break;
}
case CSS::BackgroundSize::LengthPercentage: {
@ -142,14 +137,14 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
bool x_is_auto = layer.size_x.is_auto();
bool y_is_auto = layer.size_y.is_auto();
if (x_is_auto && y_is_auto) {
width = image.width();
height = image.height();
width = natural_image_width;
height = natural_image_height;
} else if (x_is_auto) {
height = layer.size_y.resolved(layout_node, CSS::Length::make_px(background_positioning_area.height())).to_px(layout_node);
width = image.width() * (height / image.height());
width = natural_image_width * (height / natural_image_height);
} else if (y_is_auto) {
width = layer.size_x.resolved(layout_node, CSS::Length::make_px(background_positioning_area.width())).to_px(layout_node);
height = image.height() * (width / image.width());
height = natural_image_height * (width / natural_image_width);
} else {
width = layer.size_x.resolved(layout_node, CSS::Length::make_px(background_positioning_area.width())).to_px(layout_node);
height = layer.size_y.resolved(layout_node, CSS::Length::make_px(background_positioning_area.height())).to_px(layout_node);
@ -180,10 +175,10 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
// so that the original aspect ratio is restored.
if (layer.repeat_x != layer.repeat_y) {
if (layer.size_x.is_auto()) {
image_rect.set_width(image.width() * (image_rect.height() / image.height()));
image_rect.set_width(natural_image_width * (image_rect.height() / natural_image_height));
}
if (layer.size_y.is_auto()) {
image_rect.set_height(image.height() * (image_rect.width() / image.width()));
image_rect.set_height(natural_image_height * (image_rect.width() / natural_image_width));
}
}
}
@ -278,6 +273,8 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
float image_y = image_rect.y();
Optional<Gfx::IntRect> last_int_image_rect;
image.resolve_for_size(layout_node, image_rect.size());
while (image_y < clip_rect.bottom()) {
image_rect.set_y(image_y);
@ -285,8 +282,8 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
while (image_x < clip_rect.right()) {
image_rect.set_x(image_x);
auto int_image_rect = image_rect.to_rounded<int>();
if (int_image_rect != last_int_image_rect)
painter.draw_scaled_bitmap(int_image_rect, image, image.rect(), 1.0f, Gfx::Painter::ScalingMode::BilinearBlend);
if (int_image_rect != last_int_image_rect && int_image_rect.intersects(context.viewport_rect()))
image.paint(context, int_image_rect);
last_int_image_rect = int_image_rect;
if (!repeat_x)
break;

17
Userland/Libraries/LibWeb/Painting/GradientPainting.cpp
View file

@ -8,6 +8,7 @@
#include <AK/Math.h>
#include <LibGfx/Gamma.h>
#include <LibGfx/Line.h>
#include <LibWeb/CSS/StyleValue.h>
#include <LibWeb/Painting/GradientPainting.h>
namespace Web::Painting {
@ -19,20 +20,20 @@ static float normalized_gradient_angle_radians(float gradient_angle)
return real_angle * (AK::Pi<float> / 180);
}
static float calulate_gradient_length(Gfx::IntRect const& gradient_rect, float sin_angle, float cos_angle)
static float calulate_gradient_length(Gfx::IntSize const& gradient_size, float sin_angle, float cos_angle)
{
return AK::fabs(gradient_rect.height() * sin_angle) + AK::fabs(gradient_rect.width() * cos_angle);
return AK::fabs(gradient_size.height() * sin_angle) + AK::fabs(gradient_size.width() * cos_angle);
}
static float calulate_gradient_length(Gfx::IntRect const& gradient_rect, float gradient_angle)
static float calulate_gradient_length(Gfx::IntSize const& gradient_size, float gradient_angle)
{
float angle = normalized_gradient_angle_radians(gradient_angle);
float sin_angle, cos_angle;
AK::sincos(angle, sin_angle, cos_angle);
return calulate_gradient_length(gradient_rect, sin_angle, cos_angle);
return calulate_gradient_length(gradient_size, sin_angle, cos_angle);
}
LinearGradientData resolve_linear_gradient_data(Layout::Node const& node, Gfx::FloatRect const& gradient_rect, CSS::LinearGradientStyleValue const& linear_gradient)
LinearGradientData resolve_linear_gradient_data(Layout::Node const& node, Gfx::FloatSize const& gradient_size, CSS::LinearGradientStyleValue const& linear_gradient)
{
auto& color_stop_list = linear_gradient.color_stop_list();
@ -42,8 +43,8 @@ LinearGradientData resolve_linear_gradient_data(Layout::Node const& node, Gfx::F
for (auto& stop : color_stop_list)
resolved_color_stops.append(ColorStop { .color = stop.color_stop.color });
auto gradient_angle = linear_gradient.angle_degrees(gradient_rect);
auto gradient_length_px = calulate_gradient_length(gradient_rect.to_rounded<int>(), gradient_angle);
auto gradient_angle = linear_gradient.angle_degrees(gradient_size);
auto gradient_length_px = calulate_gradient_length(gradient_size.to_rounded<int>(), gradient_angle);
auto gradient_length = CSS::Length::make_px(gradient_length_px);
// 1. If the first color stop does not have a position, set its position to 0%.
@ -137,7 +138,7 @@ void paint_linear_gradient(PaintContext& context, Gfx::IntRect const& gradient_r
float sin_angle, cos_angle;
AK::sincos(angle, sin_angle, cos_angle);
auto length = calulate_gradient_length(gradient_rect, sin_angle, cos_angle);
auto length = calulate_gradient_length(gradient_rect.size(), sin_angle, cos_angle);
Gfx::FloatPoint offset { cos_angle * (length / 2), sin_angle * (length / 2) };

3
Userland/Libraries/LibWeb/Painting/GradientPainting.h
View file

@ -9,7 +9,6 @@
#include <AK/Span.h>
#include <AK/Vector.h>
#include <LibGfx/Color.h>
#include <LibWeb/CSS/StyleValue.h>
#include <LibWeb/Forward.h>
#include <LibWeb/Painting/PaintContext.h>
@ -27,7 +26,7 @@ struct LinearGradientData {
ColorStopList color_stops;
};
LinearGradientData resolve_linear_gradient_data(Layout::Node const&, Gfx::FloatRect const&, CSS::LinearGradientStyleValue const&);
LinearGradientData resolve_linear_gradient_data(Layout::Node const&, Gfx::FloatSize const&, CSS::LinearGradientStyleValue const&);
void paint_linear_gradient(PaintContext&, Gfx::IntRect const&, LinearGradientData const&);

18
Userland/Libraries/LibWeb/Painting/MarkerPaintable.cpp
View file

@ -33,17 +33,25 @@ void MarkerPaintable::paint(PaintContext& context, PaintPhase phase) const
auto enclosing = enclosing_int_rect(absolute_rect());
if (auto const* list_style_image = layout_box().list_style_image_bitmap()) {
context.painter().blit(enclosing.location(), *list_style_image, list_style_image->rect());
int marker_width = (int)enclosing.height() / 2;
if (auto const* list_style_image = layout_box().list_style_image()) {
Gfx::IntRect image_rect {
0, 0,
list_style_image->natural_width().value_or(marker_width),
list_style_image->natural_height().value_or(marker_width)
};
image_rect.center_within(enclosing);
list_style_image->resolve_for_size(layout_box(), image_rect.size().to_type<float>());
list_style_image->paint(context, image_rect);
return;
}
auto color = computed_values().color();
int marker_width = (int)enclosing.height() / 2;
Gfx::IntRect marker_rect { 0, 0, marker_width, marker_width };
marker_rect.center_within(enclosing);
auto color = computed_values().color();
Gfx::AntiAliasingPainter aa_painter { context.painter() };
switch (layout_box().list_style_type()) {