1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 06:07:34 +00:00

LibWeb: Convert images to common AbstractImageStyleValue base

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

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;

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) };

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&);

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()) {